Workflow and ServiceDesk Community

Original article is posted here.

While the Workflow Form Builder component has options for “processing” messages, I needed more flexibility with dynamic data.  The standard “Processing Message” field at the form level is a static text box:

The individual fields available on the form buttons are static fields as well.

So with a little extra effort, we can use a few components on another intermediary form to show our loading message exactly how we want.

This can be done in as many different ways as you can imagine, so let’s go over how I do it and that should be a good starting point.  The overhead view:

First, a few notes:

• I typically do my form validation outside of the form itself, in an embedded rule model for example.  This practice helps facilitate the Loading features this article demonstrates.
• A second Form Builder component is necessary to display the loading image and any loading message required
• An Auto Exit Page On Timer component is used to exit the page.  The lowest time setting for this is one second.  If this is not acceptable, javascript can be used to call an exit button on page load to make for an instant exit instead.
• The user experience will be that the loading page persists until the data path arrives at the nextForm Builder component.  This means that the loading page will be displayed for as long as it takes to process any evaluations or other workflow components between the loader page and the next page.

So to start, a basic form with a single button.

The button leads to a “Loading” form with whatever you desire as the form content.  I’m going to use the auto exit button as well as an IncludeHTML component (for my loading spinner) and an AsciiMergeLabel to hold any dynamic merge data I may want or need.

I should probably note here that the loader can also be a static .gif image file if desired, instead of the IncludeHTML component and CSS loader.  Make it a resource in your project rather than an indirect URL call so that it loads in faster.  For the sake of the article and my own preference, I’m going to continue to detail the process as a CSS-based loader experience.

The guts of the IncludeHTML component (code borrowed from http://cssload.net/):

<style>
#circularG{
position:relative;
width:32px;
height:32px}
 
.circularG{
position:absolute;
background-color:#ffd799;
width:7px;
height:7px;
-moz-border-radius:5px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:1.36s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:1.36s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:1.36s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_circularG;
-o-animation-duration:1.36s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_circularG;
animation-duration:1.36s;
animation-iteration-count:infinite;
animation-direction:linear;
}
 
#circularG_1{
left:0;
top:13px;
-moz-animation-delay:0.51s;
-webkit-animation-delay:0.51s;
-ms-animation-delay:0.51s;
-o-animation-delay:0.51s;
animation-delay:0.51s;
}
 
#circularG_2{
left:3px;
top:3px;
-moz-animation-delay:0.68s;
-webkit-animation-delay:0.68s;
-ms-animation-delay:0.68s;
-o-animation-delay:0.68s;
animation-delay:0.68s;
}
 
#circularG_3{
top:0;
left:13px;
-moz-animation-delay:0.85s;
-webkit-animation-delay:0.85s;
-ms-animation-delay:0.85s;
-o-animation-delay:0.85s;
animation-delay:0.85s;
}
 
#circularG_4{
right:3px;
top:3px;
-moz-animation-delay:1.02s;
-webkit-animation-delay:1.02s;
-ms-animation-delay:1.02s;
-o-animation-delay:1.02s;
animation-delay:1.02s;
}
 
#circularG_5{
right:0;
top:13px;
-moz-animation-delay:1.19s;
-webkit-animation-delay:1.19s;
-ms-animation-delay:1.19s;
-o-animation-delay:1.19s;
animation-delay:1.19s;
}
 
#circularG_6{
right:3px;
bottom:3px;
-moz-animation-delay:1.36s;
-webkit-animation-delay:1.36s;
-ms-animation-delay:1.36s;
-o-animation-delay:1.36s;
animation-delay:1.36s;
}
 
#circularG_7{
left:13px;
bottom:0;
-moz-animation-delay:1.53s;
-webkit-animation-delay:1.53s;
-ms-animation-delay:1.53s;
-o-animation-delay:1.53s;
animation-delay:1.53s;
}
 
#circularG_8{
left:3px;
bottom:3px;
-moz-animation-delay:1.7s;
-webkit-animation-delay:1.7s;
-ms-animation-delay:1.7s;
-o-animation-delay:1.7s;
animation-delay:1.7s;
}
 
@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}
 
100%{
-moz-transform:scale(.3)}
 
}
 
@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}
 
100%{
-webkit-transform:scale(.3)}
 
}
 
@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}
 
100%{
-ms-transform:scale(.3)}
 
}
 
@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}
 
100%{
-o-transform:scale(.3)}
 
}
 
@keyframes bounce_circularG{
0%{
transform:scale(1)}
 
100%{
transform:scale(.3)}
 
}
</style>
<div id="circularG">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>

This ends up looking like this:

The loader can be whatever you want; this one is rather embellished.

Loading forms can be used any time a user should be aware that something is happening in the background.  If a user clicks on a button and the interface does not respond with some sort of indication that the process is “thinking” or “working”, add a loading form in first thing on the button path.