Create a dynamic form interface with configurable sections using jQuery.

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/js/loto.integration.component.js"></script>
<link href="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/css/loto.integration.component.css" rel="stylesheet">

CSS

html{
  height: 100%;
}
body{
  font-family: helvetica;
  height: 100%;
  margin: 0px;
}

.form-settings-interface{
  position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(53 109 176 / 80%);
    z-index: 999;
    display: block;
}
.form-settings-interface>div{
  position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    padding: 10px;
    background-color: #fff;
    margin-top: 39px;
}
.form-settings-interface>div>h1{
  background-color: #ffffff;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    padding: 4px;
    height: 30px;
    color: #356db0;
    font-size: 21px;
    line-height: 30px;
    margin: 0px;
    padding-left: 20px;
    border-bottom: solid 1px #bad9fe;
    font-weight: normal;
}
.form-settings-interface>div>h1>button.close-button{
  background-color: #356db0;
    color: #fff;
    border: none;
    width: 32px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    position: absolute;
    right: 10px;
    top: 6px;
}
.form-settings-interface>div>ul{
  float: left;
  width: 200px;
  margin:0px;
  padding: 0px;
  list-style: none;
  margin-left: 10px;
  margin-right: 2px;
  margin-top: 10px;
}
.form-settings-interface>div>ul>li{
  background-color: #f5f6f8;
  min-height: 46px;
  border: solid 1px #d4dae0;
  padding: 15px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.form-settings-interface>div>ul>li:hover{
  background-color: #fff;
}
.form-settings-interface>div>ul>li.active{
  box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.3);
}
.form-settings-interface>div>ul>li.active>img{
  filter: none;
}
.form-settings-interface>div>ul>li>img{
  float: left;
  width: 36px;
  height: 36px;
  cursor: pointer;
  filter: grayscale(1) opacity(0.7);
}
.form-settings-interface>div>ul>li>label{
  float:...

JavaScript

class FormSettings {

  constructor (parentElement,formSettings,activeIndex) {

    this.parentElement = parentElement;
    this.formSettings = formSettings;
    this.activeIndex = activeIndex;
    this.ui;

    this.build();

  }

  infoLink(type){

    let message = '';

    switch(type){

      case "clone-and-archive":
      message = '<strong>Clone Form and Archive This Version (Create New Version)</strong><br>Press this button if you want to create a new version of this form but want to keep the existing form records submitted to Vault.  This button will automatically archive the current version of this form and automatically open a clone which you may edit and modify into a new version.  This process will keep all form records completed using the current version of the form that are stored in Vault.  You can verify if there are records in Vault for this form by referring to the “Records in Vault” number listed above in this control panel.';
      break;

      case "reedit":
      message = '<strong>Re-Edit this Form (Clear Records and Re-Edit)</strong><br>Press this button if you WANT TO EDIT THIS FORM AGAIN AND DELETE / REMOVE ALL COMPLETED FORM RECORDS SAVED IN VAULT.  Using this process will remove all saved records for this version of the form!';
      break;

      case "archive":
      message = '<strong>Archive this Form (Deactivate Form)</strong><br>Press this button if you want to retire, lock, or make this form unusable, but not delete it or remove it from Docu-Bin.  COMPLETED FORM RECORDS WILL REMAIN AND BE MARKED AS FROM AN ARCHIVED FORM VERSION SAVED IN VAULT.';
      break;

      case "clone":
      message = '<strong>Clone this Form (Create Copy)</strong><br>Press this button if you want to create A COPY OF THIS FORM which you can edit or modify into an alternate version of the same form or use as the basis for a new form.  The completed Vault records for the form you cloned will not be impacted.';
     ...