{"display":"form","type":"form","components":[{"id":"ej5ckq","key":"simplecontent","html":"","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"e62z4w","key":"html2","tag":"div","tags":[],"type":"htmlelement","attrs":[{"attr":"","value":""}],"input":false,"label":"HTML","logic":[{"name":"stepper","actions":[],"trigger":{"type":"javascript","javascript":"let cssId = 'myCssA'; \r\nconst head  = document.getElementsByTagName('head')[0];\r\nif (!document.getElementById(cssId))\r\n{\r\n    const link  = document.createElement('link');\r\n    link.id   = cssId;\r\n    link.rel  = 'stylesheet';\r\n    link.type = 'text/css';\r\n    link.href = 'https://timisenco2015.github.io/formulator.github.com/css/multiComponentStepper.css';\r\n    link.media = 'all';\r\n    head.appendChild(link);\r\n    \r\n    const script = document.createElement('script');\r\n    script.type = 'text/javascript';\r\n    script.src = 'https://cdn.form.io/formiojs/formio.full.min.js';    \r\n    head.appendChild(script);\r\n}"}}],"addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"content":"<ol class=\"c-stepper\">\r\n    <li class=\"c-stepper__item active\">\r\n        <h3 class=\"c-stepper__title\">Step 1</h3>\r\n        <p class=\"c-stepper__desc\">Facility Information</p>\r\n    </li>\r\n    <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 2</h3>\r\n        <p class=\"c-stepper__desc\">Bed Occupancy</p>\r\n    </li>\r\n     <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 3</h3>\r\n        <p class=\"c-stepper__desc\">Staffing Level</p>\r\n    </li>\r\n     <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 4</h3>\r\n        <p class=\"c-stepper__desc\">Operating Level</p>\r\n    </li>\r\n    <!-- Other steps -->\r\n</ol>","dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"className":"multiComponentStepper","encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"refreshOnChange":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"ewyh1e","key":"facilityInformationPanel","tags":[],"tree":false,"type":"panel","input":false,"label":"Panel","logic":[],"theme":"default","title":"A","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[{"id":"ecurif","key":"firstName1","case":"","mask":false,"tags":[],"type":"textfield","input":true,"label":"First Name:","logic":[],"addons":[],"errors":"","hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"json":"","custom":"","unique":false,"pattern":"","maxWords":"","minWords":"","multiple":false,"required":true,"maxLength":"","minLength":"","customMessage":"","customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputMask":"","inputType":"text","modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","labelWidth":"","persistent":true,"properties":{},"spellcheck":true,"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","displayMask":"","inputFormat":"plain","labelMargin":"","placeholder":"","autocomplete":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false,"truncateMultipleSpaces":false},{"id":"ejh6ja","key":"lastName1","mask":false,"type":"textfield","input":true,"label":"Last Name:","addons":[],"hidden":false,"prefix":"","suffix":"","unique":true,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"pattern":"","multiple":false,"required":true,"maxLength":18,"minLength":4,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputMask":"","inputType":"text","modalEdit":false,"protected":false,"refreshOn":"","tableView":true,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"spellcheck":true,"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","displayMask":"","inputFormat":"plain","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false,"truncateMultipleSpaces":false}],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"el4bx5n","key":"bedOccupancyPanel","tags":[],"tree":false,"type":"panel","input":false,"label":"Panel","logic":[],"theme":"default","title":"B","addons":[],"hidden":true,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"erzwapp","key":"staffingLevelPanel","tags":[],"tree":false,"type":"panel","input":false,"label":"Panel","logic":[],"theme":"default","title":"C","addons":[],"hidden":true,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"em2gisw","key":"operatingLevelPanel","tags":[],"tree":false,"type":"panel","input":false,"label":"Panel","logic":[],"theme":"default","title":"D","addons":[],"hidden":true,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"edr4hei","key":"stepperssHiddenValue","tags":[],"type":"hidden","input":true,"label":"Stepperss Hidden Value","logic":[],"addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"inputType":"hidden","modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":"0","dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"e15debk","key":"columns2","tree":false,"type":"columns","input":false,"label":"Columns","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"columns":[{"pull":5,"push":"","size":"md","width":2,"offset":0,"components":[{"id":"ef1tulb","key":"previous2","size":"md","tags":[],"type":"button","block":false,"input":true,"label":"Previous","logic":[],"theme":"primary","action":"custom","addons":[],"custom":"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}","hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"leftIcon":"","multiple":false,"redrawOn":"","shortcut":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","rightIcon":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":true,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"showValidations":false,"disableOnInvalid":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"currentWidth":2},{"pull":5,"push":"","size":"md","width":2,"offset":0,"components":[{"id":"ehwee3w","key":"next2","size":"md","tags":[],"type":"button","block":false,"input":true,"label":"Next","logic":[],"theme":"primary","action":"custom","addons":[],"custom":"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}","hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"leftIcon":"","multiple":false,"redrawOn":"","shortcut":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","rightIcon":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":true,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"showValidations":false,"disableOnInvalid":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"currentWidth":2}],"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"autoAdjust":true,"errorLabel":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]}