How to Disable Progress Indicator on a Single Page
The following custom JS can be used to hide the progress indicator on a specific page of the form.
- Create a custom JS Form Action. Form Actions are created on the form's root node, and execute when the form is first loaded.
- Use the following Custom JS to check the name of the page and hide/show the Progress Indicator based on the current page.
// This function will receive the field and form objects. function(field,form){ form.mp.eventMgr.addListener('pagechange',function(mp,newpage,oldpage){ if (newpage.name == 'Your Page Name'){ mp.navigator.pi.hide(); }else{ mp.navigator.pi.show(); } }); }
- The code above will hide the Progress Indicator on the page named "Your Page Name".
Hiding the Progress Indicator on the Start Page
If you would like to hide the Progress Indicator on the Start Page of the Form, the following code will hide it as soon as the form loads and then show it on the first page change event.
// This function will receive the field and form objects. function(field,form){ // hide on first page of form form.mp.navigator.pi.hide(); form.mp.eventMgr.addListener('pagechange',function(mp,newpage,oldpage){ p.navigator.pi.show(); }); }
Hiding the Progress Bar with CSS
When hiding the Progress Indicator on the Start Page of the Form, it may be shown briefly before being hidden. To avoid this, use Custom CSS to hide the Progress indicator initially, and use the Custom JS to show it. The CSS to hide the Progress Indicator will vary depending on the type of Progress Indicator used. You'll need to use the Inspector to get the class name of the Progress Indicator. The CSS, for example, for the SlimArrow Progress Indicator looks like this:
.tab_bar{ display:none }
0 Comments