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
  );
});
13 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
You are not allowed to follow up in this post.

Sign in to reply to this post.