DevOps:Doc/FlexForm/2.1/Form options/JSON - Revision history

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: User:Fd4138e7-8b46-4c8f-99bf-d4b738ebc295

2025-08-26T07:51:57Z

ws-class-props
← Older revision		Revision as of 09:51, 26 August 2025
Line 1:		Line 1:
	{{Csp class properties		{{Csp class properties
	\|Subject version=2.1		\|Subject version=2.1,2.5
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Doc synopsis=How to use a JSON schema to render a form		\|Doc synopsis=How to use a JSON schema to render a form

Maintenance script: Imported by PageSync

2025-07-15T08:35:38Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:35, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.1		\|Subject version=2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Charlot at 19:48, 27 February 2023

2023-02-27T19:48:15Z

← Older revision		Revision as of 21:48, 27 February 2023
Line 58:		Line 58:
	Full example using the schema and the edit		Full example using the schema and the edit
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="get"~~ json="CspParameterDefinitionsScheme" json-type="title">		<form json="CspParameterDefinitionsScheme" json-type="title">
	<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />		<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />
	<input type="submit" value="Save" />		<input type="submit" value="Save" />

Charlot at 19:47, 27 February 2023

2023-02-27T19:47:49Z

← Older revision		Revision as of 21:47, 27 February 2023
Line 60:		Line 60:
	<form action="get" json="CspParameterDefinitionsScheme" json-type="title">		<form action="get" json="CspParameterDefinitionsScheme" json-type="title">
	<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />		<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />
	<input type="submit" value="go" />		<input type="submit" value="Save" />
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>

Charlot: User:Charlot

2023-02-27T19:43:57Z

User:Charlot

ws-seo
← Older revision	Revision as of 21:43, 27 February 2023
Line 1:	Line 1:
		{{SEO
		\|Title=FlexForm argument to render a JSON schema
		\|Keywords=FlexForm,MediaWiki,JSON,Schema
		\|Description=How to use a JSON schema to render a form, using FlexForm.
		\|Author=https://wikibase-solutions.com/author/charlot
		\|Section=Documention/FlexForm
		\|Published time=2023-02-27
		}}

Charlot at 19:41, 27 February 2023

2023-02-27T19:41:00Z

← Older revision		Revision as of 21:41, 27 February 2023
Line 54:		Line 54:
	<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />		<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />
	<input type="submit" value="Save" />		<input type="submit" value="Save" />
			</syntaxhighlight>

			Full example using the schema and the edit
			<syntaxhighlight lang="html">
			<form action="get" json="CspParameterDefinitionsScheme" json-type="title">
			<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />
			<input type="submit" value="go" />
			</form>
	</syntaxhighlight>		</syntaxhighlight>

	=== summary ===		=== 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.		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.

Charlot at 19:39, 27 February 2023

2023-02-27T19:39:59Z

← Older revision		Revision as of 21:39, 27 February 2023
Line 49:		Line 49:
	[[File:Rendered example JSON data.png\|alt=Rendered example JSON data\|center\|thumb\|Rendered example JSON data]]		[[File:Rendered example JSON data.png\|alt=Rendered example JSON data\|center\|thumb\|Rendered example JSON data]]

	No if you would add an _edit to the form like ~~this~~		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.

			<syntaxhighlight lang="html">
			<_edit target="CspParameterDefinitions" format="json" template="jsonk\|CspParameterDefinitions" formfield="myInstance" />
			<input type="submit" value="Save" />
			</syntaxhighlight>

			=== 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.

Charlot at 19:35, 27 February 2023

2023-02-27T19:35:47Z

@@ Line 17: / Line 17: @@
 === FlexForm JSON Schema variant ===
 Here is where we explain what JSON schema variant FlexForm understands.
-This will upload a file. If the filename is DCM10001.jpg, the file will be uploaded as '''pictures-DCM10001-732138982.jpg''', The filepage will have '''Information of the test file'''. Finally using '''error_id''' and '''verbose_id''', means the user should add two div's, one with an id="div-error" and one with an id="div-verbose" with these name themselves.
+'''Title''' and '''description''' are optional and we start with a ''type of object''.
-<syntaxhighlight lang="html">
-<input type="file" id="file-upload" name="test" target="pictures-[filename]-[mwrandom]" pagecontent="Information of the test file" error_id="div-error" verbose_id="div-verbose" />
+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 ).
-</syntaxhighlight>

Charlot at 19:08, 27 February 2023

2023-02-27T19:08:38Z

← Older revision	Revision as of 21:08, 27 February 2023
Line 1:	Line 1:
		=== 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.


		This will upload a file. If the filename is DCM10001.jpg, the file will be uploaded as '''pictures-DCM10001-732138982.jpg''', The filepage will have '''Information of the test file'''. Finally using '''error_id''' and '''verbose_id''', means the user should add two div's, one with an id="div-error" and one with an id="div-verbose" with these name themselves.
		<syntaxhighlight lang="html">
		<input type="file" id="file-upload" name="test" target="pictures-[filename]-[mwrandom]" pagecontent="Information of the test file" error_id="div-error" verbose_id="div-verbose" />
		</syntaxhighlight>

Charlot: User:Charlot

2023-02-27T18:58:31Z

User:Charlot

ws-class-props
← Older revision		Revision as of 20:58, 27 February 2023
Line 2:		Line 2:
	\|Subject version=2.1		\|Subject version=2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
			\|Doc synopsis=How to use a JSON schema to render a form
			\|Doc parent=DevOps:Doc/FlexForm/2.1/Form options
			\|Doc sort order=10
			\|Doc target group=User
	}}		}}