{"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. More features have been added to advance the functionalities of the progress bar.","type":"text"}]},{"type":"paragraph","content":[{"text":"Features added","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ability to perform validity checks on all the components ( e.g. input component) in each tab component","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ability to indicate error colour in case the validity checks fail","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"each progress bar step has a title that corresponds with the title of each tab of the tab component","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Type A: Progress Bar with TabComponent","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This Progress Bar is designed to work with TabComponent, and with the Next and Previous Button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":887,"id":"3f853742-701f-4c60-a714-4a63c8e3ec36","collection":"contentId-1040744453","type":"file","height":473}},{"type":"caption","content":[{"text":"Figure A","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Type B: Progress Bar with any Layout Component","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This Progress Bar is designed to work with any layout component and with the Next and Previous Button","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"How does it work","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"Its functionality has been developed almost similarly to Formio Wizard. You switch between each layout using the Previous and Next buttons. It uses the hide attribute of each layout by setting it to true or false and using the triggerRedraw function to redraw the component to the screen.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":933,"id":"d2869d1d-342c-4808-af88-401aa231b0f6","collection":"contentId-1040744453","type":"file","height":352}},{"type":"caption","content":[{"text":"Figure B","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Demo: ","type":"text","marks":[{"type":"strong"}]},{"type":"inlineCard","attrs":{"url":"https://submit.digital.gov.bc.ca/app/form/submit?f=539e778b-de05-4e49-b3f7-c8da16567dd1"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Set Up","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"Type A","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":2}}],"content":[{"text":"Step 1: ","type":"text","marks":[{"type":"strong"}]},{"text":"Start by dragging an ‘HTML Component’ into the form builder.","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":2}}],"content":[{"text":"Step2: ","type":"text","marks":[{"type":"strong"}]},{"text":"change 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":", and in the ‘Display’ tag enter a unique and custom class name in the ‘CSS Class. In this screenshot, we used “healthStepper”","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":985,"id":"1aea73ef-5907-413f-a3ee-5e83e612a297","collection":"contentId-1040744453","type":"file","height":487}},{"type":"caption","content":[{"text":"Figure A1","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 3: ","type":"text","marks":[{"type":"strong"}]},{"text":"Copy the following code into the ‘Content’ section","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n
Step 1
\n
Facility Information
\n
\n
Step 2
\n
Bed Occupancy
\n
\n
Step 3
\n
Staffing Level
\n
\n
Step 4
\n
Operating Level
\n

","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":956,"id":"c8f2bfdb-b6d4-4310-ac07-90e2a3031504","collection":"contentId-1040744453","type":"file","height":487}},{"type":"caption","content":[{"text":"Figure A2","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 4: ","type":"text","marks":[{"type":"strong"}]},{"text":"Click on the ‘Logic’ tab and click on the ‘Add Logic’ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":928,"id":"3d029bf0-ffba-4c74-8225-ef29122670ef","collection":"contentId-1040744453","type":"file","height":331}},{"type":"caption","content":[{"text":"Figure A3","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 5: Logic Name: ","type":"text","marks":[{"type":"strong"}]},{"text":"enter any name","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":772,"id":"64099465-1676-4670-b65e-f5c82a468fc9","collection":"contentId-1040744453","type":"file","height":370}},{"type":"caption","content":[{"text":"Figure A4","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 6: ","type":"text","marks":[{"type":"strong"}]},{"text":"In ‘Trigger' section, click on ‘Type’ dropdown menu, and select 'Javascript’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":663,"id":"b93df57b-4012-4007-b367-7e1d32fba43a","collection":"contentId-1040744453","type":"file","height":286}},{"type":"caption","content":[{"text":"Figure A5","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 7:","type":"text","marks":[{"type":"strong"}]},{"text":" Click “Add Action“ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":616,"id":"ef9b82d1-6964-4aac-bebb-d8f80b109d85","collection":"contentId-1040744453","type":"file","height":321}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Step 8: ","type":"text","marks":[{"type":"strong"}]},{"text":"Enter any name in “Action Name“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":805,"id":"b480cf8a-33ad-42ac-8374-62d4e1ea8b38","collection":"contentId-1040744453","type":"file","height":301}},{"type":"caption","content":[{"text":"Figure A6","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 9: ","type":"text","marks":[{"type":"strong"}]},{"text":"In ‘Trigger' section, click on ‘Type’ dropdown menu, and select 'Javascript’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":682,"id":"8ae49907-3bfd-4be7-91d5-5e479b912bca","collection":"contentId-1040744453","type":"file","height":304}},{"type":"caption","content":[{"text":"Figure A7","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 10: ","type":"text","marks":[{"type":"strong"}]},{"text":"Copy the following code into the ‘Text Area’ section","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/chefsCustom.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","width":100.0},"content":[{"type":"media","attrs":{"width":736,"id":"8d76f665-c75a-40fa-ad2e-85b6d0f363c5","collection":"contentId-1040744453","type":"file","height":322}},{"type":"caption","content":[{"text":"Figure A8","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 11","type":"text","marks":[{"type":"strong"}]},{"text":": Click on ‘Save Logic’ and then ‘Save’ the component.","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 12","type":"text","marks":[{"type":"strong"}]},{"text":": Next, add a ‘Tabs’ component from the ‘Advanced Fields’ into the builder","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 13:","type":"text","marks":[{"type":"strong"}]},{"text":" enter a unique name in the label field. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":733,"id":"9fe106ed-698b-4562-b354-f9b09f4e6657","collection":"contentId-1040744453","type":"file","height":223}},{"type":"caption","content":[{"text":"Figure A9","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 14:","type":"text","marks":[{"type":"strong"}]},{"text":" Add as many tabs as you want and details for each tab added","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":724,"id":"0f401a0e-6bea-4e7b-8d49-e984b87fd278","collection":"contentId-1040744453","type":"file","height":305}},{"type":"caption","content":[{"text":"Figure A10","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 15: ","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","width":100.0},"content":[{"type":"media","attrs":{"width":712,"id":"3aad7bc5-1bbc-42f5-873b-d82c905f52a9","collection":"contentId-1040744453","type":"file","height":220}},{"type":"caption","content":[{"text":"Figure A11","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 16: ","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"I) Under 'Logic Name': enter any name","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"II) Under ‘Trigger', select ‘Type’ dropdown menu, and select 'Event’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":837,"id":"37010e0f-87fd-4014-bf1c-bcd642731d88","collection":"contentId-1040744453","type":"file","height":475}},{"type":"caption","content":[{"text":"Figure A12","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 17: ","type":"text","marks":[{"type":"strong"}]},{"text":"enter “change“ in the “Event Name“ field and click on “Add Action“ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":651,"id":"67cd34bf-e520-4351-a43b-56eb2031d13e","collection":"contentId-1040744453","type":"file","height":238}},{"type":"caption","content":[{"text":"Figure A13","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 18: ","type":"text","marks":[{"type":"strong"}]},{"text":"Click on the “Add Action“ Button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":627,"id":"09e035c7-b9fb-4164-81c7-a10bb6b6698d","collection":"contentId-1040744453","type":"file","height":182}},{"type":"caption","content":[{"text":"Figure A14","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 19: ","type":"text","marks":[{"type":"strong"}]},{"text":"enter any name in the “Action Name“ field, select the “Type“ dropdown menu, and select the “Custom Action“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":906,"id":"5424b3d9-c784-4572-93dc-163bd45781f7","collection":"contentId-1040744453","type":"file","height":346}},{"type":"caption","content":[{"text":"Figure A15","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 20","type":"text","marks":[{"type":"strong"}]},{"text":": paste lines of codes into the “Custom Action(Javascript)“ field","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":811,"id":"abb64f5c-bc3d-4dd8-bab6-b77224d67d07","collection":"contentId-1040744453","type":"file","height":244}},{"type":"caption","content":[{"text":"Figure A16","type":"text"}]}]},{"type":"codeBlock","content":[{"text":"const { root} = instance;\nroot.setPristine(false);\n\nconst comp = root ? root.getComponent('data') : null;\nconst index = comp.currentTab;\n\nconst progressStepper = document.querySelectorAll(\".healthStepper ol li\");\nleftOfIndex(index);\n\nrightOfIndex(index, progressStepper.length)\nprogressStepper[index].classList.remove('errors');\nprogressStepper[index].classList.remove('disabled');\nprogressStepper[index].classList.add('active');\nprogressStepper[index].classList.remove('completed');\n\n\nfunction 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\nfunction validateFacilityInformationTabComponents() {\n const firstNameComp = root.getComponent('firstName');\n const lastNameComp = root.getComponent('lastName');\n let isAllFieldValue = true;\n isAllFieldValue = firstNameComp.checkValidity();\n isAllFieldValue = lastNameComp.checkValidity();\n return isAllFieldValue;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Note","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"change the ‘data' in the ","type":"text"},{"text":"root.getComponent('data')","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “label” field of the TabComponent in Figure A9","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"const comp = root ? root.getComponent('data') : null;","type":"text"}]},{"type":"paragraph","content":[{"text":"2. change the 'healthStepper' in the ","type":"text"},{"text":"document.querySelectorAll(\".healthStepper ol li\")","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “CSS Class“ field in Figure A1","type":"text"}]},{"type":"codeBlock","content":[{"text":"const progressStepper = document.querySelectorAll(\".healthStepper ol li\");","type":"text"}]},{"type":"paragraph","content":[{"text":" 3. in this demo, we are only validating two input components in the first tab of the TabComponent which is why this line of code if the index is equal to zero","type":"text"}]},{"type":"codeBlock","content":[{"text":"if(i===0) {","type":"text"}]},{"type":"paragraph","content":[{"text":"3. the lines of codes below read the two input components in the first tab of the TabComponent and execute a validity check on them. See figure 1 for reference","type":"text"}]},{"type":"codeBlock","content":[{"text":"function validateFacilityInformationTabComponents() {\n const firstNameComp = root.getComponent('firstName');\n const lastNameComp = root.getComponent('lastName');\n let isAllFieldValue = true;\n isAllFieldValue = firstNameComp.checkValidity();\n isAllFieldValue = lastNameComp.checkValidity();\n return isAllFieldValue;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 21","type":"text","marks":[{"type":"strong"}]},{"text":": “","type":"text"},{"text":"Next Button","type":"text","marks":[{"type":"strong"}]},{"text":"“. Drag the button component to the builder, and change the label to “Next“. Under “Action“, click the dropdown and change select “Custom“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1006,"id":"899ffba0-a329-4f52-a789-a8fbe9744159","collection":"contentId-1040744453","type":"file","height":508}},{"type":"caption","content":[{"text":"Figure A17","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 22: ","type":"text","marks":[{"type":"strong"}]},{"text":"copy and paste the lines of codes into “Button Custom Logic“ field","type":"text"}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');\nform.setPristine(false);\nconst index = tab.currentTab;\nconst progressStepper = document.querySelectorAll(\".healthStepper ol li\");\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.remove('disabled');\n\nif(index===0) {\n if(!validateFacilityInformationTabComponents()) {\n progressStepper[index].classList.remove('completed');\n progressStepper[index].classList.add('errors');\n } else {\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.add('completed');\n }\n}\n\nprogressStepper[(index+1)].classList.add('active');\nprogressStepper[(index+1)].classList.remove('disabled');\nprogressStepper[(index+1)].classList.remove('errors');\nprogressStepper[(index+1)].classList.remove('completed');\ntab.setTab((index+1)); \n\n\nfunction validateFacilityInformationTabComponents() {\n const firstNameComp = form.getComponent('firstName');\n const lastNameComp = form.getComponent('lastName');\n let isAllFieldValue = true;\n isAllFieldValue = firstNameComp.checkValidity();\n isAllFieldValue = lastNameComp.checkValidity();\n return isAllFieldValue;\n}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":989,"id":"a14e26a1-5b47-4d98-b43c-293be74650c8","collection":"contentId-1040744453","type":"file","height":263}},{"type":"caption","content":[{"text":"Figure A18","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Note","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"change the ‘data' in the ","type":"text"},{"text":"form.getComponent('data')","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “label” field of the TabComponent in Figure A9 ","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');","type":"text"}]},{"type":"paragraph","content":[{"text":"2. change the 'healthStepper' in the ","type":"text"},{"text":"document.querySelectorAll(\".healthStepper ol li\")","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “CSS Class“ field in Figure A1","type":"text"}]},{"type":"paragraph","content":[{"text":"const progressStepper = document.querySelectorAll(\".healthStepper ol li\");","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Step 23","type":"text","marks":[{"type":"strong"}]},{"text":": “","type":"text"},{"text":"Previous Button","type":"text","marks":[{"type":"strong"}]},{"text":"“. Drag the button component to the builder, and change the label to “Previous“. Under “Action“, click the dropdown and change select “Custom“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1063,"id":"fd7a5179-665a-4632-a0c1-ad337496f760","collection":"contentId-1040744453","type":"file","height":487}},{"type":"caption","content":[{"text":"Figure A19","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 24: ","type":"text","marks":[{"type":"strong"}]},{"text":"copy and paste the lines of codes into “Button Custom Logic“ field","type":"text"}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');\nconst progressStepper = document.querySelectorAll(\".healthStepper ol 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));\n","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":901,"id":"121ad7d5-f97a-4ffc-acf9-a6f14237dc3a","collection":"contentId-1040744453","type":"file","height":432}},{"type":"caption","content":[{"text":"Figure 22","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Note","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"change the ‘data' in the ","type":"text"},{"text":"form.getComponent('data')","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “label” field of the TabComponent in Figure A9","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"const tab = form.getComponent('data');","type":"text"}]},{"type":"paragraph","content":[{"text":"2. change the 'healthStepper' in the ","type":"text"}]},{"type":"paragraph","content":[{"text":"document.querySelectorAll(\".healthStepper ol li\")","type":"text","marks":[{"type":"code"}]},{"text":" to the name you enter in the “CSS Class“ field in Figure A1","type":"text"}]},{"type":"paragraph","content":[{"text":"const progressStepper = document.querySelectorAll(\".healthStepper ol li\");","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Type B: Progress Bar with Any Layout Component.","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This Progress Bar is designed to work with TabComponent, and with the Next and Previous Button","type":"text"}]},{"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":"Step2: ","type":"text","marks":[{"type":"strong"}]},{"text":"change 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":", and in the ‘Display’ tag enter a unique and custom class name in the ‘CSS Class. In this screenshot, we used “healthStepper”","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":883,"id":"c8f2bfdb-b6d4-4310-ac07-90e2a3031504","collection":"contentId-1040744453","type":"file","height":460}},{"type":"caption","content":[{"text":"Figure 1","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 3: ","type":"text","marks":[{"type":"strong"}]},{"text":"Copy the following code into the ‘Content’ section","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n
Step 1
\n
Facility Information
\n
\n
Step 2
\n
Bed Occupancy
\n
\n
Step 3
\n
Staffing Level
\n
\n
Step 4
\n
Operating Level
\n

","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1030,"id":"4c603c44-218f-4400-b555-0b091e46b574","collection":"contentId-1040744453","type":"file","height":442}},{"type":"caption","content":[{"text":"Figure 2","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 4: ","type":"text","marks":[{"type":"strong"}]},{"text":"Click on the ‘Logic’ tab and click on the ‘Add Logic’ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":928,"id":"3d029bf0-ffba-4c74-8225-ef29122670ef","collection":"contentId-1040744453","type":"file","height":331}},{"type":"caption","content":[{"text":"Figure 3","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 5: Logic Name: ","type":"text","marks":[{"type":"strong"}]},{"text":"enter any name","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":772,"id":"64099465-1676-4670-b65e-f5c82a468fc9","collection":"contentId-1040744453","type":"file","height":370}},{"type":"caption","content":[{"text":"Figure 4","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 6: ","type":"text","marks":[{"type":"strong"}]},{"text":"In ‘Trigger' section, click on ‘Type’ dropdown menu, and select 'Javascript’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":629,"id":"ed49c74d-4775-4b83-bc4c-7368006d3b38","collection":"contentId-1040744453","type":"file","height":418}},{"type":"caption","content":[{"text":"Figure 5","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 7:","type":"text","marks":[{"type":"strong"}]},{"text":" Click “Add Action“ button","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":616,"id":"ef9b82d1-6964-4aac-bebb-d8f80b109d85","collection":"contentId-1040744453","type":"file","height":321}},{"type":"caption","content":[{"text":"Figure 6","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 8: ","type":"text","marks":[{"type":"strong"}]},{"text":"Enter any name in “Action Name“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":805,"id":"b480cf8a-33ad-42ac-8374-62d4e1ea8b38","collection":"contentId-1040744453","type":"file","height":301}},{"type":"caption","content":[{"text":"Figure 7","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 9: ","type":"text","marks":[{"type":"strong"}]},{"text":"In ‘Trigger' section, click on ‘Type’ dropdown menu, and select 'Javascript’","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":682,"id":"8ae49907-3bfd-4be7-91d5-5e479b912bca","collection":"contentId-1040744453","type":"file","height":304}},{"type":"caption","content":[{"text":"Figure 8","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 10: ","type":"text","marks":[{"type":"strong"}]},{"text":"Copy the following code into the ‘Text Area’ section","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/chefsCustom.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","width":100.0},"content":[{"type":"media","attrs":{"width":736,"id":"8d76f665-c75a-40fa-ad2e-85b6d0f363c5","collection":"contentId-1040744453","type":"file","height":322}},{"type":"caption","content":[{"text":"Figure 9","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 11","type":"text","marks":[{"type":"strong"}]},{"text":": Click on ‘Save Logic’ and then ‘Save’ the component.","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 12","type":"text","marks":[{"type":"strong"}]},{"text":": Next, add a ‘Tabs’ component from the ‘Advanced Fields’ into the builder","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 13","type":"text","marks":[{"type":"strong"}]},{"text":": “","type":"text"},{"text":"Previous Button","type":"text","marks":[{"type":"strong"}]},{"text":"“. Drag the button component to the builder, and change the label to “Previous“. Under “Action“, click the dropdown and change select “Custom“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1063,"id":"fd7a5179-665a-4632-a0c1-ad337496f760","collection":"contentId-1040744453","type":"file","height":487}},{"type":"caption","content":[{"text":"Figure 10","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 14: ","type":"text","marks":[{"type":"strong"}]},{"text":"copy and paste the lines of codes into “Button Custom Logic“ field","type":"text"}]},{"type":"codeBlock","content":[{"text":"const componentList = [\"facilityInformationPanel\", \"bedOccupancyPanel\",\"staffingLevelPanel\",\n\"operatingLevelPanel\"];\n\nconst stepperssHiddenValue = form.getComponent('stepperssHiddenValue');\nconst index = parseInt(stepperssHiddenValue.getValue());\n\nconst progressStepper = document.querySelectorAll(\".multiComponentStepper ol li\");\n\nprogressStepper[index].classList.remove('completed');\nprogressStepper[index].classList.remove('errors');\nif(index===0){\n const currentComponent =form.getComponent(componentList[index]);\n currentComponent.hidden=false;\n currentComponent.component.hidden=false;\n currentComponent.triggerRedraw();\n progressClassName(index);\n \n}else if (index>0){\n const currentComponent =form.getComponent(componentList[index]);\n currentComponent.hidden=true;\n currentComponent.component.hidden=true;\n currentComponent.triggerRedraw();\n \n const previousComponent =form.getComponent(componentList[(index-1)]);\n previousComponent.hidden=false;\n previousComponent.component.hidden=false;\n previousComponent.triggerRedraw();\n progressStepper[index].classList.add('disabled');\n progressStepper[index].classList.remove('active');\n progressStepper[index].classList.remove('completed');\n progressStepper[index].classList.remove('erros');\n if((index-1)===0){\n progressClassName((index-1));\n } else{\n progressClassName(index);\n }\n \n \n stepperssHiddenValue.setValue((index-1));\n}\n\nfunction progressClassName(index){\n if(index===0) {\n progressStepper[index].classList.add('active');\n progressStepper[index].classList.remove('disabled');\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.remove('completed');\n } else {\n progressStepper[(index-1)].classList.add('active');\n progressStepper[(index-1)].classList.remove('disabled');\n progressStepper[(index-1)].classList.remove('completed');\n progressStepper[(index-1)].classList.remove('erros');\n}\n}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":961,"id":"64099465-1676-4670-b65e-f5c82a468fc9","collection":"contentId-1040744453","type":"file","height":428}},{"type":"caption","content":[{"text":"Figure 11","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Step 15","type":"text","marks":[{"type":"strong"}]},{"text":": “","type":"text"},{"text":"Next Button","type":"text","marks":[{"type":"strong"}]},{"text":"“. Drag the button component to the builder, and change the label to “Next“. Under “Action“, click the dropdown and change select “Custom“","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1006,"id":"899ffba0-a329-4f52-a789-a8fbe9744159","collection":"contentId-1040744453","type":"file","height":508}},{"type":"caption","content":[{"text":"Figure 12","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Step 16: ","type":"text","marks":[{"type":"strong"}]},{"text":"copy and paste the lines of codes into “Button Custom Logic“ field","type":"text"}]},{"type":"codeBlock","content":[{"text":"const componentList = [\"facilityInformationPanel\", \"bedOccupancyPanel\",\"staffingLevelPanel\",\n\"operatingLevelPanel\"];\nconst stepperssHiddenValue = form.getComponent('stepperssHiddenValue');\nconst index = parseInt(stepperssHiddenValue.getValue());\n\nconst progressStepper = document.querySelectorAll(\".multiComponentStepper ol li\");\n\n\nif(index<(parseInt(progressStepper.length)-1)){\n progressStepper[index].classList.remove('active');\n progressStepper[index].classList.remove('disabled');\n if(index===0) {\n if(!validateFacilityInformationTabComponents()) {\n progressStepper[index].classList.remove('completed');\n progressStepper[index].classList.add('errors');\n } else {\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.add('completed');\n }\n } else {\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.add('completed');\n }\n\n const currentComponent =form.getComponent(componentList[(index)]);\n currentComponent[\"hidden\"] = true;\n currentComponent.component[\"hidden\"]=true;\n \n const nextComponent =form.getComponent(componentList[(index+1)]);\n nextComponent.hidden=false;\n nextComponent.component.hidden=false;\n nextComponent.triggerRedraw();\n progressStepper[(index+1)].classList.add('active');\n progressStepper[(index+1)].classList.remove('disabled');\n stepperssHiddenValue.setValue((index+1))\n} else if(index===(parseInt(progressStepper.length)-1)){\n progressStepper[index].classList.remove('active');\n progressStepper[index].classList.remove('errors');\n progressStepper[index].classList.remove('disabled');\n progressStepper[index].classList.add('completed');\n}\n\n\nfunction validateFacilityInformationTabComponents() {\n const firstNameComp = form.getComponent('firstName1');\n const lastNameComp = form.getComponent('lastName1');\n let isAllFieldValue = true;\n isAllFieldValue = firstNameComp.checkValidity();\n isAllFieldValue = lastNameComp.checkValidity();\n return isAllFieldValue;\n}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":841,"id":"3d029bf0-ffba-4c74-8225-ef29122670ef","collection":"contentId-1040744453","type":"file","height":400}},{"type":"caption","content":[{"text":"Figure 13","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Note: ","type":"text","marks":[{"type":"strong"}]},{"text":"replace this array with an array of layout components you want to hide and show using the “Previous“ and “Next“ button.","type":"text"}]},{"type":"codeBlock","content":[{"text":"const componentList = [\"facilityInformationPanel\", \"bedOccupancyPanel\",\"staffingLevelPanel\",\n\"operatingLevelPanel\"];","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported