JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="container">
  <p>
    Here, I've added a select component with a custom default value that fetches from local storage and a change event handler that sets to local storage.
  </p>
  <div id="formio"></div>
  <button id="changeButton" class="btn btn-primary">
    Reorder
  </button>
</div>

JavaScript

const formDefinition = {
  "_id": "645fec1bd686a8ee39419f3a",
  "title": "Cascading Select Dropdown with Static Values",
  "name": "cascadingSelectDropdownWithStaticValues",
  "path": "cascadingselectdropdownwithstaticvalues",
  "type": "pdf",
  "display": "form",
  "tags": [],
  "components": [{
      "label": "Make",
      "widget": "choicesjs",
      "tableView": true,
      "data": {
        "values": [{
            "label": "Toyota",
            "value": "toyota"
          },
          {
            "label": "Ford",
            "value": "ford"
          }
        ]
      },
      "key": "make",
      "type": "select",
      "input": true
    },
    {
      "label": "Model",
      "widget": "choicesjs",
      "tableView": true,
      "dataSrc": "custom",
      "data": {
        "custom": "values = [\n  {\n    \"make\": \"toyota\",\n    \"model\": \"Camry\"\n  },\n  {\n    \"make\": \"toyota\",\n    \"model\": \"Corolla\"\n  },\n  {\n    \"make\": \"ford\",\n    \"model\": \"Taurus\"\n  },\n  {\n    \"make\": \"ford\",\n    \"model\": \"F-150\"\n  }\n].filter((val) => data.make ? data.make === val.make : true)"
      },
      "template": "<span>{{ item.model }}</span>",
      "key": "model",
      "type": "select",
      "input": true
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ],
  "settings": {},
}
Formio.createForm(document.getElementById('formio'), formDefinition).then((form) => {

});

const reorder = (components, form) => {
  components = [...components.slice(1), components[0]];
}