You are viewing limited content. For full access, please sign in.

Question

Question

How to Create a Spinner or Loader for Forms

asked on October 25, 2016

Hi all,

I was asked to post this. Hope it's useful to others as well.
 

1 0

Answer

SELECTED ANSWER
replied on October 25, 2016 Show version history

Feel free to add your own ideas below.

I highly recommend googling "css spinner" because there are many lovely spinner and loader animations available.

This is how I implemented the spinner:

---

Layout

1. Add a HTML element.

2. On the Basic tab, set the HTML to:

<div id="PDloader"></div>

3. On the Advanced tab, set the class to "PDloading"

CSS and Javascript

1. In CSS, add the following:

.PDloading {
  position: fixed;
  z-index: 999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.PDloading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#PDloader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: -40px 0 0 -40px;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  border-bottom: 10px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. At this point, there's enough completed to make to the spinner/loader visible. It will run stopped with a bit of JQuery (see below). Forms 10.1 Update 2 has a neat new function that allows us to stop the spinner once the page has loaded and run all of the lookups triggered by the Forms URL Parameters. See Point 3. for other options.

Code to turn off the spinner:

//once the form has loaded and initial lookups have run, this section will execute
$(document).on("onloadlookupfinished", function () {
  // the following line hides the spinner. 
  $('#PDloader, .PDloading').css('display' , 'none');
});

3. Perhaps you don't have 10.1 Update 2 OR you need to run the spinner when a lookup begins on the form. In my case, I have Lookup Rules which trigger Field Rules. Populating the data can take a while, so I use a spinner for that as well.

//this is the selector for my button
$('.autofill').on('click',function() {
  //turn the spinner on.
  $('#PDloader, .PDloading').css('display' , 'block');
  //this waits 5 seconds then disables the spinner.
  setTimeout(
    function() {
      $('#PDloader, .PDloading').css('display' , 'none');
    }, 5000
  );
});
14 0
replied on May 30, 2018 Show version history

Thanks Ben! This is really cool looking and useful!

I set it up to only show when certain fields are 'looking up'. Might help someone along the way:

//when the lookup runs on TravFormNum a spinner appears while the data loads
  $('#PDloader, .PDloading').css('display' , 'none');//initially not visible

  $(document).on("lookupstarted", function (event) {
  // the following line shows the spinner.
    	if (event.triggerId == "Field263") { //on travFormNum
    	$('#PDloader, .PDloading').show();
        }
	});
  
$(document).on("lookupcomplete", function (event) {
  // the following line hides the spinner.
  		if (event.triggerId == "Field263") { //on travFormNum
	  	 $('#PDloader, .PDloading').hide();
		}
	});
  

yes

2 0
replied on May 30, 2018 Show version history

Thanks, glad it's useful.

Yep 10.2 added the lookupstarted listener. Rather than updating the page, I linked (further down on this page) to https://answers.laserfiche.com/questions/108471/Can-we-get-a-lookups-complete-custom-event-listener-please#121241  but your update is well needed by now!

 

1 0
replied on September 30, 2018

I have 3 lookups that run off the same field. But the spinner hide's after the first lookup is complete, not after all lookups are complete. Am I missing something in my code?

$(document).on('lookupstarted', function(event) {
    $('#PDloader, .PDloading').show();
}); //end lookup started ----------------------------------------------

$(document).on('lookupcomplete',function(event){
  
    //Gets # of rows in Registered Devices and puts in hidden field
    $('#q57 input').val(Number($('.flagRemove .rpx').length));
  
    //If GUID is NOT blank - mark Registered Devices as Read Only
    if(event.triggerId === $('.trigUsrNm input').attr('id')){
            if ($('#q41 input').val() != '') {
                $('.flagRemove .rpx').each(function() {
                    $(this).find($('.flagRO input')).attr('backend-readonly', true).attr('readonly', true); 
                });
                $('.flagRemove .cf-collection-delete.selectable').css('display', 'none');
                $('.flagRemove .cf-collection-append').css('display', 'none');
            }  
      
      
      $('.macMask input').change(function(){
         $('.macMask input').mask('00:00:00:00:00:00', {'translation': {0: {pattern: /[0-9a-fA-F]/}}}); 
      });
      
      $('#PDloader, .PDloading').hide();

    }//end event triggerid  ------------------------------------
 
}); //end lookupcomplete  ------------------------------------------

 

0 0
replied on October 3, 2018

Hi Cassandra,

It looks like your testing for the first lookup to finish. You could set a flag for each lookup and test for each flag to be set as completed.

-Ben

 

1 0

Replies

replied on October 25, 2016

This is great!  Thank you very much!

0 0
replied on May 4, 2018 Show version history

This works great for form save/resume.

I'm also trying to use the spinner when the form is first accessed.  There is usually 5 seconds of white screen where we want to display the spinner.  What is the best way to start the spinner prior to the $(document.ready?  The spinner displays briefly just as it finishes the "ready" and prior to the finish of "lookup"  (#2 in how to stop the spinner).

0 0
replied on May 9, 2018

@████████this is awesome. Thanks. 

Do you know of a way to show the spinner when a lookup starts and hide it again when the lookup completes?

It works great onloadlookupfinished though. 

 

Jono

0 0
replied on May 9, 2018

I believe Forms 10.2 and above has a 'lookupstarted' event that you can use to show the spinner.

1 0
replied on October 23, 2018

So I am implementing your settings to include the spinner as described.  However, weirdly enough, the spinner is not completing on "lookupcomplete".  Makes me wonder if there is some lookup on the form that is not completing?

0 0
replied on October 23, 2018

Hi @████████,

We noticed that sometimes you have to use 'lookupstarted' as the complete trigger and the 'lookupcomplete' as the start trigger. Totally backwards.

 

 

0 0
replied on May 1 Show version history

Hey there,

My coding skills are barely good enough that I can copy what others have done and make it work on my form so I'm sorry if this question is dumb. I have a custom html field on my form containing a load message that I want to appear when a lookup is being executed and to disappear when the lookup is finished. I don't need the fancy spinner... just the simple field is sufficient. My form is not utilizing a lookup based on URL parameters, just input on a particular field. I can't get it to work and I'm not sure where I'm going wrong so I was wondering if someone could take a look? Maybe I am not using the right number of equal signs or maybe missing curly bracket?

Here is my html field:

<div id="PDloader"><p style="text-align: center;"><b>Loading... Please wait.</b></p></div>

 

 

And here is my JS:

$(document).ready(function () {
  
     $('#PDloader, .loadingParcel').css('display' , 'none');
     
       $(document).on("lookupstarted", function(event) {
       if (event.triggerID == "Field177"){
         $('#PDloader, .loadingParcel').show();
       }
     });
     
     $(document).on("lookupcomplete", function(event) {
       if (event.triggerID == "Field177"){
         $('#PDloader, .loadingParcel').hide();
       }
     });
});

Any help would be appreciated!!!

0 0
replied on May 1

Hi Chelsey,

Would it be sufficient to use a Field Rule to show your Custom HTML message when the required field is blank still? It would hide the Custom HTML once the lookup is complete and populated the field.

0 0
replied on May 2

I did initially attempt it this way. The issue was that the message would show as soon as a character was typed into the lookup trigger box instead of waiting for the user to tab or click out - which is what is actually initiating the lookup. I thought it would be confusing for users to see the loading message while they were typing. They might think that the lookup is already working without tabbing or clicking out and so I was worried that they would not leave the input box which could lead to them thinking the form was broken.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.