{"type":"doc","content":[{"type":"paragraph","content":[{"text":"A custom progress bar can be added to the form to enhance the user experience and indicate the remaining steps within the form. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":744,"id":"a50ece4c-a0dd-4b4e-8d5a-c4fa60d36339","collection":"contentId-1031700495","type":"file","height":149}}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":732,"id":"fcb21fb2-57f5-44b6-abab-4b649f60165c","collection":"contentId-1031700495","type":"file","height":158}}]},{"type":"paragraph","content":[{"text":"Step 1","type":"text","marks":[{"type":"strong"}]},{"text":": Start by dragging an ‘HTML Component’ into the form builder. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 2","type":"text","marks":[{"type":"strong"}]},{"text":": Click on the Settings (gear) icon and edit the ‘HTML tag’ field from ","type":"text"},{"text":"p","type":"text","marks":[{"type":"code"}]},{"text":" to ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" in the ‘Display’ tag and change the ‘CSS Class’ to ","type":"text"},{"text":"stepper","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1008,"id":"fa0fef4f-4bf0-43e7-84b5-c26ae780628e","collection":"contentId-1031700495","type":"file","height":522}}]},{"type":"paragraph","content":[{"text":"Step 3","type":"text","marks":[{"type":"strong"}]},{"text":": Copy the following code into the ‘Content’ section (creates 4 tabs)","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n \n
1
\n \n
\n \n
2
\n \n
\n \n
3
\n \n
\n \n
4
\n \n

","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1007,"id":"2bfed798-6a82-467b-bb1f-9767c27db406","collection":"contentId-1031700495","type":"file","height":774}}]},{"type":"paragraph","content":[{"text":"Step 4","type":"text","marks":[{"type":"strong"}]},{"text":": Navigate to the ‘Logic’ tab and click on the ‘Add Logic’ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1020,"id":"5643b49e-94d3-4911-9bde-7517779f068f","collection":"contentId-1031700495","type":"file","height":271}}]},{"type":"paragraph","content":[{"text":"Step 5","type":"text","marks":[{"type":"strong"}]},{"text":": Enter ","type":"text"},{"text":"stepper","type":"text","marks":[{"type":"code"}]},{"text":" as the 'Logic Name' and select the 'Javascript' type from the 'Trigger' dropdown","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 6","type":"text","marks":[{"type":"strong"}]},{"text":": Enter the following code in the ‘TextArea’ that appears. ","type":"text"}]},{"type":"codeBlock","content":[{"text":" let cssId = 'myCss'; \nconst head = document.getElementsByTagName('head')[0];\nif (!document.getElementById(cssId))\n{\n const link = document.createElement('link');\n link.id = cssId;\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = 'https://timisenco2015.github.io/formulator.github.com/css/chefsCustomCss.css';\n link.media = 'all';\n head.appendChild(link);\n \n const script = document.createElement('script');\n script.type = 'text/javascript';\n script.src = 'https://cdn.form.io/formiojs/formio.full.min.js'; \n head.appendChild(script);\n}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1011,"id":"a5c86087-cdf3-4c77-8f25-f33fe04c9c56","collection":"contentId-1031700495","type":"file","height":819}}]},{"type":"paragraph","content":[{"text":"Step 7","type":"text","marks":[{"type":"strong"}]},{"text":": Click on ‘Save Logic’ and then ‘Save’ the component.","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 8","type":"text","marks":[{"type":"strong"}]},{"text":": Next, add a ‘Tabs’ component from the ‘Advanced Fields’ and edit the tabs based on your requirements. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 9: ","type":"text","marks":[{"type":"strong"}]},{"text":"Under the Tab settings, enter ","type":"text"},{"text":"progressStepper","type":"text","marks":[{"type":"code"}]},{"text":" in the ‘Custom CSS Class’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1019,"id":"e87d4248-02e2-4ff8-8dfd-ddc2273c20bd","collection":"contentId-1031700495","type":"file","height":755}}]},{"type":"paragraph","content":[{"text":"Step 10","type":"text","marks":[{"type":"strong"}]},{"text":": Under the ‘Logic’ tab, click on the ‘Add Logic’ button and add any ‘Logic Name’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1022,"id":"7c88167c-4d95-42eb-9929-9d0afbdde87d","collection":"contentId-1031700495","type":"file","height":273}}]},{"type":"paragraph","content":[{"text":"Step 11","type":"text","marks":[{"type":"strong"}]},{"text":": In the ‘Trigger’ section, select the ‘Event’ type from the dropdown","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 12","type":"text","marks":[{"type":"strong"}]},{"text":": Enter ","type":"text"},{"text":"change","type":"text","marks":[{"type":"code"}]},{"text":" as the ‘Event Name'","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1015,"id":"9c8d8729-f423-48ff-b649-2e0d5c5e569e","collection":"contentId-1031700495","type":"file","height":763}}]},{"type":"paragraph","content":[{"text":"Step 13","type":"text","marks":[{"type":"strong"}]},{"text":": Click on the ‘Add Action’ button, and enter any ‘Action Name’","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 14","type":"text","marks":[{"type":"strong"}]},{"text":": Select ‘Custom Action’ from the ‘Type’ dropdown","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1007,"id":"97e491bc-f10e-4c4f-9bac-037d424112b8","collection":"contentId-1031700495","type":"file","height":522}}]},{"type":"paragraph","content":[{"text":"Step 15","type":"text","marks":[{"type":"strong"}]},{"text":": Enter the following code in the ‘Custom Action (Javascript)’ field","type":"text"}]},{"type":"codeBlock","content":[{"text":"const lists = document.querySelectorAll(\".progressStepper ul li\");\nconst progressStepper = document.querySelectorAll(\".stepper ul li\");\nfor(let [index, li] of lists.entries()) {\n if (li.getAttribute(\"class\").includes('active'))\n {\n leftOfIndex(index);\n rightOfIndex(index, progressStepper.length)\n progressStepper[index].classList.remove('completed');\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.remove('disabled');\n progressStepper[index].classList.add('active');\n }\n \n }\n \n function leftOfIndex(index){\n for(let i=0; iindex; i--){\n progressStepper[i].classList.remove('completed');\n progressStepper[i].classList.remove('errors');\n progressStepper[i].classList.remove('active');\n progressStepper[i].classList.add('disabled');\n }\n \n }\n","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1006,"id":"6d8b90bd-feaa-49f5-80e0-1ab8d49afbc7","collection":"contentId-1031700495","type":"file","height":702}}]},{"type":"paragraph","content":[{"text":"Step 16","type":"text","marks":[{"type":"strong"}]},{"text":": Click on the ‘Save Logic’ and ‘Save Action’ button and ‘Save’ the component","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 17","type":"text","marks":[{"type":"strong"}]},{"text":": 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)","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 18","type":"text","marks":[{"type":"strong"}]},{"text":": Click on the Settings (gear) icon for the Next button and add the following code in the ‘Button Custom Logic’ field. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');\nconst index = tab.currentTab;\nconst progressStepper = document.querySelectorAll(\".stepper ul li\");\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.remove('disabled');\n//progressStepper[index].classList.remove('completed');\n//progressStepper[index].classList.add('errors');\nprogressStepper[index].classList.add('completed');\nprogressStepper[(index+1)].classList.add('active');\nprogressStepper[(index+1)].classList.remove('disabled');\ntab.setTab((index+1));\nwindow.scrollTo(0,0);","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 19","type":"text","marks":[{"type":"strong"}]},{"text":": Add the following code for the ‘Previous’ button","type":"text"}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');\nconst progressStepper = document.querySelectorAll(\".stepper ul li\");\nconst index = tab.currentTab;\nprogressStepper[index].classList.remove('errors');\nprogressStepper[index].classList.remove('completed');\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.add('disabled');\nprogressStepper[(index-1)].classList.add('active');\nprogressStepper[(index-1)].classList.remove('errors');\nprogressStepper[(index-1)].classList.remove('completed');\ntab.setTab((index-1));\nwindow.scrollTo(0,0);","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 20","type":"text","marks":[{"type":"strong"}]},{"text":": Save the form and preview to ensure everything is working as expected","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Troubleshooting Validation Error","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1767,"id":"3955cf93-a68e-4023-afc7-259e4ab7f8b9","collection":"contentId-1031700495","type":"file","height":227}}]},{"type":"paragraph","content":[{"text":"In case of a validation error like the image above, change the code for the ‘Next’ button to match:","type":"text"}]},{"type":"codeBlock","content":[{"text":"progressStepper[index].classList.remove('errors');\n//progressStepper[index].classList.remove('completed');\n//progressStepper[index].classList.add('errors');\nprogressStepper[index].classList.add('completed');","type":"text"}]},{"type":"paragraph","content":[{"text":"Similarly, change the ‘Previous’ button to match:","type":"text"}]},{"type":"codeBlock","content":[{"text":"progressStepper[index].classList.remove('errors');\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.add('disabled');\nprogressStepper[(index-1)].classList.add('active');\nprogressStepper[(index-1)].classList.remove('errors');","type":"text"}]},{"type":"paragraph","content":[{"text":"And change the code in Step 15 to match:","type":"text"}]},{"type":"codeBlock","content":[{"text":"const lists = document.querySelectorAll(\".progressStepper ul li\");\nconst progressStepper = document.querySelectorAll(\".stepper ul li\");\nconst hiddenComponent = util.getComponent(form.components, 'stepperHidden');\nfor(let [index, li] of lists.entries()) {\n if (li.getAttribute(\"class\").includes('active'))\n {\n leftOfIndex(index);\n rightOfIndex(index, progressStepper.length)\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.remove('disabled');\n progressStepper[index].classList.add('active');\n }\n \n }\n \n function leftOfIndex(index){\n for(let i=0; iindex; i--){\n progressStepper[i].classList.remove('errors');\n progressStepper[i].classList.remove('active');\n progressStepper[i].classList.add('disabled');\n }\n \n }","type":"text"}]}],"version":1}

Browser not supported