Introduction
With the json and json-type argument for a form you can use a JSON schema version to render a FlexForm. It currently only supports a one object deep schema, except when using instances. Use it together with the _edit or _create json options if you want to do an all JSON layout.
json-type argument
The value for the json argument depends on the json-type. json-type can be "string", "url" or "title".
json-type="string"
Then FlexForm expects the json argument to be the actual JSON Schema
json-type="url"
Then FlexForm expects the json argument to a full url to the actual JSON Schema
json-type="title"
Then FlexForm expects the json argument to be a page in the Wiki holding the actual JSON Schema
json argument
As described above it can be three different ways of giving FlexForm the JSON Schema.
FlexForm JSON Schema variant
Here is where we explain what JSON schema variant FlexForm understands.
The Schema basically uses a JSON Schema to render a form, but has certain extra arguments allowing to add all FlexForm input type options.
In this example we will also use instances.
Title and description are optional and we start with a type of object.
FlexForm will then always expect a named new object with properties explaining what needs to be done. In our example it is an instance definition. ( see instances for more information ).
Since instance is another object holding the template for the instance, the type again is set to object, but we do have some additional Instance arguments added. Like format, name and default-content.
htmlElement is not instance specific and tells FlexForm what kind of htmlElement you want it to render. If you do not add this htmlElement, then FlexForm will look at the "type" argument. If it is a string, a text input field will be rendered, a number/integer then a number input field will be rendered. Adding htmlElement will overide the type element. There is also a inputType, telling FlexForm exactly what element to render. So htmlElement can be an input and inputType can be checkbox, to render checkboxes.
Back to our example. The properties for the instance are the actual fields that need to be rendered.
Always starting with a named object, this will also become the name argument of the input field.
Looking at the select input (named formfieldType in the example). Notice the type is still string, as the values, defined by enum, are strings.
Lastly, the instance object also has a "required" argument. There is where you define what properties will become a required field.
Since in this example the instance format is set to JSON and the default-content is a WSSlot query to get JSON from a slot on a page in the wiki, we can actually use this JSON Schema to render a form that will be able to edit JSON directly. In our example a JSON like the image below.
FlexForm will take all the entries from the data JSON and render the form. See Image 3 .
Here's an image of what FlexForm renders from the Data and the Schema.
No styling has been added to this example, so it looks a bit condensed.
No if you would add an _edit to the form like below and the data JSON is stored on a page called "CspParameterDefinitions" and also add a submit button. You can now edit JSON directly from FlexForm.
<_edit target="CspParameterDefinitions" format="json" template="jsonk|CspParameterDefinitions" formfield="myInstance" />
<input type="submit" value="Save" />
Full example using the schema and the edit
<form json="CspParameterDefinitionsScheme" json-type="title">
<_edit target="CspParameterDefinitions" format="json" template="jsonk|CspParameterDefinitions" formfield="myInstance" />
<input type="submit" value="Save" />
</form>
summary
If you have JSON data. Define a form describing the JSON data in a schema. Then let FlexForm render the form allowing you to edit JSON data directly.
