]> 2026-04-30T03:25:38+02:00 JSON 50000 en Doc 10 How to use a JSON schema to render a form User JSON (2.1,2.5) 2.1 2.5 JSON 2023-02-27T18:57:24Z 2460003.2898611 JSON 2025-08-26T07:51:57Z 2460913.8277431 Doc/FlexForm/2.1/Form options/JSON 396 FlexForm JSON Schema explained Rendered example JSON data FlexForm_JSON_Schema_explained2.png CspParameterDefinitions.png Rendered_example_JSON_data.png 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. FlexForm JSON Schema explained 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 . CspParameterDefinitions JSON data 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. Rendered example JSON data 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. 50000 0 plainlist 1 [[:DevOps:Doc/FlexForm/2.1/Form options/JSON]] Doc/FlexForm/2.1/Form options/JSON# QUERY06bdf7a0ec43667e081e8509700ccafb