JSFiddle - React, Tailwind, and code Playground

by techrevolt

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css">
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script>
<div id="myDiv"></div>

JavaScript

var properties = {
  "type": {
    "type": "string",
    "title": "Plugin-Typ",
    "required": false,
    "enum": [
      "html_content",
      "grid"
    ]
  },
  "nextfields": {
    "dependsOn": [
      "type"
    ]
  }
};
var typeSchemas = {
  "html_content": {
    "type": "object",
    "properties": {
      "title": {
        "type": "string",
        "title": "Title 1"
      },
      "gender": {
        "type": "string",
        "title": "Gender",
        "enum": [
          "m",
          "f"
        ]
      }
    }
  },
  "grid": {
    "type": "object",
    "properties": {
      "title": {
        "type": "string",
        "title": "Title 2"
      },
      "gender": {
        "type": "string",
        "title": "Gender2",
        "enum": [
          "m",
          "f"
        ]
      }
    }
  },
};
var myDiv = document.getElementById("myDiv");
var bf = brutusin["json-forms"].create({
  "$schema": "http://json-schema.org/draft-03/schema#",
  "type": "object",
  "properties": properties
});
bf.schemaResolver = function(names, data, cb) {
  var schemas = new Object();
  schemas["$.nextfields"] = typeSchemas[data.type];
  cb(schemas);
};
bf.render(myDiv);