Montag, 10. April 2017

Show an animated indicator after page submit “Please wait”

let' s present a friendly animated User-Interface message with an animated running indicator on Button-Click. The User could know that something is runing in the Background. Apex 5.1 has the" Show and wait Function".  We can use it like bellow:



1-Add a Dynamische Aktion on Click like so

apex.page.submit({
    request: "save",
    showWait: true


});
2- Add Your PL/SQL CODE Process to fire when Request=save



3- Since Apex 5.1 don't have a Text to display, let´s add a Custom CSS code  to add a Custom Text to the "Show and wait" Interface.


.u-Processing::after {
  content:" Please wait a moment. Your product creation is in working process...";
  display:block;
  position:absolute;
  width:700px !important;
  height:100% !important;
  color:white;
  font-size:2rem;
  font-weight:bold;
  left:-490%;
  right:100%;
  float:left;
  padding-right:-300px;
}

.u-Processing {
  box-sizing:border-box;
  display:block;
  height:64px;
  width:64px;
  cursor:progress;
  position:absolute;
  left:50%;
  margin-left:-32px;
  padding:16px;
  background:rgba(0,0,0,0) !important;
  border-radius:100%;
  z-index:2000;
  padding:0;
}

.apex_wait_overlay {
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  z-index:1001;
  -moz-opacity:.5;
  opacity:.5;
  filter:alpha(opacity=50);
}
4- Demo














Kommentare:

  1. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  2. Nice little tutorial.

    I am liking the way you have set up that fixed header then the Sarem sub menu.

    I have a desire to do something similar and I have a proto type working in standard HTML and JS but struggling to implement it into the APEX templates.

    A little tutorial on that implementation would be nice ;)

    AntwortenLöschen
  3. Hey Leigh,
    i have started a Tutorial about it today. Show my new Post

    AntwortenLöschen