A custom progress bar can be added to the form to enhance the user experience and indicate the remaining steps within the form.
...
Step 1: Start by dragging an ‘HTML Component’ into the form builder.
Step 2: Click on the Settings (gear) icon and edit the ‘HTML tag’ field from p to div in the ‘Display’ tag and change the ‘CSS Class’ to stepper
...
Step 3: Copy the following code into the ‘Content’ section (creates 4 tabs)
| Code Block |
|---|
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a class="persistant-disabled" href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 21"> <div <div class="round-tab"><span>1</span></div> </a> </li> <li role="presentation" class="disabled"> <a class="persistant-disabled" href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2"> <div class="round-tab"><span>2</span></div> </a> </li> <li role="presentation" class="disabled"> <a class="persistant-disabled" href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Step 3"> <div class="round-tab"><span>3</span></div> </a> </li> <li role="presentation" class="disabled"> <a class="persistant-disabled" href="#stepper-step-43" data-toggle="tab" aria-controls="stepper-step-43" role="tab" title="CompleteStep 4"> <div class="round-tab"><span>4</span></div> </a> </li> </ul> |
...
Step 4: Navigate to the ‘Logic’ tab and click on the ‘Add Logic’ button
...
Step 5: Enter any ‘Logic Name’ stepper as the 'Logic Name' and select the ‘Javascript’ 'Javascript' type from the ‘Trigger’ 'Trigger' dropdown
Step 6: Enter the following code in the ‘TextArea’ that appears.
| Code Block |
|---|
let cssId = 'myCss';
const head = document.getElementsByTagName('head')[0];
if (!document.getElementById(cssId))
{
const link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://timisenco2015.github.io/formulator.github.com/css/chefsCustomCss.css';
link.media = 'all';
head.appendChild(link);
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.form.io/formiojs/formio.full.min.js';
head.appendChild(script);
} |
...
Step 7: Click on ‘Save Logic’ and then ‘Save’ the component.
...
Step 9: Under the Tab settings, enter progressStepper in the ‘Custom CSS Class’
...
Step 10: Under the ‘Logic’ tab, click on the ‘Add Logic’ button and add any ‘Logic Name’
...
Step 11: In the ‘Trigger’ section, select the ‘Event’ type from the dropdown
Step 12: Enter change as the ‘Event Name'
...
Step 13: Click on the ‘Add Action’ button, and enter any ‘Action Name’
Step 14: Select ‘Custom Action’ from the ‘Type’ dropdown
...
Step 15: Enter the following code in the ‘Custom Action (Javascript)’ field
| Code Block |
|---|
const lists = document.querySelectorAll(".progressStepper ul li");
const progressStepper = document.querySelectorAll(".stepper ul li");
for(let [index, li] of lists.entries()) {
if (li.getAttribute("class").includes('active'))
{
leftOfIndex(index);
rightOfIndex(index, progressStepper.length)
progressStepper[index].classList.remove('completed');
progressStepper[index].classList.remove('errors');
progressStepper[index].classList.remove('disabled');
progressStepper[index].classList.add('active');
}
}
function leftOfIndex(index){
for(let i=0; i<index; i++) {
progressStepper[i].classList.remove('active');
progressStepper[i].classList.remove('disabled');
progressStepper[i].classList.add('completed');
}
}
function rightOfIndex(index, endIndex){
for (let i=(endIndex-1); i>index; i--){
progressStepper[i].classList.remove('completed');
progressStepper[i].classList.remove('errors');
progressStepper[i].classList.remove('active');
progressStepper[i].classList.add('disabled');
}
}
|
...
Step 16: Click on the ‘Save Logic’ and ‘Save Action’ button and ‘Save’ the component
...
Step 20: Save the form and preview to ensure everything is working as expected
...
...