...
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 17: To add the functionality to navigate the tabs with buttons while updating the progress bar, start by adding two ‘Button’ components onto the form. (Next/Previous)
Step 18: Click on the Settings (gear) icon for the Next button and add the following code in the ‘Button Custom Logic’ field.
| Code Block |
|---|
const tab = form.getComponent('data');
const index = tab.currentTab;
const progressStepper = document.querySelectorAll(".stepper ul li");
progressStepper[index].classList.remove('active');
progressStepper[index].classList.remove('disabled');
//progressStepper[index].classList.remove('completed');
//progressStepper[index].classList.add('errors');
progressStepper[index].classList.add('completed');
progressStepper[(index+1)].classList.add('active');
progressStepper[(index+1)].classList.remove('disabled');
tab.setTab((index+1));
window.scrollTo(0,0); |
Step 19: Add the following code for the ‘Previous’ button
| Code Block |
|---|
const tab = form.getComponent('data');
const progressStepper = document.querySelectorAll(".stepper ul li");
const index = tab.currentTab;
progressStepper[index].classList.remove('errors');
progressStepper[index].classList.remove('completed');
progressStepper[index].classList.remove('active');
progressStepper[index].classList.add('disabled');
progressStepper[(index-1)].classList.add('active');
progressStepper[(index-1)].classList.remove('errors');
progressStepper[(index-1)].classList.remove('completed');
tab.setTab((index-1));
window.scrollTo(0,0); |
Step 20: Save the form and preview to ensure everything is working as expected
...