CSP Wiki - User contributions [en]

DevOps:Doc/FlexForm/2.1/input/file

2026-03-27T08:59:21Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

===Name===
file
===Type===
input
===Synopsis===
Using file uploads
===Description===
Use a form to upload one or multiple files.
===Parameters===
input type="file"

'''target'''* : Name of the File page to be created

'''id'''* : This must always be unique, that is, it can only occur once on a page. Do not include a hyphen ("-"), underscore ("_"), or any special characters (also no spaces).

'''action'''* : defaults to '''upload'''. Read more below on using this to convert docx documents to pages in the wiki.

'''name'''* : As with any input field, a name is mandatory

'''pagecontent''': Text content to be added on the File Page. If you are using '''convertfrom''' then any images uploading during the convert will get the pagecontent.

'''comment''': Text to show in recent changes or contributions list

'''force ''': Force images to a certain format (png, jpg or gif). When using this option, any file uploaded that is not supported will be uploaded as is.

'''error_id ''': Id of a DOM Element where error notices will be shown

'''verbose_id ''': Id of a DOM element where information about the file is shown

'''use_label ''': Doesn't require a value. When an input field has a label attached to it, then the label will become the upload button and the input field will be hidden

'''dropzone ''': Doesn't require a value. Will turn the verbose div into an additional file drop zone. If you also '''use_label''', then the label will become the dropzone.

'''parsecontent''': Will force FlexForm to insert values from other form fields inside the pagecontent field. Use square brackets, like [fieldname], where values should be inserted.

'''template''' : If you want to store a template call inside the content of the File page, you can '''template=<name of your template>''' in combination with '''parsecontent'''. [flexform-template] inside your content field will be replaced by '''{{<name of your template''' and '''[/flexform-template]''' will be replaced by '''}}'''. See example 3 on the examples page.

'''multiple''' = multiple

'''*'''= a required variable

The '''target''' is basically the name you want to use to store the file or files. It recognizes '''[mwrandom]''', '''[filename]''' and other form fields, by using their name with square brackets around them (see example). '''pagecontent''' can also hold form variables.

=== action="convertfrom:????" ===
====Pandoc====
The '''action''' argument defaults to ''upload''. If you use '''action="convertfrom:????"''' and you have [https://pandoc.org/ Pandoc] installed on your system, FlexForm will convert a document and create it as a page in the Wiki. '''target''' will then be used as a Page Title. Depending on your version of Pandoc, the results might differ. '''convertfrom''' allows all Pandoc to MediaWiki text conversions. '''docx''' would be a good example : action="convertfrom:docx". Any images uploaded during the convert can have their content of their filepages be filled using '''pagecontent'''. Since version 2.2.9 you can also add an argument '''slot="<name of slot>"''' to have the converted Document be save to a specific slot on the target page, instead of the main slot. Keep in mind, MediaWiki slots need to be defined in your LocalSettings.

Since '''version 2.7.0''' you have two new arguments when using Pandoc conversion : '''pandoc_prefix''' and '''pandoc_suffix'''. As your converted (word) document will become a Wiki page, you might want to add some text before or after the converted content ( e.g. a template ). '''pandoc_prefix''' will add content at the top of the converted page and '''pandoc_suffix''' will add it to the end of the converted document.

'''Since version 2.8.0'''

* There is now also a '''convertto''' option. You now also need to define in local settings what '''convertfrom''' is allowed and what '''convertto''' is allowed. See [[DevOps:Doc/FlexForm/2.0/Installation of FlexForm|DevOps:Doc/FlexForm/2.0/Installation of FlexForm.]] There two new options for Pandoc conversion : '''uploadoriginalas''' and '''additional-arguments.'''
* '''uploadoriginalas''' : added by using a pipe e.g. '''|uploadoriginalas:''' This will allow the original document to also be uploaded into the wiki, besides it also having a converted version. After the ":" you type the name for the to be uploaded file. You can use [filename] to have it uploaded by its original filename. You can also use [target], it will then upload it using the same name as the converted document.
* '''additional-argumen'''t : Lets you use additional Pandoc argument when converting. See the Pandoc documentation. You also have to define what additional arguments are allowed in the local settings. '''[path]''' inside additional-argument will be replace with the Wiki installation path.
* Local Settings example :<syntaxhighlight lang="php5">
$wgFlexFormConfig['pandoc-convert-to'][] = 'mediawiki';
$wgFlexFormConfig['pandoc-convert-to'][] = 'html';
$wgFlexFormConfig['pandoc-convert-from'][] = 'docx';
$wgFlexFormConfig['pandoc-convert-from'][] = 'ppt';
$wgFlexFormConfig['pandoc-allow-additional-arguments'][] = 'lua-filter';
</syntaxhighlight>

* FlexForm convert example (using [https://pandoc.org/lua-filters.html Pandoc Lua filter]) : <syntaxhighlight lang="php">
<input type="file" id="docxUpload" name="docx" target="File:[filename].docx" pagecontent="" required="required" action="convertfrom:docx|uploadoriginalas:[target]|convertto:mediawiki|additional-arguments:lua-filter=[path]fix-headings.lua" />
</syntaxhighlight>

====Excel ( since version 2.2.9 )====
You can also use '''action="convertfrom:xls"''' or '''action="convertfrom:xlsx"'''. This allows for converting an Excel xls or xlsx file to JSON. Images are not supported. The argument '''slot''' is supported. ''This conversion is not done using Pandoc and thus will work without having Pandoc installed''. (just make sure you run composer update after you update FlexForm).

As off v2.4.0 the Excel convert action has two extra parameters that allow you to choose an Excel Sheet name, if the Excel document has multiple sheets. '''sheet_by_id''' and '''sheet_by_name'''. If you do not use them, it will work as '''sheet_by_id="0"''' (making it backwards compatible). If you use both arguments, then '''sheet_by_name''' will get the priority.

An excel document like this :
{| class="wikitable"
|'''options'''
|'''description'''
|'''HitCounter'''
|'''WSStats'''
|'''More'''
|-
|$wgDisableCounters
|automatically show hitcounts on a page and Special page
|yes
|no
|WSStats allows for adding this to a page using parser function
|-
|$wgHitcounterUpdateFreq
|frequency of counters update
|yes
|no
|WSStats uses MW DB abstraction layer to update hitcount. The approach is different
|-
|skip_user_groups
|Skip certain user groups in counting
|no
|yes
|
|-
|count_all_usergroups
|Count pages independend of a user group
|no
|yes
|
|}
Will result in the following JSON:
<syntaxhighlight lang="json">
[
{
"options": "$wgDisableCounters",
"description": "automatically show hitcounts on a page and Special page",
"HitCounter": "yes",
"WSStats": "no",
"More": "WSStats allows for adding this to a page using parser function"
},
{
"options": "$wgHitcounterUpdateFreq",
"description": "frequency of counters update",
"HitCounter": "yes",
"WSStats": "no",
"More": "WSStats uses MW DB abstraction layer to update hitcount. The approach is different"
},
{
"options": "skip_user_groups",
"description": "Skip certain user groups in counting",
"HitCounter": "no",
"WSStats": "yes"
},
{
"options": "count_all_usergroups",
"description": "Count pages independend of a user group",
"HitCounter": "no",
"WSStats": "yes"
}
]
</syntaxhighlight>

===HTMLtoImage===
You can also use the field input to upload an image created from part of the page shown where the form is rendered.

Basically, you tell FlexForm you want to render a part of your screen as an image and upload it to the wiki.

The syntax is the same as above, but it only needs : target, name and pagecontent. The other arguments are ignored. Additionally it needs an argument called '''presentor="canvas"''' and it needs the ID of the element you want to convert to an image: '''canvas_source_id'''.

''By default the image will always be a .jpg file. We plan to support png if this is requested.''

For example you have a DIV element with id="content-to-convert". Within this DIV you have content you want to convert to an image an upload to the Wiki.

A FlexForm to utilize this would look something like this :
<syntaxhighlight lang="html">
<div id="content-to-convert" style="width:500px">
<h1>Test Screenshot</h1>
<p>Lots of other content here</p>
</div>

<form>
<input type="file" presentor="canvas" id="canvasUpload" target="testCanvasFile.jpg" pagecontent="testing" canvas_source_id="content-to-convert" />
<input type="submit" value="upload" />
</form>
</syntaxhighlight>

'''You cannot use both file uploads in one form.'''

===Note===
An '''input type="file"''' always needs a unique ID! ( do not use "-", "_", any special characters ( also no spaces ) ).

A form that needs to upload files needs this argument : '''enctype="multipart/form-data"'''. The argument needs to be added to the Form tag, not the input tag. See also : https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

As FlexForm first handles File Upload, it will add the files processed to use in an _edit or a _create.
Every file upload field needs a name attribute and once a file has been uploaded you can use them in an edit or create in the following format :

*'''FFUploadedFile-UploadName-'''''<name attribute of input field>'' : Will hold the original file name uploaded
*'''FFUploadedFile-UploadBase-'''''<name attribute of input field>'' : Will hold the original file name uploaded without the extension
*'''FFUploadedFile-NewName-'''''<name attribute of input field>'' : Will hold the name of the file as it is uploaded into the Wiki ( Without the File: prefix )

If you use a multiple file upload, then the above values will all be ''',''' separated.

===Links===
====Tutorial====
[https://wikibase-solutions.com/developer-logs/flexform-multiple-file-upload Link to a quick tutorial video shows you how to use one FlexForm form to]:
* upload multiple files. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/input/file input file documentation]
* add a template to the source of the file pages. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/input/file input file documentation]
* have form input fields be added to the arguments for the template. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/input/file input file documentation]
* show a success message after upload. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/Form_options form options]
* add a comment line to your upload visible in the Contributions list and recent changes. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/Form_options form options]
* use a dropzone to drag and drop files. Docs : [https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/input/file input file documentation]
* align form fields using a MW table. Docs : [[mediawikiwiki:Help:Tables|MediaWiki tables]]
* add current date using Magic Words. Docs : [[mediawikiwiki:Help:Magic_words|MediaWiki magic words]]

====Other links====
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

https://pandoc.org/

DevOps:Doc/FlexForm/2.0/Installation of FlexForm

2026-03-03T08:38:22Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

FlexForm is installed using [https://www.mediawiki.org/wiki/Composer/For_extensions Composer]:

<syntaxhighlight lang="php">
composer require open-csp/flex-form
</syntaxhighlight>

You can install FlexForm from [https://github.com/Open-CSP/FlexForm github] by installing it in extensions/FlexForm. You do have to run composer --update inside that folder after installation to get all dependencies.

==== Setup ====
You can tweak '''FlexForm''' to an extent in your <code>LocalSettings.php</code> file:

<syntaxhighlight lang="php">
// Will render form that makes no sense when inspected in the browser.
$wgFlexFormConfig['secure'] = true;

// A salt key for encryption. Used together with "secure" option. Must be set when using multiple instances of a wiki.
$wgFlexFormConfig['sec_key'] = "";

// Interval time in ms, defaults to 3 minutes (180000 ms). Form is submitted on each interval regardless of changes.
$wgFlexFormConfig['auto_save_interval'] = 30000;

// Time in ms, defaults to 3 seconds (3000 ms). Form is submitted after the specified time, timer starts when there is a change in the form. Timer resets if there is another change before the time has passed.
$wgFlexFormConfig['auto_save_after_change'] = 3000;

// Text on the autosave button to toggle on.
$wgFlexFormConfig['auto_save_btn_on'] = 'Autosave on';

// Text on the autosave button to toggle off.
$wgFlexFormConfig['auto_save_btn_off'] = 'Autosave off';

// Currently the only form.
$wgFlexFormConfig['FlexFormDefaultTheme'] = "plain";

// reCaptcha site key.
$wgFlexFormConfig['rc_site_key'] = "";

// reCaptcha secret key.
$wgFlexFormConfig['rc_secret_key'] = "";

// Where to store images temporarily that need to be format converted.
$wgFlexFormConfig['file_temp_path'] = "";

// Defaults to false. Set to yes if FlexForm is allowed to create new users.
$wgFlexFormConfig['can_create_user'] = "";

// Defaults to false. Will filter all parser arguments to plain text, except value parameters. Will also disallow onClick and onFocus parameter. This feature will most likely be removed in future updates.
$wgFlexFormConfig['filter_input_tags'] = false;

// Defaults to what is described by the loadscript form argument. When you change it do a different folder, then loadScript argument will be looking in this folder for its JavaScript file to load with the Form.
$wgFlexFormConfig['loadScriptPath'] = "";

// Defaults to sysop. Only a user in the allowedGroups is able to edit pages with a FlexForm in the source.
$wgFlexFormConfig['allowedGroups'] = ["sysop","moderator"];

// Defaults to true. When a user in the allowedGroups creates a form it will become valid and will be rendered. Someone not in the allowedGroups can create a form and save it, but it will never be rendered until a user from the allowedGroups will edit and re-save the page. Only then will a form become valid. The message "FORM CANNOT BE RENDERED, NOT VALIDATED" will be shown instead of the form when it is invalid or depending on the next setting an image stating it cannot be rendered.
$wgFlexFormConfig['renderonlyapprovedforms'] = true;

// When a form is invalid, an invalid image will be rendered instead of the form. Set to true to render i18n invalid message.
$wgFlexFormConfig['renderi18nErrorInsteadofImageForApprovedForms'] = false;

// Defaults to false. This differs from FlexForm before 2.0. FlexForm will now honor the UserCan functions in MediaWiki. If a form edits or creates a page a user has no rights to, the form will fail.
$wgFlexFormConfig['userscaneditallpages'] = false;

// Defaults to true. If a user is not in the allowedGroups then hide edit and editsource menu items for any page containing a FlexForm form.
$wgFlexFormConfig['hideEdit'] = true;

// Defaults to false. Will turn titles given to wscreate into url friendly slugs. Creating only latin character and converting spaces and special characters.
$wgFlexFormConfig['create-seo-titles'] = true;

// If you have a custom/different version of Pandoc than the one set by your hosting provider, you can add its local path here and FlexForm will use it, instead of the one set by environment variables
$wgFlexFormConfig['pandoc-install-path'] = '/bin/pandoc'; // This will look for Pandoc executable in the root/bin of your MediaWiki instalment

// FlexForm will by default always do an extra null edit on a save or an edit. This is mainly due to SMW. Not always this is necessary, so with this option you can turn it off. ( resulting in less handling time )
$wgFlexFormConfig['forceNullEdit'] = true; // Default to true for backwards compatibility

// As of version 2.7.1: This will enable FlexFormOpenAPI, making it possible to use API 'CanUserBeCreated' which does not require read-rights.
$wgFlexFormConfig['allowFlexFormOpenAPI'] = false;

// As of version 2.7.1: When sending email, should we use MediaWiki mail settings (defaults to false)? If set to true: when MediaWiki wgSMTP is set, FlexForm will use those settings, if they are not set, FlexForm will not use SMTP.
$wgFlexFormConfig['use_mediawiki_mail_settings'] = false;

// When sending email, should we use separate smtp?
// As off version 2.7.1: If this is set to true AND 'use_mediawiki_mail_settings' is also set to true, then 'use_mediawiki_mail_settings' is ignored
$wgFlexFormConfig['use_smtp'] = false;

$wgFlexFormConfig['smtp_host'] = "";

$wgFlexFormConfig['smtp_authentication'] = true;

$wgFlexFormConfig['smtp_username'] = "";

$wgFlexFormConfig['smtp_password'] = "";

$wgFlexFormConfig['smtp_secure'] = "TLS";

$wgFlexFormConfig['smtp_port'] = "587";

// If you have very complicated forms and the result is not what you expect, you can turn on Debug and review every step FlexForm makes. The results are not documented and very nerdly. Before version v2.6.3 debug on would not actually create or edit a page. As off 2.6.4 it does, it will show the debug results on the FlexForm Special page.
// $wgFlexFormConfig['debug'] = true; // Defaults to false

</syntaxhighlight>

==== Installation ====
* Add the following line at the end of your <code>LocalSettings.php</code> to enable the extension:

<syntaxhighlight lang="php">
wfLoadExtension( 'FlexForm' );
</syntaxhighlight>

* It is also recommended to turn off the parser cache when using FlexForm:

<syntaxhighlight lang="php">
$wgParserCacheType = CACHE_NONE;
</syntaxhighlight>

* Run the [https://www.mediawiki.org/wiki/Manual:Update.php update script] which will automatically create the necessary database tables that this extension needs.
* Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

==== Migrate from version 1.x to 2.0 ====
* Please notice the changes in the config settings.
* Do not forget to run update.php.
* Also, by default, the setting '''renderonlyapprovedforms''' will be '''true'''. Meaning that once you install FlexForm v2.0 all your existing FlexForm forms in your wiki will be shown as unvalidated. Visit [[DevOps:Doc/FlexForm/2.0/Validated Forms|Validated Forms]] to read how to solve this easily.

==== Notification/Messages ====
FlexForm has a notification system built in. This is used to show possible errors or success/custom messages.

'''As of version 2.2.2 this is a default feature''' and <nowiki><form showmessage /></nowiki> is deprecated.

Wiki:Testpagina Liselot

2026-01-09T09:33:51Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Wiki:Test DG

2025-11-20T10:07:16Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: removing deprecated #ca functions in preparation for MW 1.43 upgrade (issue #6)

{{#ask: [[Class::Employee]]
|?Has list number
|?Has first name
|?Has last name
|?Has employee number
}}

==Test==
Test if tokens can return a property value (here returnid=Has first name, and Has last name) rather than a pagename.

<_form action="get">

{{#tag:_token
|
|id=t7019-tokens
|name=FirstName[]
|placeholder=First name...
|multiple=multiple
|query=[[Class::Employee]][[Has first name::!!!]](limit=9999)(returntext=Has first name)(returnid=Has first name)
|placeholder
|allowclear
|class=w-100
}}

<_token id="tokens-last-name" name="LasttName[]" placeholder="Last name..." multiple="multiple" query="[[Class::Employee]][[Has last name::!!!]](limit=9999)(returntext=Has last name)(returnid=Has last name)" allowclear class="w-100" />

<_input type="submit"/>
</_form>

User:Ebc16062-dd09-4928-8cf3-821f492b0c44

2025-11-20T10:06:09Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Blanked the page

User:E00a555c-1e5d-4eb3-b26b-5be8dc16c657

2025-11-20T10:05:56Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Blanked the page

DevOps:Doc/FlexForm/1.1/token

2025-10-13T12:10:02Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Undo revision 3885 by Ebc16062-dd09-4928-8cf3-821f492b0c44 (talk)

===Name===
_token
===Type===
_token
===Synopsis===
Token input field
===Description===
Use of select2 tokens
===Parameters===
'''_token'''

'''name''' = e.g. tokenfield[]

'''separator''' = token values have by default comma separated values when adding to a Template. You can specify a different separator using this argument . e.g. separator=";".

'''allowtags''' = allow user to add custom values that are not suggested through autocompletion or otherwise. As of version 2.2.19, use a value of 'allowtags'; prior to that, just give the attribute name, without any value.

'''allowsort''' = (no value or (as of version 2.2.19 ->) value of 'allowsort') Allow user to sort values (drag and drop selected token). '''Does not work with query source.'''

'''allowclear''' = (no value or (as of version 2.2.19 ->) value of 'allowclear') allow user to clear his selection. Will only work when you have set a placeholder.

'''input-length-trigger''' = integer number of characters before lookup actually happens, defaults to 3

'''id''' = '''''mandatory'''''

'''query''' = If you have [https://www.semantic-mediawiki.org Semantic MediaWiki] installed, you can do a SMW Ask query here to fill the options list.
* '''returntext''' lets you set a property for the visible label of the token
* '''returnid''' (optional) lets you set a property for the value to be stored. This defaults to the page name.
* '''limit''' (optional) lets you sets the maximum number of pages to be returned by the query
* '''fquery''' (optional) lets you set a SMW Filter query that will be added to the query. Additional you can use [fffield='<name of a form field>'] inside the fquery to dynamically add a value of a form field in the filter query.

'''callback''' = templateCallBack

'''multiple''' = multiple

===Example===
Example 1 : Search for pages in the Doc page types.
<syntaxhighlight lang="html">
<form>
<_token name="tokenfield[]" id="tokener" query="[[Class::Doc]][[Title::!!!]](limit=99999)(returntext=Title)" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>
</syntaxhighlight>

<_form restrictions="lifted" action="get">
<_token name="tokenfield[]" id="tokener" query="[[Class::Doc]][[Title::!!!]](limit=99999)(returntext=Title)" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</_form>

Example 2 : Select one or more cars or create a new one
<syntaxhighlight lang="html">
<form>
<_token name="car[]" id="test-tokens-multiple" multiple="multiple" allowtags="allowtags">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="tesla" selected="selected">Tesla</option>
</_token>
</form>
</syntaxhighlight>
<form restrictions="lifted" >
<_token name="car[]" id="test-tokens-multiple" multiple="multiple" allowtags="allowtags">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="tesla" selected="selected">Tesla</option>
</_token>
</form>

Example 3 : using the '''selected''' and '''options''' attributes
<syntaxhighlight lang="html">
<form>
<_token name="TestSelected[]" id="test-tokens-selected" selected="C" options="A,B,C,D,E" />
</form>
</syntaxhighlight>
<form restrictions="lifted">
<_token name="TestSelected[]" id="test-tokens-selected" selected="C" options="A,B,C,D,E" />
</form>

Example 4 : using fquery
<pre>
<form>
<select name="Version" >
<option value="+">Any version</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="2.0">2.0</option>
<option value="2.1">2.1</option>
</select>
<_token name="Doc page" id="tokens-with-fquery" query="[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Title::!!!]](limit=99999)(returntext=Title)(fquery=[[Subject version::[fffield=Version] ]])" input-length-trigger="1" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>
</pre>
<form restrictions="lifted">
<select name="Version" >
<option value="+">Any version</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="2.0">2.0</option>
<option value="2.1">2.1</option>
</select>
<_token name="Doc page" id="tokens-with-fquery" query="[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Title::!!!]](limit=99999)(returntext=Title)(fquery=[[Subject version::[fffield=Version] ]])" input-length-trigger="1" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>

===Note===
In an SMW query, the '''!!!''' will be replaced with whatever the user types.

===Links===

DevOps:Doc/FlexForm/1.1/token

2025-10-13T12:09:33Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

===Name===
_token
===Type===
_token
===Synopsis===
Token input field
===Description===
Use of select2 tokens
===Parameters===
'''_token'''

'''name''' = e.g. tokenfield[]

'''separator''' = token values have by default comma separated values when adding to a Template. You can specify a different separator using this argument . e.g. separator=";".

'''allowtags''' = allow user to add custom values that are not suggested through autocompletion or otherwise. As of version 2.2.19, use a value of 'allowtags'; prior to that, just give the attribute name, without any value.

'''allowsort''' = (no value or (as of version 2.2.19 ->) value of 'allowsort') Allow user to sort values (drag and drop selected token). '''Does not work with query source.'''

'''allowclear''' = (no value or (as of version 2.2.19 ->) value of 'allowclear') allow user to clear his selection. Will only work when you have set a placeholder.

'''input-length-trigger''' = integer number of characters before lookup actually happens, defaults to 3

'''id''' = '''''mandatory'''''

'''query''' = If you have [https://www.semantic-mediawiki.org Semantic MediaWiki] installed, you can do a SMW Ask query here to fill the options list.
* '''returntext''' lets you set a property for the visible label of the token
* '''returnid''' (optional) lets you set a property for the value to be stored. This defaults to the page name.
* '''limit''' (optional) lets you sets the maximum number of pages to be returned by the query
* '''fquery''' (optional) lets you set a SMW Filter query that will be added to the query. Additional you can use [fffield='<name of a form field>'] inside the fquery to dynamically add a value of a form field in the filter query.

'''callback''' = templateCallBack

'''multiple''' = multiple

===Example===
Example 1 : Search for pages in the Doc page types.
<syntaxhighlight lang="html">
<form>
<_token name="tokenfield[]" id="tokener" query="[[Class::Doc]][[Title::!!!]](limit=99999)(returntext=Title)" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>
</syntaxhighlight>

<_form restrictions="lifted" action="get">
<_token name="tokenfield[]" id="tokener" query="[[Class::Doc]][[Title::!!!]](limit=99999)(returntext=Title)" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</_form>

Example 2 : Select one or more cars or create a new one
<syntaxhighlight lang="html">
<form>
<_token name="car[]" id="test-tokens-multiple" multiple="multiple" allowtags="allowtags">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="tesla" selected="selected">Tesla</option>
</_token>
</form>
</syntaxhighlight>
<form restrictions="lifted" >
<_token name="car[]" id="test-tokens-multiple" multiple="multiple" allowtags="allowtags">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="tesla" selected="selected">Tesla</option>
</_token>
Test
</form>

Example 3 : using the '''selected''' and '''options''' attributes
<syntaxhighlight lang="html">
<form>
<_token name="TestSelected[]" id="test-tokens-selected" selected="C" options="A,B,C,D,E" />
</form>
</syntaxhighlight>
<form restrictions="lifted">
<_token name="TestSelected[]" id="test-tokens-selected" selected="C" options="A,B,C,D,E" />
</form>

Example 4 : using fquery
<pre>
<form>
<select name="Version" >
<option value="+">Any version</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="2.0">2.0</option>
<option value="2.1">2.1</option>
</select>
<_token name="Doc page" id="tokens-with-fquery" query="[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Title::!!!]](limit=99999)(returntext=Title)(fquery=[[Subject version::[fffield=Version] ]])" input-length-trigger="1" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>
</pre>
<form restrictions="lifted">
<select name="Version" >
<option value="+">Any version</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="2.0">2.0</option>
<option value="2.1">2.1</option>
</select>
<_token name="Doc page" id="tokens-with-fquery" query="[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Title::!!!]](limit=99999)(returntext=Title)(fquery=[[Subject version::[fffield=Version] ]])" input-length-trigger="1" placeholder="Search for Documentation Titles" multiple="multiple" allowclear="allowclear">
</_token>
</form>

===Note===
In an SMW query, the '''!!!''' will be replaced with whatever the user types.

===Links===

DevOps:Doc/FlexForm/1.1/token

2025-10-13T12:09:03Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-10T09:51:50Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false. Note that create-seo-titles is only applied to input from formfields that is inserted in mwwrite of a create, not to hardcoded values in mwwrite. Therefore most of these tests (except for D) should have the same results with create-seo-titles set to true or false.
* To execute the tests, copy the content shown below to a page on your wiki. The content contains test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>

=== A2. test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A3. :Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A4. Test page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A5. Template:test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A6. [namespace]:Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>
</syntaxhighlight>
== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== B1. Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B2. test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B3. :Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B4. Template:test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B5. [namespace]:Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>
</syntaxhighlight>
=== B6. Test_page/ ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B7. Test_page- ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C2. Test_page/range:1-9999 ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C3. Test_page/range:1-9999 with mwleadingzero ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
== D. create-seo-titles test ==
* The create should result a page title where values from input fields are cleaned up. Symbols and spaces are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)
* D1 should give an error message as it's an invalid pagetitle: "Could not create page Test#@*( PAge. Invalid title."
* D2 should create "Test page/test-page" (or invalid title when create-seo-titles is set to false)
* D3 should create "Test-page" (or invalid title when create-seo-titles is set to false)

=== D1. Test_#@*( PAge ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_#@*( PAge" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== D2. Test page/[Title] ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test page/[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="Test_#@*( PAge" />

<input type="submit" />
</form>
</syntaxhighlight>
=== D3. [Title] ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="test_#@*( PAge" />
<input type="submit" />
</form>
</syntaxhighlight>
== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
<pre>
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}

</pre>

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-10T07:24:59Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false.
* To execute the tests, copy the content shown below to a page on your wiki. The content contains test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>

=== A2. test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A3. :Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A4. Test page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A5. Template:test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== A6. [namespace]:Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>
</syntaxhighlight>
== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English
* When using the create-seo-titles extension setting of FlexForm, B6 and B7 should result in similar pagetitles

=== B1. Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B2. test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B3. :Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B4. Template:test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B5. [namespace]:Test_page ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>
</syntaxhighlight>
=== B6. Test_page/ ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
=== B7. Test_page- ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>
</syntaxhighlight>
== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C2. Test_page/range:1-9999 ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C3. Test_page/range:1-9999 with mwleadingzero ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
== D. create-seo-titles test ==
* The create should result a page title where values from input fields are cleaned up. Symbols and spaces are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)
* D1 should give an error message as it's an invalid pagetitle: "Could not create page Test#@*( PAge. Invalid title."
* D2 should create "Test page/test-page"
* D3 should create "Test-page"

=== D1. Test_#@*( PAge ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test_#@*( PAge" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>
</syntaxhighlight>
=== D2. Test page/[Title] ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="Test page/[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="Test_#@*( PAge" />

<input type="submit" />
</form>
</syntaxhighlight>
=== D3. [Title] ===
<syntaxhighlight lang="html">
<form>
<_create mwwrite="[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="test_#@*( PAge" />
<input type="submit" />
</form>
</syntaxhighlight>
== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
<pre>
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}

</pre>

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-09T12:32:27Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false.
* To execute the tests, copy the wikitext shown below to a page on your wiki. The page should show test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

<pre>
== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A4. Test page ===
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A5. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A6. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English
* When using the create-seo-titles extension setting of FlexForm, B6 and B7 should result in similar pagetitles

=== B1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B4. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B5. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

=== B6. Test_page/ ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B7. Test_page- ===
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C2. Test_page/range:1-9999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C3. Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

== D. create-seo-titles test ==
* The create should result a page title where values from input fields are cleaned up. Symbols and spaces are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)
* D1 should give an error message as it's an invalid pagetitle: "Could not create page Test#@*( PAge. Invalid title."
* D2 should create "Test page/test-page"
* D3 should create "Test-page"

=== D1. Test_#@*( PAge ===
<form>
<_create mwwrite="Test_#@*( PAge" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== D2. Test page/[Title] ===
<form>
<_create mwwrite="Test page/[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="Test_#@*( PAge" />

<input type="submit" />
</form>

=== D3. [Title] ===
<form>
<_create mwwrite="[Title]" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="text" name="Title" value="test_#@*( PAge" />
<input type="submit" />
</form>

== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}

</pre>

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-09T11:48:52Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false.
* To execute the tests, copy the wikitext shown below to a page on your wiki. The page should show test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

<pre>
== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A4. Test page ===
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A5. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A6. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English
* When using the create-seo-titles extension setting of FlexForm, B6 and B7 should result in similar pagetitles

=== B1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B4. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B5. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

=== B6. Test_page/ ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B7. Test_page- ===
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C2. Test_page/range:1-9999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C3. Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

== D. create-seo-titles test ==
* The create should result in a cleaned up page title where symbols are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)

=== D1. Test_#@*( PAge ===
<form>
<_create mwwrite="Test_#@*( PAge" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}
</pre>

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-09T11:48:12Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false.
* To execute the tests, copy the wikitext shown below to a page on your wiki. The page should show test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

<pre>
== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A4. Test page ===
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A5. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A6. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English
* When using the create-seo-titles extension setting of FlexForm, B6 and B7 should result in similar pagetitles

=== B1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B4. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B5. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

=== B6. Test_page/ ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B7. Test_page- ===
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C2. Test_page/range:1-9999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C3. Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

== D. create-seo-titles test ==
* The create should result in a cleaned up page title where symbols are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)

=== D1. Test_#@*( page ===
<form>
<_create mwwrite="Test_#@*( PAge" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}
</pre>

DevOps:Doc/FlexForm/2.1, 2.5/create pages

2025-10-09T11:47:42Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

__NOTOC__

* These tests assume you are using a wiki with $wgCapitalLinks set to true (the default setting). Else tests like A1 and A2 will produce different results, as the first letter won't be capitalized automatically. You can still use these tests, but you will have to carefully evaluate the results yourself, as some of the instructions will not be applicable.
* Tests should be done with FlexForm extension setting create-seo-titles set to true as well as false.
* To execute the tests, copy the wikitext shown below to a page on your wiki. The page should show test instructions as well as forms to test different _create options.
* After you finish testing, delete the created test pages. You can for example find these in your contributions or use the Semantic MediaWiki query to get a list of pages and delete them through Special:DeleteBatch.

<pre>
== A. next_available test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1" then "Test page2" then "Test page3" etc.
* Tests A1, A2, A3, A4 and A6 (with namespace option "(Main)") should result in similar pagetitles
** note: with create-seo-titles set to true, A4 will produce a different pagetitle, for example "Test-page1"
* Tests A5 and A6 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== A1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A4. Test page ===
<form>
<_create mwwrite="Test page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A5. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== A6. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="next_available" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

== B. add_random test ==
* Test each create multiple times
* Verify that the created page gets a new number each time, i.e. "Test page1759998954" then "Test page1759998946" etc.
** note: the numbers are not fully random as they are based on timestamp, but each create should result in a unique number.
* Tests B1, B2, B3 and B5 (with namespace option "(Main)") should result in similar pagetitles
* Tests B4 and B5 (with namespace options "template" and "Template") should result in similar pagetitles
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English
* When using the create-seo-titles extension setting of FlexForm, B6 and B7 should result in similar pagetitles

=== B1. Test_page ===
<form>
<_create mwwrite="Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B2. test_page ===
<form>
<_create mwwrite="test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B3. :Test_page ===
<form>
<_create mwwrite=":Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B4. Template:test_page ===
<form>
<_create mwwrite="Template:test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B5. [namespace]:Test_page ===
<form>
<_create mwwrite="[namespace]:Test_page" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<div>
<select name="namespace" placeholder="Choose a namespace" required="required">
<option value="">(Main)</option>
<option value="Template" >Template</option>
<option value="template">template</option>
</select>
</div>

<input type="submit" />
</form>

=== B6. Test_page/ ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

=== B7. Test_page- ===
<form>
<_create mwwrite="Test_page-" mwtemplate="Test" mwoption="add_random" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== C. range tests ==
* Test each create multiple times
* C1 should create titles "Test_page/2019000", "Test_page/2019001", "Test_page/2019002" etc.
* C2 should create titles "Test_page/1", "Test_page/2", "Test_page/3" etc.
* C3 should create titles "Test_page/0001", "Test_page/0002", "Test_page/0003" etc.
* C3 should create titles "Template:Test_page/0001", "Template:Test_page/0002", "Template:Test_page/0003" etc.
** note: you might see "Template" in the created page in a different language, if your user preference is set to a language other than English

=== C1. Test_page/range:2019000-2019999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:2019000-2019999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C2. Test_page/range:1-9999 ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C3. Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

=== C4. template:Test_page/range:1-9999 with mwleadingzero ===
<form>
<_create mwwrite="template:Test_page/" mwtemplate="Test" mwoption="range:1-9999" mwleadingzero mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />
<input type="submit" />
</form>

== D. create-seo-titles test ==
* The create should result in a cleaned up page title where symbols are replace with "-" and all letters are lower case (except for the first one if $wgCapitalLinks is set to true)

=== D1. Test_#@*( page ===
<form>
<_create mwwrite="Test_#@*( page" mwtemplate="Test" mwfollow />
<input type="text" name="Content" value="{{#time:r|now||l}}" />

<input type="submit" />
</form>

== Potentially useful Semantic MediaWiki query to find created pages (if you are using SMW) ==
{{#ask:[[~*Test page*]]
|?=Page
|?#-=Page
|?Modification date
|sort=Modification date
|order=desc
}}
</pre>

Open CSP Steering committee

2025-09-24T09:36:28Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

== Agenda of the steering committee meetings ==

* Welcome and Recap
* Project Status and Updates
* Technical Roadmap
* Marketing activities
* Risk Management
* Open Discussion
* Action Items and Next Meeting
== Members ==
{| class="wikitable"
|+
!Name
!Role/focus
!Organization
{{Steering committee member
|Name=Ad Strack van Schijndel
|Role=Chairperson
|Organization=Juggel
}}{{Steering committee member
|Name=Charlot Cobben
|Role=Maintainer
|Organization=Wikibase Solutions
}}{{Steering committee member
|Name=Marijn van Wezel
|Role=Maintainer
|Organization=Independent
}}{{Steering committee member
|Name=Cindy Cicalese
|Role=Linking pin MediaWiki
|Organization=Wikimedia Foundation
}}{{Steering committee member
|Name=Jeffrey Wang
|Role=Linking pin Canasta
|Organization=MyWikis
}}{{Steering committee member
|Name=Rich Evans
|Role=Ambassador
|Organization=NASA GRC
}}{{Steering committee member
|Name=Bryan Hildebrand
|Role=Ambassador
|Organization=Tegnosis Knowledge Management
}}{{Steering committee member
|Name=Viktor Schelling
|Role=tba
|Organization=Independent
}}
|}
== Meetings ==
<div class="container"><div class="row"><div class="col"><div class="timeline-steps aos-init aos-animate" data-aos="fade-up">{{#invoke:Timeline|show}}</div></div></div></div>
{{#ifingroup:user|
{{#ask: [[Class::Meeting report]]
|?Date
|?Attendees
|format=table
}}}}

{{#ifingroup:user|
=== Create new meeting report ===
{{Create meeting form
|Meeting type=Steering committee
}}}}
{{#slot:ws-data|{{FULLPAGENAME}}}}
{{#ifingroup:moderator,sysop |

=== Edit Agenda meetings ===

<form>
<_edit target="{{PAGEID:{{FULLPAGENAME}}}}" format="json" template="jsonk|milestones" formfield="timeline-instance" mwslot="ws-data" />
<_instance name="timeline-instance" format="json" default-content="{{#slotdata:ws-data|{{FULLPAGENAME}} |milestones}}">
<div>
<div class="timeline-edit"><label for="date">Date</label><input type="date" name="date" placeholder="date" /></div>
<div class="timeline-edit"><label for="title">Title</label><input type="text" name="title" placeholder="title" /></div>
<div class="timeline-edit"><label for="link">Link</label><input type="text" name="link" placeholder="url" /></div>
</div>
</_instance>
<input type="submit" value="save" />
</form>

}}

Open CSP Steering committee

2025-09-24T09:36:12Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

DevOps:Doc/FlexForm/2.1/Form options

2025-08-21T09:36:57Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: /* Use reCaptcha Version 3 on a flexform */

===Name===
form
===Type===
form
===Synopsis===
Various FlexForm options
===Description===
Parameters you can add to the _form tag.
===Parameters===

==== '''action''' ====

====== ''Action telling Flexform what this form is for'' ======
There are three options :
* '''addToWiki''' : If no action is set, this is the default action. It will expect _create or _edit input telling it what to do with the form
* '''get''' : Same as addToWiki, except now the page FlexForm is going to after submit will have all form input and values in the url of the page. Handy to e.g. forward to the Wiki Search page.
* '''email''': Same as addToWiki, except now FlexForm will also look for the email options inside a form

==== '''formtarget''' ====

====== ''Change the html post action to a custom one'' ======
In some rare cases you might want to create a FlexForm, but not have FlexForm handle the post data. In that case use formtarget="your url here" to tell html form where to go when someone submits the data.

See example 1

''Note: Keep in mind that this option will completely ignore FlexForm on form submission. No pages will be created or edited.''
<hr>

==== '''messageonsuccess''' ====

====== ''Show a custom message when form is successfully posted'' ======
It's sometimes handy to show a custom message when a form has been successfully posted, especially when after a post you return to the same form page.

''( new since v2.2.10 )'' The message will also be parsed to check for square bracket form attribute names and replace them with their values.

See example 2
<hr>

==== '''attachmessageto''' ====

====== ''Where to show the message'' ======
By default, except for Ajax form submit, the default ''MediaWiki Message notifier'' is used to show your '''messageonsuccess''' or any of the other messages FlexForm might give (e.g. an error). Sometimes it can be handy to control where the notification pops-up, instead of the default right-top. You can use '''attachmessageto''' to attach the notification to an id of a certain HTML element. The notification will happen there. E.g. <code><nowiki><form attachmessageto="#my-unique-id"></nowiki></code>
<hr>

==== '''mwreturn''' ====

====== ''Redirect to this page after submitting the form'' ======
When a form is submitted FlexForm will return to the page the Form was submitted from. You can change it to go to another page ( like a thank-you page for example ) by setting mwreturn. mwreturn="Thank-you-page". Provide a URL (the [https://www.mediawiki.org/wiki/Help:Magic_words#URL_data <code>localurl</code> and <code>fullurl</code> magic words] may come in handy).

<hr>

==== '''permissions''' ====

====== ''Overrule user permission on page edit or page create'' ======
'''Since version 2.1.12'''

FlexForm will check the users permission to edit or create a page. If a user is not allowed to create a page and the user submits a FlexForm that should create a page, a message will show the user has not the correct rights. ( The Wiki admin sets those rights ). Sometimes you do not want to give users ( or user groups ) edit or create rights, but you do want them to be able to e.g. create a new page using a FlexForm. You can then use the permissions argument. The value can be "can-edit", "can-create" or both "can-edit;can-create". The user will then be given the edit or create right using this FlexForm only.

Note that the user will also need to be able to view the '''Special:FlexForm''' page to be able to submit forms, so this may need to be configured separately. For example if you want to allow anonymous users that are not logged in to use a form while normally they are not allowed to view pages in the wiki, you could add the special page to the $wgWhitelistRead setting.

'''Since version 2.3.10'''

If you are using Semantic MediaWiki and the permissions argument, FlexForm will finish it creation or edit process by running the rebuildData function of Semantic MediaWiki for the specific page to make sure properties will be set.

<hr>

==== '''no_submit_on_return''' ====

====== ''Disable enter key for submitting a form'' ======
A HTML form usually gets submitted on pressing enter when there's like one text field. To disable that use the no_submit_on_return option.
This will add some JavaScript to the form disabling form submission on typing an enter.

See example 3
<hr>

==== '''recaptcha-v3-action''' ====
===== '''recaptcha-action ( since v.2.2.11 ) =====

====== Use reCaptcha Version 3 on a flexform ======
Have FlexForm use Google reCAPTCHA v3 to prevent spamming in a form.

You need to add you recaptcha key and secret in the configuration.
<syntaxhighlight lang="php">
$wgFlexFormConfig['rc_site_key'] = ""; // reCaptcha site key
$wgFlexFormConfig['rc_secret_key'] = ""; // reCaptcha secret key
</syntaxhighlight>
Then you can use <syntaxhighlight lang="html">recaptcha-v3-action="action name"</syntaxhighlight>
Where action name is the name of the action to describe the form. It's an extra security measurement. You can choose your own name e.g. : contactform

See example 4

Since version 2.2.11 FlexForm supports ReCaptcha version 3, ReCaptcha Enterprise and ReCaptcha V2 (I'm not a robot).
We have renamed the form argument recaptcha-v3-action to recaptcha--action, but we still support the previous argument for backwards compatibility.

We have also changed the configuration settings to :
<syntaxhighlight lang="php">
$wgFlexFormConfig['rc_use'] = "enterprise"; // Defaults to v3. Can be v2, v3 and enterprise
$wgFlexFormConfig['rc_site_key'] = ""; // for v2 and v3
$wgFlexFormConfig['rc_secret_key'] = ""; // for v2 and v3
$wgFlexFormConfig['rce_project'] = ""; // for enterprise
$wgFlexFormConfig['rce_site_key'] = ""; // for enterprise
$wgFlexFormConfig['rce_api_key'] = ""; // for enterprise
</syntaxhighlight>

''Note'': reCAPTCHA v3 will not work when submitting the form through AJAX (mwidentifier="ajax")<hr>
''Note'': Please read the Google reCaptcha documentation on how to get your '''site key''' and '''secret key''' ( for reCaptcha v2 and v3 ), and read the reCaptcha Enterprise documentation to set and retrieve the '''Project''', '''Site key''' and '''Api key'''s<hr>

==== '''autosave''' ====

====== ''Auto save forms on interval, after change or both'' ======
FlexForm autosave function allows for saving the open form in the background while someone is writing in it.

This feature has 3 options:

Save a form in the background on '''oninterval''', on '''onchange''' or '''onboth'''.<br>
As of v1.1.28 '''onintervalafterchange''' has been added.<br>

It support "normal" forms as well as a form with mwidentifier="ajax", meaning a form setup to be posted as an Ajax call. Also tested with TinyMCE ( tinymce extension ).

'''TinyMCE Note''': FlexForm will look for all elements that have a class name starting with "tinymce", as suggested by TinyMCE.

When using ''onboth'', ''oninterval'' or ''onintervalafterchange'' a button will be added to the top of the form showing autosave interval is on. Clicking the button will turn interval saving off. When you turn it off and autosave is set to auto, the after change will still autosave. ''onintervalafterchange'' will add this button after a change has been detected.

====== Config ======
''The interval time and the after on change time can be set in the config file. When using interval or auto, the text for the button that appears above the form can be set in the config file.''

To style the button to switch off and on the Interval saving classes are added to it in different states:

When on it will have the classes : ''btn btn-primary ws-interval-on''

When off it will have the classes : ''btn btn ws-interval-off''

====== Parameters ======

On form create tag add autosave as parameter. e.g.

This will set autosave to auto.
<syntaxhighlight lang="html">
<form id="unique id per form" autosave=""></form>
</syntaxhighlight>

Set autosave to interval only :
<syntaxhighlight lang="html">
<form id="unique id per form" autosave="oninterval"></form>
</syntaxhighlight>

Set autosave to change only :
<syntaxhighlight lang="html">
<form id="unique id per form" autosave="onchange"></form>
</syntaxhighlight>
'''Note: A form needs to have an unique identifier set by its id'''

Set autosave to interval after change only :
This will set the interval saving after a change has been detected. So it is basically the same as '''oninterval''', except it won't start if there are no changes yet.

<syntaxhighlight lang="html">
<form id="unique id per form" autosave="onintervalafterchange"></form>
</syntaxhighlight>

Set autosave to '''none''' to not have autosave. This can be useful for templates that contain forms, when they should only have autosave in specific situations.

<syntaxhighlight lang="html">
<form id="test-autosave-form" autosave="{{#if:...|auto|none}}" >
<input type="text" />
<input type="submit" />
</form>
</syntaxhighlight>

<hr>
==== '''setwikicomment''' ====

====== ''Set the summary text shown in the recent changes and or contributions'' ======
This can be really handy to describe what form or action was responsible for the changes in the Wiki.
<syntaxhighlight lang="html">
<form setwikicomment="Edit user preference form" >
Your flexform elements here
</form>
</syntaxhighlight>

<hr>
==== '''loadscript''' ====
====== ''Tell FlexForm to load a specific JavaScript with a form'' ======
Sometimes it can be handy to load a JavaScript to work with a Form. For example for Validation or Realtime look-ups and you only need to load that JavaScript for a specific form, instead of having it always be loaded in e.g. common.js.

'''loadscript''' by default looks into the ''FlexForm/Modules/customJS/loadScripts'' extension folder to find the JavaScript you have entered as value for loadscript. If your JavaScript is called validateForms.js, then you copy that JavaScript into the default folder and add '''loadscript="validateForms"''' to the Form tag.

You can also specify a different default folder using the config setting : '''$wgFlexFormConfig['loadScriptPath']''' = <path to your scripts>. See also ''Installation of FlexForm''.
By request, if the script cannot be found, the form will not be rendered and a message is shown, so there is always a visual check available.

<hr>
==== '''extension''' ====

====== ''Have an extension do additional tasks with form values'' ======
You can create an extension for FlexForm that can do additonal tasks to a Form. See extension Docs for more information
<syntaxhighlight lang="html">
<form extension="<name of your extension" >
Your flexform elements here
</form>
</syntaxhighlight>

<hr>
==== '''json''' ====
FlexForm accepts a certain form of JSON Schema to render a Form. See Form options/JSON for more information an on how to utilize this.

<hr>
==== '''json-type''' ====
This argument is used together with the json argument. See Form options/JSON for more information an on how to utilize this.

<hr>
==== '''no_disable_on_submit''' ====
When a form is submitted, the submit button will be set to disabled and a spinner is shown. To disable this behavior, you can add the '''no_disable_on_submit''' argument.

<hr>
===Examples===
Example 1 : formtarget
<syntaxhighlight lang="html">
<form formtarget="https://example.com/handleform.php" >
Your flexform elements here
</form>
</syntaxhighlight>
Example 2 : messageonsuccess
<syntaxhighlight lang="html">
<form messageonsuccess="Information posted, thanks!">
Your flexform elements here
</form>
</syntaxhighlight>
Example 3 : no_submit_on_return
<syntaxhighlight lang="html">
<form no_submit_on_return>
Your flexform elements here
</form>
</syntaxhighlight>
Example 4 : reCaptcha v3
<syntaxhighlight lang="html">
<form recaptcha-v3-action="contactform">
Your flexform elements here
</form>
</syntaxhighlight>

===Note===
If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag. This class will only work on FlexForm Forms. Not on any other element in HTML.
<syntaxhighlight lang="html">
<form class="simple">
Your flexform elements here
</form>
</syntaxhighlight>

Normal default rendering:

<syntaxhighlight lang="html">
<form action="get">
<label for="testnostyle">My label</label><br>
<input type="text" name="testnostyle" id="testnostyle" />
<input type="submit" value="ok" />
</form>
</syntaxhighlight>
<form action="get">
<label for="testnostyle">My label</label><br>
<input type="text" name="testnostyle" id="testnostyle" />
<input type="submit" value="ok" />
</form>

with '''simple''' class style:

<syntaxhighlight lang="html">
<form action="get" class="simple">
<label for="teststyle">My label</label><br>
<input type="text" name="teststyle" id="teststyle" />
<input type="submit" value="ok" />
</form>
</syntaxhighlight>

<form action="get" class="simple">
<label for="teststyle">My label</label><br>
<input type="text" name="teststyle" id="teststyle" />
<input type="submit" value="ok" />
</form>

===Links===
https://developers.google.com/recaptcha/docs/v3

Wiki:Testpagina Liselot

2025-08-21T09:34:22Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

{{#ask:[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Subject version::2.1]][[Subject version::!2.5]]
|?Subject version
|limit=999
}}

{{#ask:[[Class::Doc]][[Doc subject::DevOps:Doc/FlexForm]][[Subject version::2.0]][[Subject version::!2.5]][[Subject version::!2.1]]
|?Subject version
|limit=999
}}

Template:Doc sidebar

2025-02-03T09:08:33Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

<noinclude>

This is the '''Doc sidebar''' template. It should be called in the following format:

<pre>
{{Doc sidebar}}
</pre>

</noinclude><includeonly>{{#vardefine:@allow sidebar edit |{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }} }}{{#vardefine:@logo |File:{{#show:{{#caprint:$class[Doc properties][Doc subject]}}|?Title}}_logo.png }}{{#cadefine:@available-versions|{{#ask: [[Doc subject::{{#caprint:$class[Doc properties][Doc subject]}}]] [[Title::{{#caprint:$base[Base properties][Title]}}]] |?Subject version= |mainlabel=- | searchlabel= }}|,|noparse}}{{#vardefine:@valid-selected-version|{{#if: {{#casearch:@available-versions|{{#urlget:selected-version|999}} }}|{{#urlget:selected-version}}|}} }} {{#vardefine:@selected-version|{{#if: {{#var:@valid-selected-version}} | {{#var:@valid-selected-version}} | {{#casort:@available-versions|rsort}}{{#caprint:@available-versions[0]}} }} }}{{#vardefine:@shown-version|{{#cadefine:@my-versions|{{#caprint:$class[Doc properties][Subject version]}}|,|noparse}}{{#if: {{#casearch:@my-versions|{{#var:@selected-version}} }}|{{#var:@selected-version}}|{{#casort:@my-versions|rsort}}{{#caprint:@my-versions[0]}} }} }}<div class="tab-content">{{#tag:_input||type=radio|id=sidebar-view|name=toggle-sidebar|checked=checked|class=d-none sidebar-view}}<div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#var:@allow sidebar edit}} |yes |<span style="float:right">{{#tag:wslabel|Edit|for=sidebar-edit|class=btn btn-secondary}}</span>}}
<p class="m-0"><i class="far fa-file"></i> <span class="lead">{{#caprint:$base[Base properties][Title]}}</span> <span class="badge badge-info small">{{PAGESIZE:{{FULLPAGENAME}}}} bytes</span> <span class="badge badge-primary small">{{#wsstats:id={{PAGEID}}}}</span></p><p><i class="fas fa-info-circle"></i> <span class="text-muted font-weight-light small">{{#caprint:$class[Doc properties][Doc synopsis]}}</span></p>{{#ifeq:{{#var:@allow sidebar edit}} |yes |<_form action="addToWiki" class="text-center" setwikicomment="Uploaded using the screenshot options" messageonsuccess="Screenshot can be located in your contributions list">
<_input type="file" presentor="canvas" name="screenshot-uploader" id="canvasUpload" target="screenshot-{{FULLPAGENAME}}.jpg" pagecontent="testing" parsecontent canvas_source_id="content" />
<_input type="button" buttontype="submit" html="all" class="btn btn-light"><i class="fas fa-camera-retro"></i> Screenshot</_input></_form>}}
</div>
<div class="card-body">{{#ifexist:{{#var:@logo}}|[[{{#var:@logo}}|150px]]}}
{{#if: {{#caprint:$class[Doc properties][Subject version]}} | {{Sidebar item
|Label=[[{{#caprint:$class[Doc properties][Doc subject]}}]]
| Value={{#ifeq: {{#var:@selected-version}}|{{#var:@shown-version}}|Version {{#var:@shown-version}}|This page is for version {{#var:@shown-version}}<br>[{{fullurl:{{#ask: [[Doc subject::{{#caprint:$class[Doc properties][Doc subject]}}]] [[Title::{{#caprint:$base[Base properties][Title]}}]] [[Subject version::{{#var:@selected-version}}]] |link=none |mainlabel= |limit=1 | searchlabel= }} |selected-version={{#var:@selected-version}} }} Go to {{#var:@selected-version}}] }} }}{{Sidebar item
|Label=[[{{#caprint:$class[Doc properties][Doc subject]}}]]
}} }}{{Sidebar item
|Value=<b>Target audience</b>: {{#caprint:$class[Doc properties][Doc target group]}}
}}{{Sidebar item
|Value=<span class="btn btn-light">[{{fullurl:Search-documentation|order=desc&ordertype=Modification+date&filters=Doc+subject^^{{urlencode:{{PAGENAME:{{#caprint:$class[Doc properties][Doc subject]}} }} }} }} Search Docs]</span>}}
</div>
</div>{{#ifeq:{{#var:@allow sidebar edit}} |yes |{{#tag:wsfield||type=radio|id=sidebar-edit|name=toggle-sidebar|class=d-none sidebar-edit}}<div class="card sidebar-edit-tab"><wsform action="addToWiki">{{#tag:wsedit ||target={{PAGEID}} |template=Base properties |formfield=Title |mwslot=ws-base-props}}{{#if:{{#casize:$class}}
|{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Doc synopsis|mwslot=ws-class-props}}
{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Doc subject |mwslot=ws-class-props}}
{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Doc parent |mwslot=ws-class-props}}
{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Doc sort order |mwslot=ws-class-props}}
{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Doc target group |mwslot=ws-class-props}}
{{#tag:wsedit ||target={{PAGEID}} |template=Doc properties |formfield=Subject version |mwslot=ws-class-props}}
|<wscreate mwwrite="{{FULLPAGENAME}}" mwtemplate="Doc properties" mwslot="ws-class-props" mwfields="Doc synopsis,Doc subject,Doc parent,Doc sort order,Doc target group,Subject version" />
}}

<div class="card-header"><span style="float:right">{{#tag:wslabel|Close|for=sidebar-view|class=btn btn-secondary}}</span>
<b class="d-block">{{#caprint:$base[Base properties][Class]}}</b>
{{#caprint:$base[Base properties][Title]}}
</div>
<div class="card-body">
{{Sidebar item
|Label=Title
|Value={{#tag:wsfield ||type=text |name=Title |required=required |class=form-control |value={{#caprint:$base[Base properties][Title]}} }}
}}
{{Sidebar item
|Label=Doc synopsis
|Value={{#tag:wsfield ||type=text |name=Doc synopsis|required=required |class=form-control |value={{#caprint:$class[Doc properties][Doc synopsis]}} }}
}}
{{Sidebar item
|Label=Doc subject
|Value={{#tag:wsfield ||type=text |name=Doc subject |required=required |class=form-control |value={{#caprint:$class[Doc properties][Doc subject]}} }}
}}
{{Sidebar item
|Label=Subject version
|Value={{#tag:wsfield ||type=text |name=Subject version |class=form-control |value={{#caprint:$class[Doc properties][Subject version]}} }}
}}
{{Sidebar item
|Label=Doc parent
|Value={{#tag:wstoken
|{{#caamap:{{#caprint:$class[Doc properties][Doc parent]}} |,|__Value__|{{#tag:wsfield |{{#show:__Value__ |?Title}}|type=option|value=__Value__|selected=selected}} |}}
|id=Doc-parent-tokens
|name=Doc parent[]
|placeholder=Search...
|multiple=
|query=[[Class::+]][[Doc title with versions::!!!]](limit=99999)(returntext=Doc title with versions)
}}
}}
{{Sidebar item
|Label=Doc sort order
|Value={{#tag:wsfield ||type=number |name=Doc sort order |required=required |class=form-control |value={{#caprint:$class[Doc properties][Doc sort order]}} }}
}}
{{Sidebar item
|Label=Doc target group
|Value={{#cadefine:$value settings |{{Wiki:Setting/Doc target group}} }}
{{#cadefine:$values selected |{{#caprint:$class[Doc properties][Doc target group]}} }}
{{#camerge:$value options |$value settings |$values selected }}
{{#caunique:$value options}}
{{#tag:wsselect
|{{#camap:$value options |__Value__|{{#tag:wsfield|__Value__|type=option|value=__Value__|selected={{#if:{{#casearch:$values selected|__Value__}}|selected}} }} |}}
|name=Doc target group |required=required |class=form-control |id=doc_target_group-field |placeholder=select a value
}}
}}

<div class="text-right">
{{#tag:wslabel|Close|for=sidebar-view|class=btn btn-secondary mb-0}}
<wsfield type="submit" value="Save" class="btn btn-primary" />
</div>
</ul>
</div>
</wsform>
</div>
|}}
</div><div class="treeview w-20 border mb-3"><h6 class="pt-3 pl-3">Related documents for version {{#var:@shown-version}}</h6><hr>{{#if:{{#caprint:$class[Doc properties][Doc subject]}}|{{#ask:[[Doc subject::{{#caprint:$class[Doc properties][Doc subject]}}]][[!{{#caprint:$class[Doc properties][Doc subject]}}]] [[Subject version::{{#var:@shown-version}} ]]
|?=Page
|?Title
|link=none
|limit=1000
|format=tree
|template=tree
|parent=Doc parent
|order=desc,asc,asc
|sort=Doc target group,Doc sort order,Title
}} }}</div>{{DocsData}}{{Show SEO in sidebar}}</includeonly>

User:Ebc16062-dd09-4928-8cf3-821f492b0c44

2025-02-03T09:07:42Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

[{{fullurl:Search-documentation|order=desc&ordertype=Modification+date&filters=Doc+subject^^{{urlencode:{{PAGENAME:{{#caprint:$class[Doc properties][Doc subject]}} }} }} }} Search Docs]

User:Ebc16062-dd09-4928-8cf3-821f492b0c44

2025-02-03T09:07:30Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Created page with "[{{fullurl:{{FULLPAGENAME}}|Search-documentation|order=desc&ordertype=Modification+date&filters=Doc+subject^^{{urlencode:{{PAGENAME:{{#caprint:$class[Doc properties][Doc subje..."

[{{fullurl:{{FULLPAGENAME}}|Search-documentation|order=desc&ordertype=Modification+date&filters=Doc+subject^^{{urlencode:{{PAGENAME:{{#caprint:$class[Doc properties][Doc subject]}} }} }} }} Search Docs]

DevOps:Doc/FlexForm/2.1/input/file/examples

2024-02-22T13:16:36Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

==== Example 1 ====
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>

==== Example 2 ====
Always make sure an image will be transformed to jpeg.

Allow for multiple file upload.

Add form text field "description" on the files page content.
<syntaxhighlight lang="html">
<form enctype="multipart/form-data" >
<input type="file" id="file-upload" name="myfile" multiple="multiple" parsecontent target="pictures-[filename]-[mwrandom]" pagecontent="Information for this image: [description]" force="jpg" />
<input type="text" name="description" />
<input type="submit" value="upload" />
</form>
</syntaxhighlight>

==== Example 3 ====
Store a template to the pagecontent. You can use this if you want the filepage to have structured content or if you want to store structured data with an extension like SMW.<syntaxhighlight lang="html">
<form enctype="multipart/form-data" >
<input type="file" id="file-upload" name="myfile" target="picture-[mwrandom]" parsecontent template="Uploaded file" pagecontent="[flexform-template]|Uploaded from page={{FULLPAGENAME}}|Uploaded by={{CURRENTLOGGEDUSER}}|Comment=[Comment][/flexform-template]" />
<input type="text" name="Comment" placeholder="Comment" />
<input type="submit" value="upload" />
</form>

</syntaxhighlight>

==== Example 4 ====
Convert a Microsoft Docx document to a page in the Wiki. In our example the pagename will be the filename.
<syntaxhighlight lang="html">
<form enctype="multipart/form-data" messageonsuccess="File has been converted and uploaded">
<input type="file" name="myfile" id="file-upload" multiple="multiple" parsecontent target="[filename]" pagecontent="This image belongs to : [filename]" action="convertfrom:docx" comment="converted and uploaded from {{PAGENAME}}" />
<input type="submit" value="upload" />
</form>

</syntaxhighlight>

==== Example 5 ====
Convert a Microsoft Excel document to a page in the Wiki. The Excel content is stored in json format in a slot and a create is used to also store a template in the main slot.
<syntaxhighlight lang="html">
<form action="addToWiki" enctype="multipart/form-data" messageonsuccess="File has been converted and uploaded">
<div class="form-group">
<fieldset class="form-group"><legend>Upload and convert Excel to Json</legend>
<_create noseo mwwrite="[FFUploadedFile-NewName-myfile]" mwtemplate="Test excel convert" mwfields="FFUploadedFile-UploadName-myfile::Original filename" />
<input type="file" class="form-control-file" id="testingFile" name="myfile" parsecontent target="[filename]" action="convertfrom:xlsx" slot="ws-data" comment="converted and uploaded from {{PAGENAME}}" accept=".xlsx" target="excel-data-[mwrandom]-[filename]" />
<input type="submit" value="upload" />
</fieldset>
</div>
</form>
</syntaxhighlight>

DevOps:Doc/FlexForm/2.1/input/file/examples

2024-02-22T13:15:54Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

==== Example 1 ====
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>

==== Example 2 ====
Always make sure an image will be transformed to jpeg.

Allow for multiple file upload.

Add form text field "description" on the files page content.
<syntaxhighlight lang="html">
<form enctype="multipart/form-data" >
<input type="file" id="file-upload" name="myfile" multiple="multiple" parsecontent target="pictures-[filename]-[mwrandom]" pagecontent="Information for this image: [description]" force="jpg" />
<input type="text" name="description" />
<input type="submit" value="upload" />
</form>
</syntaxhighlight>

==== Example 3 ====
Store a template to the pagecontent. You can use this if you want the filepage to have structured content or if you want to store structured data with an extension like SMW.<syntaxhighlight lang="html">
<form enctype="multipart/form-data" >
<input type="file" id="file-upload" name="myfile" target="picture-[mwrandom]" parsecontent template="Uploaded file" pagecontent="[flexform-template]|Uploaded from page={{FULLPAGENAME}}|Uploaded by={{CURRENTLOGGEDUSER}}|Comment=[Comment][/flexform-template]" />
<input type="text" name="Comment" placeholder="Comment" />
<input type="submit" value="upload" />
</form>

</syntaxhighlight>

==== Example 4 ====
Convert a Microsoft Docx document to a page in the Wiki. In our example the pagename will be the filename.
<syntaxhighlight lang="html">
<form enctype="multipart/form-data" messageonsuccess="File has been converted and uploaded">
<input type="file" name="myfile" id="file-upload" multiple="multiple" parsecontent target="[filename]" pagecontent="This image belongs to : [filename]" action="convertfrom:docx" comment="converted and uploaded from {{PAGENAME}}" />
<input type="submit" value="upload" />
</form>

</syntaxhighlight>

==== Example 5 ====
Convert a Microsoft Excel document to a page in the Wiki. The Excel content is stored in json format to a slot and a create is used to also store a template call to the main slot.
<syntaxhighlight lang="html">
<form action="addToWiki" enctype="multipart/form-data" messageonsuccess="File has been converted and uploaded">
<div class="form-group">
<fieldset class="form-group"><legend>Upload and convert Excel to Json</legend>
<_create noseo mwwrite="[FFUploadedFile-NewName-myfile]" mwtemplate="Test excel convert" mwfields="FFUploadedFile-UploadName-myfile::Original filename" />
<input type="file" class="form-control-file" id="testingFile" name="myfile" parsecontent target="[filename]" action="convertfrom:xlsx" slot="ws-data" comment="converted and uploaded from {{PAGENAME}}" accept=".xlsx" target="excel-data-[mwrandom]-[filename]" />
<input type="submit" value="upload" />
</fieldset>
</div>
</form>
</syntaxhighlight>

DevOps:Doc/FlexForm/2.1/input/file/examples

2024-01-10T14:01:18Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-31T12:29:15Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

<br>Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page. This logic works as follows:

* A component contains a system message that invokes a Lua function, for example <code><nowiki>{{#invoke:CspComponents|parseComponentIfApplicable|sidebar}}</nowiki></code>. This Lua function does the following:
* Retrieve slotdata from current page
* Get "Class" parameter from slotdata (return if it does not exist)
* Get class definition pagename corresponding to the class
* Get slotdata from class definition page (return if it does not exist)
* If the component is not found in the "Layout areas" parameter of the class definition page, return
* Parse component template (for example '''Template:Csp default sidebar''', unless a different template is found in the class definition data)
* Pass all of the slotdata from the current page as well as the class definition slotdata to this template, in the form of an ArrayFunctions export

== The "Wiki" namespace ==
Open CSP uses the Wiki namespace. Technically this is the standard Project namespace, which has been labeled "Wiki". This namespace is intended for technical pages for development or configuration of the wiki. It is not intended for users that only write or read content on the wiki. For example class definitions and the "Slots" page are in this namespace. The class definition architecture currently relies on the class definition pages having a specific pagetitle format, so you should not move these pages to different namespaces or modify their titles. If you want to restrict access to this namespace, that is possible by using an extension like Lockdown.

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-31T12:17:11Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

<br>Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page. This logic works as follows:

* A component contains a system message that invokes a Lua function, for example <code><nowiki>{{#invoke:CspComponents|parseComponentIfApplicable|sidebar}}</nowiki></code>. This Lua function does the following:
* Retrieve slotdata from current page
* Get "Class" parameter from slotdata (return if it does not exist)
* Get class definition pagename corresponding to the class
* Get slotdata from class definition page (return if it does not exist)
* If the component is not found in the "Layout areas" parameter of the class definition page, return
* Parse component template (for example '''Template:Csp default sidebar''', unless a different template is found in the class definition data)
* Pass all of the slotdata from the current page as well as the class definition slotdata to this template, in the form of an ArrayFunctions export

== The "Wiki" namespace ==
Open CSP uses the Wiki namespace. Technically this is the standard Project namespace, which has been labeled "Wiki". This namespace is intended for technical pages for development or configuration of the wiki. It is not intended for users that only write or read content on the wiki. For example class definitions and the "Slots" page are in this namespace. The class definition architecture currently relies on the class definition pages having a specific pagetitle format, so you should not move these pages to different namespaces or modify the title. If you want to restrict access to this namespace, that is possible by using an extension like WikiGuard or Lockdown.

DevOps:Doc/Open CSP/2.0/Class definition customization options

2023-10-31T12:02:03Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

In '''Open CSP 2.0''' the default sidebar was added, this allows you to have sidebars without having to create custom sidebar templates for each class definition. There are some customization options built into the default sidebar as well. It is recommended to use these customization options when possible and to only create fully custom sidebar templates when absolutely necessary, as the fully custom sidebar templates require a lot more maintenance work when for example some parserfunctions get deprecated or changed. This document describes the various customization options. Note that it is also possible to configure class definitions to use custom templates for the sub-header and footer components, however these do not have extensive customization options like the sidebar and are therefore not described further in this document.

== Parameters and formfield/display templates ==
* Edit parameters on a class definition page, to configure what will show up on your sidebar.
* Note that the parameter configuration is also used for setting properties, but you can use "(none)" as property name value if you don't want to set a property.
* Only the "parameter name" field is required. When you only fill this, you will get default text fields in the sidebars.
* Choose a displayTemplate to configure how a parameter is displayed in the view tab of the default sidebar.
* Choose a formfieldTemplate to configure what type of form field is used in the edit tab of the default sidebar.
* DisplayTemplate and formfieldTemplate can both be set to "(none)" to not have a parameter show up in respectively the view and edit tabs of the default sidebar.

== Custom formfield/display templates ==
* It is possible to add custom template names in the displayTemplate and formfieldTemplate fields.
* All fields that are filled for a parameter will be passed to the templates so they can be accessed through template parameters there. For example you can use <nowiki>{{{allowedValues|}}}</nowiki> in a formfieldTemplate. It might be useful to look at the csp-data slot of the class definition to see all of the parameters.
* The values of parameters on a content page are also passed to the display/formfield templates as the "value" parameter.
* In a display/formfield template you cannot access values of other parameters directly, but you can do this by using <nowiki>{{#invoke:CspFunctions|getParentArgs|$pageData}}</nowiki>, which will return the $pageData parameter that is used in '''Template:Csp default sidebar''' (and contains an [[mediawikiwiki:Extension:ArrayFunctions|ArrayFunctions]] export with slotdata of the page).
* It is possible to add fields to the json data in the csp-data slot that cannot be filled through the parameters form. For example Open CSP 2.0 does not yet include the option to specify a placeholder for your formfields, but you can add placeholder to the json data and then use <nowiki>{{{placeholder|}}}</nowiki> in a custom formfieldTemplate.

== Custom sidebar template where you are adding to the default sidebar ==
In many cases you won't necessarily want to replace the default sidebar, but you may want to add another card above or below it with additional functionality. It is possible to use the default sidebar within a custom sidebar template. For example like the following code snippet:<syntaxhighlight lang="wikitext">
{{Csp default sidebar
|$pageData={{{$pageData|}}}
|$classData={{{$classData|}}}
}}

{{Csp sidebar tabs
|id=another-card
|canEdit=yes
|closeButton=
|title=Another card
|subTitle=Below the default sidebar
|view=<div class="card-body">viewtab content</div>
|edit=<div class="card-body">edittab content</div>
}}
</syntaxhighlight>

== Fully custom sidebar template ==
In a fully custom sidebar template you can do anything you want. You will still get the $pageData and $classData parameters passed to this template so you can use those. The following is an example of custom sidebar code that will produce a sidebar similar to the default one, perhaps this will give you some ideas for what's possible:

<syntaxhighlight lang="html">
<div class="tab-content"><input type="radio" id="sidebar-view" name="toggle-sidebar" checked="checked" class="d-none sidebar-view" /><div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<span style="float:right"><label for="sidebar-edit" class="btn btn-secondary">Edit</label></span>}}
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
{{Csp sidebar item
|Label=Title
|Value={{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title |_text}}
}}{{Csp sidebar item
|Label=TextInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput |_text}}
}}{{Csp sidebar item
|Label=TokenInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput |_text}}
}}{{Csp sidebar item
|Label=AskTokenInput
|Value={{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput |_text}}|,}}|@@|[[{{{@@}}}|{{#show:{{{@@}}}|?Title}}]]}}|<br>}}
}}{{Test date display
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput |_text}}
}}
{{Csp sidebar item
|Label=DateInputTwo
|Value={{#if:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} |{{#time: j M Y H:i |{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} }} }}
}}{{Csp sidebar item
|Label=TextInputTwo
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInputTwo |_text}}
}}{{Csp sidebar item
|Label=CheckboxInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput |_text}}
}}{{Csp sidebar item
|Label=TextAreaInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput |_text}}
}}{{Csp sidebar item
|Label=NumberInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput |_text}}
}}{{Csp sidebar item
|Label=SelectInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput |_text}}
}}{{Csp sidebar item
|Label=TokenMultipleInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput |_text}}
}}</div>
</div>{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<input type="radio" id="sidebar-edit" name="toggle-sidebar" class="d-none sidebar-edit" /><div class="card sidebar-edit-tab"><div class="card-header"><span style="float:right"><label for="sidebar-view" class="btn btn-secondary" >Close</label></span>
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
<form><_edit target="{{PAGEID}}" template="Base properties" formfield="Title" mwslot="csp-base-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="AskTokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="CheckboxInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextAreaInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="NumberInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="SelectInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenMultipleInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TestNoDisplay" mwslot="csp-class-props" />
{{Csp sidebar item
|Label=Title
|Value=<input type="text" name="Title" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}" />
}}
{{Csp sidebar item
|Label=TextInput
|Value=<input type="text" name="TextInput" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput|_text}}" />
}}
{{Csp sidebar item
|Label=TokenInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenInput}} }}" name="TokenInput[]" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput|_text}}" options="Ay,Bee,Cee" />
}}
{{Csp sidebar item
|Label=AskTokenInput
|Value=<_token id="token-{{lc:{{anchorencode:AskTokenInput}} }}" name="AskTokenInput[]" class="form-control" required="required" multiple="multiple" input-length-trigger="1" query="[[Class::+]][[Title::!!!]](limit=999)(returntext=Title)" >
{{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput|_text}} }} |$value|<option value="{{{$value}}}" selected="selected">{{#show:{{{$value}}}|?Title}}</option>}}|\n}}
</_token>
}}
{{Test date formfield
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput|_text}}
}}{{Csp sidebar item
|Label=DateInputTwo
|Value=<input type="datetime-local" name="DateInputTwo" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo|_text}}" />
}}
<div class='alert alert-danger'>No template defined in parameter definitions</div>{{Csp sidebar item
|Label=<label for="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" >CheckboxInput</label>
|Value=<input type="hidden" name="CheckboxInput" value="" />
<input type="checkbox" id="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" name="CheckboxInput" value="Yes" checked="{{#ifeq:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput|_text}} |Yes|checked}}" />
}}
{{Csp sidebar item
|Label=TextAreaInput
|Value=<input type="textarea" name="TextAreaInput" class="form-control" >{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput|_text}}</input>
}}
{{Csp sidebar item
|Label=NumberInput
|Value=<input type="number" name="NumberInput" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput|_text}}" />
}}
{{Csp sidebar item
|Label=SelectInput
|Value=<select name="SelectInput" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TokenMultipleInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenMultipleInput}} }}" name="TokenMultipleInput[]" class="form-control" multiple="multiple" selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TestNoDisplay
|Value=<input type="text" name="TestNoDisplay" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TestNoDisplay|_text}}" />
}}
<div class="text-right">
<label for="sidebar-view" class="btn btn-secondary">Close</label>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
|}}
</div>
</syntaxhighlight>

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:57:00Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:46:25Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

<br>Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page. This logic works as follows:

* A component contains a system message that invokes a Lua function, for example <code><nowiki>{{#invoke:CspComponents|parseComponentIfApplicable|sidebar}}</nowiki></code>. This Lua function does the following:
* Retrieve slotdata from current page
* Get "Class" parameter from slotdata (return if it does not exist)
* Get class definition pagename corresponding to the class
* Get slotdata from class definition page (return if it does not exist)
* Parse component template (for example '''Template:Csp default sidebar''', unless a different template is found in the class definition data)
* Pass all of the slotdata from the current page as well as the class definition slotdata to this template, in the form of an ArrayFunctions export

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:44:54Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: /* Components */

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

<br>Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page. This logic works as follows:

* A component contains a system message that invokes a Lua function, for example <code><nowiki>{{#invoke:CspComponents|parseComponentIfApplicable|sidebar}}</nowiki></code>
* This Lua function does the following:
* Retrieve slotdata from current page
* Get "Class" parameter from slotdata (return if it does not exist)
* Get class definition pagename corresponding to the class
* Get slotdata from class definition page (return if it does not exist)
* Parse component template (for example '''Template:Csp default sidebar''', unless a different template is found in the class definition data)
* pass all of the slotdata from the current page as well as the class definition slotdata to this template, in the form of an ArrayFunctions export

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:44:27Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: /* Components */

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page. This logic works as follows:

* A component contains a system message that invokes a Lua function, for example <code><nowiki>{{#invoke:CspComponents|parseComponentIfApplicable|sidebar}}</nowiki></code>
* This Lua function does the following:
* Retrieve slotdata from current page
* Get "Class" parameter from slotdata (return if it does not exist)
* Get class definition pagename corresponding to the class
* Get slotdata from class definition page (return if it does not exist)
* Parse component template (for example '''Template:Csp default sidebar''', unless a different template is found in the class definition data)
* pass all of the slotdata from the current page as well as the class definition slotdata to this template, in the form of an ArrayFunctions export

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:37:31Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header with '''Template:Csp default subheader''', can be customized through class definitions
* '''Sidebar''': by default shown on right side with '''Template:Csp default sidebar''', can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page.

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:32:13Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

Open CSP stores metadata of pages in slots. Pages are displayed with various components (for which the Chameleon skin is used), which can look differently based on the configuration found in class definition pages.

== Metadata stored in slots ==
Before slots were used, there were two common ways to deal with structured data:

* A) Have templates with structured data in between the content (free text) of a page.
* B) Have one template that wraps the entire page content, with some parameters for structured data and also a parameter for free text

The advantage of using slots is that you can separate the metadata from the content and also separate the storing of the data from displaying it. This reduces the risk of making mistakes when editing, while allowing you to have forms for editing structured data and to use VisualEditor to edit the main content.

Note: data is stored in SMW properties as well, but class definitions do not rely on this. SMW is used for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for the pages that use SMW queries or WikiSearch.

The following slots are used by Open CSP:

=== csp-base-props ===
In this slot '''Template:Base properties''' is used to store data dat is common to all pages, such as the Class and Title:<syntaxhighlight lang="html">
{{Base properties
|Class=
|Title=
}}
</syntaxhighlight>

=== csp-class-props ===
In this slot '''Template:Csp class properties''' is used to store data that is specific to each class, based on the class definition:<syntaxhighlight lang="html">
{{Csp class properties
|Parameter1=Value1
|Parameter2=Value2
|...
}}
</syntaxhighlight>

=== csp-data ===
This is a json slot which the framework only uses for class definition pages, but could be used for storing any json data on content pages as well (if you make your own templates/forms for this).

=== Example slots of a content page ===
Let's say we have a page about a person, this could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Person
|Title=Example person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|First name=John
|Last name=Smith
|Date of birth=1986-03-16
}}
</syntaxhighlight>

=== Example slots of a class definition page ===
To continue the previous example, a "Person" class definition page would have pagename '''Wiki:Class definition/Person''' and could have the following slots:

csp-base-props:<syntaxhighlight lang="html">
{{Base properties
|Class=Class definition
|Title=Person
}}
</syntaxhighlight>csp-class-props:<syntaxhighlight lang="html">
{{Csp class properties
|Defines class=Person
|Pagetitle format=title
|Layout areas='sub-header sidebar' 'main sidebar'
|Layout columns=3fr 1fr
|Layout rows=auto 1fr
}}
</syntaxhighlight>csp-data:<syntaxhighlight lang="html">
{
"CspParameterDefinitions": [
{
"name": "First name",
},
{
"name": "Last name",
},
{
"name": "Date of birth",
"formfieldTemplate": "Csp formfield/date",
"displayTemplate": "Csp parameter display/date",
}
]
}
</syntaxhighlight>

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* '''Header:''' always visible at the top of a page
* '''Main''': this component displays the content that is stored in the main slot of a page, i.e. the text that is written by users
* '''Sub-header''': by default shown below the header, can be customized through class definitions
* '''Sidebar''': by default shown on right side, can be customized through class definitions, metadata is displayed in this component
* '''Footer''': by default not displayed, can be customized through class definitions

Open CSP uses system messages inside these components. These system message contain some logic with various parser functions and Lua functions, in order to display a component based on the slot data of page as well as the slot data of the corresponding class definition page.

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T12:01:20Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T11:14:51Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

== Data stored in slots ==
Note: SMW properties are stored as well, but class definitions do not rely on this. SMW is required for example for [[Search]] and [[Pages]]. It would technically be possible to modify the Open CSP framework to work with a different data storage extension, if you would make your own alternatives for these pages (or perhaps if you do not need them).

=== Slots of a content page ===

=== Slots of a class definition page ===

== Components ==
Open CSP uses the Chameleon skin to be able to display pages with customizable components. The following components are used:

* Header
* Sub-header
* Sidebar
* Footer
* Main

Open CSP uses system messages inside these components. These system message contain wikitext with some logic through various parser functions and lua functions, in order to display a component that takes into account class definitions.

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T11:05:16Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T11:04:29Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

DevOps:Doc/Open CSP/2.0/Class definition customization options

2023-10-05T11:03:30Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

In '''Open CSP 2.0''' the default sidebar was added, this allows you to have sidebars without having to create custom sidebar templates for each class definition. There are some customization options built into the default sidebar as well. It is recommended to use these customization options when possible and to only create fully custom sidebar templates when absolutely necessary, as the fully custom sidebar templates require a lot more maintenance work when for example some parserfunctions get deprecated or changed. This document describes the various customization options.

== Parameters and formfield/display templates ==
* Edit parameters on a class definition page, to configure what will show up on your sidebar.
* Note that the parameter configuration is also used for setting properties, but you can use "(none)" as property name value if you don't want to set a property.
* Only the "parameter name" field is required. When you only fill this, you will get default text fields in the sidebars.
* Choose a displayTemplate to configure how a parameter is displayed in the view tab of the default sidebar.
* Choose a formfieldTemplate to configure what type of form field is used in the edit tab of the default sidebar.
* DisplayTemplate and formfieldTemplate can both be set to "(none)" to not have a parameter show up in respectively the view and edit tabs of the default sidebar.

== Custom formfield/display templates ==
* It is possible to add custom template names in the displayTemplate and formfieldTemplate fields.
* All fields that are filled for a parameter will be passed to the templates so they can be accessed through template parameters there. For example you can use <nowiki>{{{allowedValues|}}}</nowiki> in a formfieldTemplate. It might be useful to look at the csp-data slot of the class definition to see all of the parameters.
* The values of parameters on a content page are also passed to the display/formfield templates as the "value" parameter.
* In a display/formfield template you cannot access values of other parameters directly, but you can do this by using <nowiki>{{#invoke:CspFunctions|getParentArgs|$pageData}}</nowiki>, which will return the $pageData parameter that is used in '''Template:Csp default sidebar''' (and contains an [[mediawikiwiki:Extension:ArrayFunctions|ArrayFunctions]] export with slotdata of the page).
* It is possible to add fields to the json data in the csp-data slot that cannot be filled through the parameters form. For example Open CSP 2.0 does not yet include the option to specify a placeholder for your formfields, but you can add placeholder to the json data and then use <nowiki>{{{placeholder|}}}</nowiki> in a custom formfieldTemplate.

== Custom sidebar template where you are adding to the default sidebar ==
In many cases you won't necessarily want to replace the default sidebar, but you may want to add another card above or below it with additional functionality. It is possible to use the default sidebar within a custom sidebar template. For example like the following code snippet:<syntaxhighlight lang="wikitext">
{{Csp default sidebar
|$pageData={{{$pageData|}}}
|$classData={{{$classData|}}}
}}

{{Csp sidebar tabs
|id=another-card
|canEdit=yes
|closeButton=
|title=Another card
|subTitle=Below the default sidebar
|view=<div class="card-body">viewtab content</div>
|edit=<div class="card-body">edittab content</div>
}}
</syntaxhighlight>

== Fully custom sidebar template ==
In a fully custom sidebar template you can do anything you want. You will still get the $pageData and $classData parameters passed to this template so you can use those. The following is an example of custom sidebar code that will produce a sidebar similar to the default one, perhaps this will give you some ideas for what's possible:

<syntaxhighlight lang="html">
<div class="tab-content"><input type="radio" id="sidebar-view" name="toggle-sidebar" checked="checked" class="d-none sidebar-view" /><div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<span style="float:right"><label for="sidebar-edit" class="btn btn-secondary">Edit</label></span>}}
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
{{Csp sidebar item
|Label=Title
|Value={{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title |_text}}
}}{{Csp sidebar item
|Label=TextInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput |_text}}
}}{{Csp sidebar item
|Label=TokenInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput |_text}}
}}{{Csp sidebar item
|Label=AskTokenInput
|Value={{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput |_text}}|,}}|@@|[[{{{@@}}}|{{#show:{{{@@}}}|?Title}}]]}}|<br>}}
}}{{Test date display
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput |_text}}
}}
{{Csp sidebar item
|Label=DateInputTwo
|Value={{#if:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} |{{#time: j M Y H:i |{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} }} }}
}}{{Csp sidebar item
|Label=TextInputTwo
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInputTwo |_text}}
}}{{Csp sidebar item
|Label=CheckboxInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput |_text}}
}}{{Csp sidebar item
|Label=TextAreaInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput |_text}}
}}{{Csp sidebar item
|Label=NumberInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput |_text}}
}}{{Csp sidebar item
|Label=SelectInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput |_text}}
}}{{Csp sidebar item
|Label=TokenMultipleInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput |_text}}
}}</div>
</div>{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<input type="radio" id="sidebar-edit" name="toggle-sidebar" class="d-none sidebar-edit" /><div class="card sidebar-edit-tab"><div class="card-header"><span style="float:right"><label for="sidebar-view" class="btn btn-secondary" >Close</label></span>
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
<form><_edit target="{{PAGEID}}" template="Base properties" formfield="Title" mwslot="csp-base-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="AskTokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="CheckboxInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextAreaInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="NumberInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="SelectInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenMultipleInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TestNoDisplay" mwslot="csp-class-props" />
{{Csp sidebar item
|Label=Title
|Value=<input type="text" name="Title" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}" />
}}
{{Csp sidebar item
|Label=TextInput
|Value=<input type="text" name="TextInput" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput|_text}}" />
}}
{{Csp sidebar item
|Label=TokenInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenInput}} }}" name="TokenInput[]" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput|_text}}" options="Ay,Bee,Cee" />
}}
{{Csp sidebar item
|Label=AskTokenInput
|Value=<_token id="token-{{lc:{{anchorencode:AskTokenInput}} }}" name="AskTokenInput[]" class="form-control" required="required" multiple="multiple" input-length-trigger="1" query="[[Class::+]][[Title::!!!]](limit=999)(returntext=Title)" >
{{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput|_text}} }} |$value|<option value="{{{$value}}}" selected="selected">{{#show:{{{$value}}}|?Title}}</option>}}|\n}}
</_token>
}}
{{Test date formfield
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput|_text}}
}}{{Csp sidebar item
|Label=DateInputTwo
|Value=<input type="datetime-local" name="DateInputTwo" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo|_text}}" />
}}
<div class='alert alert-danger'>No template defined in parameter definitions</div>{{Csp sidebar item
|Label=<label for="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" >CheckboxInput</label>
|Value=<input type="hidden" name="CheckboxInput" value="" />
<input type="checkbox" id="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" name="CheckboxInput" value="Yes" checked="{{#ifeq:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput|_text}} |Yes|checked}}" />
}}
{{Csp sidebar item
|Label=TextAreaInput
|Value=<input type="textarea" name="TextAreaInput" class="form-control" >{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput|_text}}</input>
}}
{{Csp sidebar item
|Label=NumberInput
|Value=<input type="number" name="NumberInput" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput|_text}}" />
}}
{{Csp sidebar item
|Label=SelectInput
|Value=<select name="SelectInput" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TokenMultipleInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenMultipleInput}} }}" name="TokenMultipleInput[]" class="form-control" multiple="multiple" selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TestNoDisplay
|Value=<input type="text" name="TestNoDisplay" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TestNoDisplay|_text}}" />
}}
<div class="text-right">
<label for="sidebar-view" class="btn btn-secondary">Close</label>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
|}}
</div>
</syntaxhighlight>

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T11:03:05Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

DevOps:Doc/Open CSP/2.0/Class definition architecture

2023-10-05T11:00:47Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: User:Ebc16062-dd09-4928-8cf3-821f492b0c44

DevOps:Doc/Open CSP/2.0/Class definitions

2023-10-05T10:17:21Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

In Open CSP you can add structured data to content pages by using class definitions. A class definition is a configuration for a specific type of page. For example you might have a "Person" class definition. On the class definition page you can configure that a person has parameters such as a first name, last name and date of birth. When a user creates a person page, they will have the option to fill these fields (or you could also configure them to be mandatory). The data is by default displayed in a sidebar on the right side of a page, but this layout can also be configured through the class definition. Managing class definitions is typically done by administrators, while users can create content pages with the defined classes. Data is stored in slots, so that users can edit the main content of a page in the same way as you would edit any wiki page.

DevOps:Doc/Open CSP/2.0/Class definitions

2023-10-05T09:18:46Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

In Open CSP you can add structured data to content pages by using class definitions. A class definition is a configuration for a specific type of page. For example you might have a "Person" class definition. On the class definition page you can configure that a person has parameters such as a first name, last name and date of birth. When a user creates a person page, they will have the option to fill these fields. You can also configure fields to be mandatory. The data is by default displayed in a sidebar on the right side of a page, but this layout can also be configured through the class definition.

DevOps:Doc/Open CSP/2.0/Class definition customization options

2023-10-05T09:06:32Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: /* Fully custom sidebar template */

In '''Open CSP 2.0''' the default sidebar was added, this allows you to have sidebars without having to create custom sidebar templates for each class definition. There are some customization options built into the default sidebar as well. It is recommended to use these customization options when possible and to only create fully custom sidebar templates when absolutely necessary, as the fully custom sidebar templates require a lot more maintenance work when for example some parserfunctions get deprecated or changed. This document describes the various customization options.

== Parameters and formfield/display templates ==
* Edit parameters on a class definition page, to configure what will show up on your sidebar.
* Note that the parameter configuration is also used for setting properties, but you can use "(none)" as property name value if you don't want to set a property.
* Only the "parameter name" field is required. When you only fill this, you will get default text fields in the sidebars.
* Choose a displayTemplate to configure how a parameter is displayed in the view tab of the default sidebar.
* Choose a formfieldTemplate to configure what type of form field is used in the edit tab of the default sidebar.
* DisplayTemplate and formfieldTemplate can both be set to "(none)" to not have a parameter show up in respectively the view and edit tabs of the default sidebar.

== Custom formfield/display templates ==
* It is possible to add custom template names in the displayTemplate and formfieldTemplate fields.
* All fields that are filled for a parameter will be passed to the templates so they can be accessed through template parameters there. For example you can use <nowiki>{{{allowedValues|}}}</nowiki> in a formfieldTemplate. It might be useful to look at the csp-data slot of the class definition to see all of the parameters.
* The values of parameters on a content page are also passed to the display/formfield templates as the "value" parameter.
* In a display/formfield template you cannot access values of other parameters directly, but you can do this by using <nowiki>{{#invoke:CspFunctions|getParentArgs|$pageData}}</nowiki>, which will return the $pageData parameter that is used in '''Template:Csp default sidebar''' (and contains an [[mediawikiwiki:Extension:ArrayFunctions|ArrayFunctions]] export with slotdata of the page).
* It is possible to add fields to the json data in the csp-data slot that cannot be filled through the parameters form. For example Open CSP 2.0 does not yet include the option to specify a placeholder for your formfields, but you can add placeholder to the json data and then use <nowiki>{{{placeholder|}}}</nowiki> in a custom formfieldTemplate.

== Custom sidebar template where you are adding to the default sidebar ==
In many cases you won't necessarily want to replace the default sidebar, but you may want to add another card above or below it with additional functionality. It is possible to use the default sidebar within a custom sidebar template. For example like the following code snippet:<syntaxhighlight lang="wikitext">
{{Csp default sidebar
|$pageData={{{$pageData|}}}
|$classData={{{$classData|}}}
}}

{{Csp sidebar tabs
|id=another-card
|canEdit=yes
|closeButton=
|title=Another card
|subTitle=Below the default sidebar
|view=<div class="card-body">viewtab content</div>
|edit=<div class="card-body">edittab content</div>
}}
</syntaxhighlight>

== Fully custom sidebar template ==
In a fully custom sidebar template you can do anything you want. You will still get the $pageData and $classData parameters passed to this template so you can use those. The following is an example of custom sidebar code that will produce a sidebar similar to the default one, perhaps this will give you some ideas for what's possible:

<syntaxhighlight lang="html">
<div class="tab-content"><input type="radio" id="sidebar-view" name="toggle-sidebar" checked="checked" class="d-none sidebar-view" /><div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<span style="float:right"><label for="sidebar-edit" class="btn btn-secondary">Edit</label></span>}}
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
{{Csp sidebar item
|Label=Title
|Value={{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title |_text}}
}}{{Csp sidebar item
|Label=TextInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput |_text}}
}}{{Csp sidebar item
|Label=TokenInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput |_text}}
}}{{Csp sidebar item
|Label=AskTokenInput
|Value={{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput |_text}}|,}}|@@|[[{{{@@}}}|{{#show:{{{@@}}}|?Title}}]]}}|<br>}}
}}{{Test date display
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput |_text}}
}}
{{Csp sidebar item
|Label=DateInputTwo
|Value={{#if:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} |{{#time: j M Y H:i |{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} }} }}
}}{{Csp sidebar item
|Label=TextInputTwo
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInputTwo |_text}}
}}{{Csp sidebar item
|Label=CheckboxInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput |_text}}
}}{{Csp sidebar item
|Label=TextAreaInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput |_text}}
}}{{Csp sidebar item
|Label=NumberInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput |_text}}
}}{{Csp sidebar item
|Label=SelectInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput |_text}}
}}{{Csp sidebar item
|Label=TokenMultipleInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput |_text}}
}}</div>
</div>{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<input type="radio" id="sidebar-edit" name="toggle-sidebar" class="d-none sidebar-edit" /><div class="card sidebar-edit-tab"><div class="card-header"><span style="float:right"><label for="sidebar-view" class="btn btn-secondary" >Close</label></span>
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
<form><_edit target="{{PAGEID}}" template="Base properties" formfield="Title" mwslot="csp-base-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="AskTokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="CheckboxInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextAreaInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="NumberInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="SelectInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenMultipleInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TestNoDisplay" mwslot="csp-class-props" />
{{Csp sidebar item
|Label=Title
|Value=<input type="text" name="Title" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}" />
}}
{{Csp sidebar item
|Label=TextInput
|Value=<input type="text" name="TextInput" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput|_text}}" />
}}
{{Csp sidebar item
|Label=TokenInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenInput}} }}" name="TokenInput[]" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput|_text}}" options="Ay,Bee,Cee" />
}}
{{Csp sidebar item
|Label=AskTokenInput
|Value=<_token id="token-{{lc:{{anchorencode:AskTokenInput}} }}" name="AskTokenInput[]" class="form-control" required="required" multiple="multiple" input-length-trigger="1" query="[[Class::+]][[Title::!!!]](limit=999)(returntext=Title)" >
{{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput|_text}} }} |$value|<option value="{{{$value}}}" selected="selected">{{#show:{{{$value}}}|?Title}}</option>}}|\n}}
</_token>
}}
{{Test date formfield
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput|_text}}
}}{{Csp sidebar item
|Label=DateInputTwo
|Value=<input type="datetime-local" name="DateInputTwo" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo|_text}}" />
}}
<div class='alert alert-danger'>No template defined in parameter definitions</div>{{Csp sidebar item
|Label=<label for="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" >CheckboxInput</label>
|Value=<input type="hidden" name="CheckboxInput" value="" />
<input type="checkbox" id="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" name="CheckboxInput" value="Yes" checked="{{#ifeq:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput|_text}} |Yes|checked}}" />
}}
{{Csp sidebar item
|Label=TextAreaInput
|Value=<input type="textarea" name="TextAreaInput" class="form-control" >{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput|_text}}</input>
}}
{{Csp sidebar item
|Label=NumberInput
|Value=<input type="number" name="NumberInput" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput|_text}}" />
}}
{{Csp sidebar item
|Label=SelectInput
|Value=<select name="SelectInput" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TokenMultipleInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenMultipleInput}} }}" name="TokenMultipleInput[]" class="form-control" multiple="multiple" selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Csp sidebar item
|Label=TestNoDisplay
|Value=<input type="text" name="TestNoDisplay" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TestNoDisplay|_text}}" />
}}
<div class="text-right">
<label for="sidebar-view" class="btn btn-secondary">Close</label>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
|}}
</div>
</syntaxhighlight>

DevOps:Doc/Open CSP/2.0/Class definition customization options

2023-10-05T08:57:34Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

In '''Open CSP 2.0''' the default sidebar was added, this allows you to have sidebars without having to create custom sidebar templates for each class definition. There are some customization options built into the default sidebar as well. It is recommended to use these customization options when possible and to only create fully custom sidebar templates when absolutely necessary, as the fully custom sidebar templates require a lot more maintenance work when for example some parserfunctions get deprecated or changed. This document describes the various customization options.

== Parameters and formfield/display templates ==
* Edit parameters on a class definition page, to configure what will show up on your sidebar.
* Note that the parameter configuration is also used for setting properties, but you can use "(none)" as property name value if you don't want to set a property.
* Only the "parameter name" field is required. When you only fill this, you will get default text fields in the sidebars.
* Choose a displayTemplate to configure how a parameter is displayed in the view tab of the default sidebar.
* Choose a formfieldTemplate to configure what type of form field is used in the edit tab of the default sidebar.
* DisplayTemplate and formfieldTemplate can both be set to "(none)" to not have a parameter show up in respectively the view and edit tabs of the default sidebar.

== Custom formfield/display templates ==
* It is possible to add custom template names in the displayTemplate and formfieldTemplate fields.
* All fields that are filled for a parameter will be passed to the templates so they can be accessed through template parameters there. For example you can use <nowiki>{{{allowedValues|}}}</nowiki> in a formfieldTemplate. It might be useful to look at the csp-data slot of the class definition to see all of the parameters.
* The values of parameters on a content page are also passed to the display/formfield templates as the "value" parameter.
* In a display/formfield template you cannot access values of other parameters directly, but you can do this by using <nowiki>{{#invoke:CspFunctions|getParentArgs|$pageData}}</nowiki>, which will return the $pageData parameter that is used in '''Template:Csp default sidebar''' (and contains an [[mediawikiwiki:Extension:ArrayFunctions|ArrayFunctions]] export with slotdata of the page).
* It is possible to add fields to the json data in the csp-data slot that cannot be filled through the parameters form. For example Open CSP 2.0 does not yet include the option to specify a placeholder for your formfields, but you can add placeholder to the json data and then use <nowiki>{{{placeholder|}}}</nowiki> in a custom formfieldTemplate.

== Custom sidebar template where you are adding to the default sidebar ==
In many cases you won't necessarily want to replace the default sidebar, but you may want to add another card above or below it with additional functionality. It is possible to use the default sidebar within a custom sidebar template. For example like the following code snippet:<syntaxhighlight lang="wikitext">
{{Csp default sidebar
|$pageData={{{$pageData|}}}
|$classData={{{$classData|}}}
}}

{{Csp sidebar tabs
|id=another-card
|canEdit=yes
|closeButton=
|title=Another card
|subTitle=Below the default sidebar
|view=<div class="card-body">viewtab content</div>
|edit=<div class="card-body">edittab content</div>
}}
</syntaxhighlight>

== Fully custom sidebar template ==
In a fully custom sidebar template you can do anything you want. You will still get the $pageData and $classData parameters passed to this template so you can use those. The following is an example of custom sidebar code that will produce a sidebar similar to the default one, perhaps this will give you some ideas for what's possible:

<syntaxhighlight lang="html">
<div class="tab-content"><input type="radio" id="sidebar-view" name="toggle-sidebar" checked="checked" class="d-none sidebar-view" /><div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<span style="float:right"><label for="sidebar-edit" class="btn btn-secondary">Edit</label></span>}}
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
{{Sidebar item
|Label=Title
|Value={{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title |_text}}
}}{{Sidebar item
|Label=TextInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput |_text}}
}}{{Sidebar item
|Label=TokenInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput |_text}}
}}{{Sidebar item
|Label=AskTokenInput
|Value={{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput |_text}}|,}}|@@|[[{{{@@}}}|{{#show:{{{@@}}}|?Title}}]]}}|<br>}}
}}{{Test date display
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput |_text}}
}}
{{Sidebar item
|Label=DateInputTwo
|Value={{#if:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} |{{#time: j M Y H:i |{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} }} }}
}}{{Sidebar item
|Label=TextInputTwo
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInputTwo |_text}}
}}{{Sidebar item
|Label=CheckboxInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput |_text}}
}}{{Sidebar item
|Label=TextAreaInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput |_text}}
}}{{Sidebar item
|Label=NumberInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput |_text}}
}}{{Sidebar item
|Label=SelectInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput |_text}}
}}{{Sidebar item
|Label=TokenMultipleInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput |_text}}
}}</div>
</div>{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<input type="radio" id="sidebar-edit" name="toggle-sidebar" class="d-none sidebar-edit" /><div class="card sidebar-edit-tab"><div class="card-header"><span style="float:right"><label for="sidebar-view" class="btn btn-secondary" >Close</label></span>
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
<form><_edit target="{{PAGEID}}" template="Base properties" formfield="Title" mwslot="csp-base-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="AskTokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="CheckboxInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextAreaInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="NumberInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="SelectInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenMultipleInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TestNoDisplay" mwslot="csp-class-props" />
{{Sidebar item
|Label=Title
|Value=<input type="text" name="Title" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}" />
}}
{{Sidebar item
|Label=TextInput
|Value=<input type="text" name="TextInput" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput|_text}}" />
}}
{{Sidebar item
|Label=TokenInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenInput}} }}" name="TokenInput[]" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput|_text}}" options="Ay,Bee,Cee" />
}}
{{Sidebar item
|Label=AskTokenInput
|Value=<_token id="token-{{lc:{{anchorencode:AskTokenInput}} }}" name="AskTokenInput[]" class="form-control" required="required" multiple="multiple" input-length-trigger="1" query="[[Class::+]][[Title::!!!]](limit=999)(returntext=Title)" >
{{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput|_text}} }} |$value|<option value="{{{$value}}}" selected="selected">{{#show:{{{$value}}}|?Title}}</option>}}|\n}}
</_token>
}}
{{Test date formfield
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput|_text}}
}}{{Sidebar item
|Label=DateInputTwo
|Value=<input type="datetime-local" name="DateInputTwo" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo|_text}}" />
}}
<div class='alert alert-danger'>No template defined in parameter definitions</div>{{Sidebar item
|Label=<label for="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" >CheckboxInput</label>
|Value=<input type="hidden" name="CheckboxInput" value="" />
<input type="checkbox" id="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" name="CheckboxInput" value="Yes" checked="{{#ifeq:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput|_text}} |Yes|checked}}" />
}}
{{Sidebar item
|Label=TextAreaInput
|Value=<input type="textarea" name="TextAreaInput" class="form-control" >{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput|_text}}</input>
}}
{{Sidebar item
|Label=NumberInput
|Value=<input type="number" name="NumberInput" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput|_text}}" />
}}
{{Sidebar item
|Label=SelectInput
|Value=<select name="SelectInput" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Sidebar item
|Label=TokenMultipleInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenMultipleInput}} }}" name="TokenMultipleInput[]" class="form-control" multiple="multiple" selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Sidebar item
|Label=TestNoDisplay
|Value=<input type="text" name="TestNoDisplay" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TestNoDisplay|_text}}" />
}}
<div class="text-right">
<label for="sidebar-view" class="btn btn-secondary">Close</label>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
|}}
</div>
</syntaxhighlight>

DevOps:Doc/Open CSP/2.0/Class definition customization options

2023-10-05T08:24:19Z

Ebc16062-dd09-4928-8cf3-821f492b0c44:

In '''Open CSP 2.0''' the default sidebar was added, this allows you to have sidebars without having to create custom sidebar templates for each class definition. There are some customization options built into the default sidebar as well. It is recommended to use these customization options when possible and to only create fully custom sidebar templates when absolutely necessary, as the fully custom sidebar templates require a lot more maintenance work when for example some parserfunctions get deprecated. This document describes the various customization options.

== Parameters and formfield/display templates ==
* Edit parameters on a class definition page, to configure what will show up on your sidebar.
* Note that the parameter configuration is also used for setting properties, but you can use "(none)" as property name value if you don't want to set a property.
* Only the "parameter name" field is required. When you only fill this, you will get default text fields in the sidebars.
* Choose a displayTemplate to configure how a parameter is diaplayed in the view tab of the default sidebar.
* Choose a formfieldTemplate to coinfigure what type of form field is used in the edit tab of the default sidebar.
* DisplayTemplate and formfieldTemplate can both be set to "(none)" to not have a parameter show up in respectively the view and edit tabs of the default sidebar.

== Custom formfield/display templates ==
* It is possible to add custom template names in the displayTemplate and formfieldTemplate fields.
* All fields that are filled for a parameter will be passed to the templates so they can be accessed through template parameters there. For example you can use <nowiki>{{{allowedValues|}}}</nowiki> in a formfieldTemplate. It might be useful to look at the csp-data slot of the class definition to see all of the parameters.
* The values of parameters on a content page are also passed to the display/formfield templates as the "value" parameter.
* In a display/formfield templates you cannot access values of other parameters directly, but you can do this by using <nowiki>{{#invoke:CspFunctions|getParentArgs|$pageData}}</nowiki>, which will return the $pageData parameter that is used in '''Template:Csp default sidebar''' (and contains an ArrayFunctions export with slotdata of the page).
* It is possible to add fields to the json data in the csp-data slot that cannot be filled through the parameters form. For example CSP 1.8.0 does not yet include the option to specify a placeholder for your formfields, but you can add placeholder to the json data and then use <nowiki>{{{placeholder|}}}</nowiki> in a custom formfieldTemplate.

== Custom sidebar template where you are adding to the default sidebar ==
In many cases you won't necessarily want to replace the default sidebar, but you may want to add another card above or below it with additional functionality. It is possible to use the default sidebar within a custom sidebar template. For example like the following code snippet:<syntaxhighlight lang="wikitext">
{{Csp default sidebar
|$pageData={{{$pageData|}}}
|$classData={{{$classData|}}}
}}

{{Csp sidebar tabs
|id=another-card
|canEdit=yes
|closeButton=
|title=Another card
|subTitle=Below the default sidebar
|view=<div class="card-body">viewtab content</div>
|edit=<div class="card-body">edittab content</div>
}}
</syntaxhighlight>

== Fully custom sidebar template ==
In a fully custom sidebar template you can do anything you want. You will still get the $pageData and $classData parameters passed to this template so you can use those. The following is an example of custom sidebar code that will produce a sidebar similar to the default one, perhaps this will give you some ideas for what's possible:

<syntaxhighlight lang="html">
<div class="tab-content"><input type="radio" id="sidebar-view" name="toggle-sidebar" checked="checked" class="d-none sidebar-view" /><div class="card sidebar-view-tab">
<div class="card-header">{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<span style="float:right"><label for="sidebar-edit" class="btn btn-secondary">Edit</label></span>}}
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
{{Sidebar item
|Label=Title
|Value={{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title |_text}}
}}{{Sidebar item
|Label=TextInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput |_text}}
}}{{Sidebar item
|Label=TokenInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput |_text}}
}}{{Sidebar item
|Label=AskTokenInput
|Value={{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput |_text}}|,}}|@@|[[{{{@@}}}|{{#show:{{{@@}}}|?Title}}]]}}|<br>}}
}}{{Test date display
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput |_text}}
}}
{{Sidebar item
|Label=DateInputTwo
|Value={{#if:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} |{{#time: j M Y H:i |{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo |_text}} }} }}
}}{{Sidebar item
|Label=TextInputTwo
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInputTwo |_text}}
}}{{Sidebar item
|Label=CheckboxInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput |_text}}
}}{{Sidebar item
|Label=TextAreaInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput |_text}}
}}{{Sidebar item
|Label=NumberInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput |_text}}
}}{{Sidebar item
|Label=SelectInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput |_text}}
}}{{Sidebar item
|Label=TokenMultipleInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput |_text}}
}}</div>
</div>{{#ifeq:{{#ifingroup:user |{{#if:{{#urlget:veaction}}{{#urlget:action}}||yes}} }}|yes |<input type="radio" id="sidebar-edit" name="toggle-sidebar" class="d-none sidebar-edit" /><div class="card sidebar-edit-tab"><div class="card-header"><span style="float:right"><label for="sidebar-view" class="btn btn-secondary" >Close</label></span>
<b class="d-block">{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Class|_text}}</b>
{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}
</div>
<div class="card-body">
<form><_edit target="{{PAGEID}}" template="Base properties" formfield="Title" mwslot="csp-base-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="AskTokenInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="DateInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextInputTwo" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="CheckboxInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TextAreaInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="NumberInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="SelectInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TokenMultipleInput" mwslot="csp-class-props" />
<_edit target="{{PAGEID}}" template="Csp class properties" formfield="TestNoDisplay" mwslot="csp-class-props" />
{{Sidebar item
|Label=Title
|Value=<input type="text" name="Title" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-base-props|Base properties|1|Title|_text}}" />
}}
{{Sidebar item
|Label=TextInput
|Value=<input type="text" name="TextInput" class="form-control" required="required" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextInput|_text}}" />
}}
{{Sidebar item
|Label=TokenInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenInput}} }}" name="TokenInput[]" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenInput|_text}}" options="Ay,Bee,Cee" />
}}
{{Sidebar item
|Label=AskTokenInput
|Value=<_token id="token-{{lc:{{anchorencode:AskTokenInput}} }}" name="AskTokenInput[]" class="form-control" required="required" multiple="multiple" input-length-trigger="1" query="[[Class::+]][[Title::!!!]](limit=999)(returntext=Title)" >
{{#af_join:{{#af_map:{{#af_split:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|AskTokenInput|_text}} }} |$value|<option value="{{{$value}}}" selected="selected">{{#show:{{{$value}}}|?Title}}</option>}}|\n}}
</_token>
}}
{{Test date formfield
|Name=DateInput
|Value={{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInput|_text}}
}}{{Sidebar item
|Label=DateInputTwo
|Value=<input type="datetime-local" name="DateInputTwo" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|DateInputTwo|_text}}" />
}}
<div class='alert alert-danger'>No template defined in parameter definitions</div>{{Sidebar item
|Label=<label for="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" >CheckboxInput</label>
|Value=<input type="hidden" name="CheckboxInput" value="" />
<input type="checkbox" id="checkbox-{{lc:{{anchorencode:CheckboxInput}} }}" name="CheckboxInput" value="Yes" checked="{{#ifeq:{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|CheckboxInput|_text}} |Yes|checked}}" />
}}
{{Sidebar item
|Label=TextAreaInput
|Value=<input type="textarea" name="TextAreaInput" class="form-control" >{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TextAreaInput|_text}}</input>
}}
{{Sidebar item
|Label=NumberInput
|Value=<input type="number" name="NumberInput" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|NumberInput|_text}}" />
}}
{{Sidebar item
|Label=SelectInput
|Value=<select name="SelectInput" class="form-control" allowclear selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|SelectInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Sidebar item
|Label=TokenMultipleInput
|Value=<_token id="token-{{lc:{{anchorencode:TokenMultipleInput}} }}" name="TokenMultipleInput[]" class="form-control" multiple="multiple" selected="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TokenMultipleInput|_text}}" options="Alpha,Bravo,Charlie" />
}}
{{Sidebar item
|Label=TestNoDisplay
|Value=<input type="text" name="TestNoDisplay" class="form-control" value="{{#af_get:{{{$pageData}}}|csp-class-props|Csp class properties|1|TestNoDisplay|_text}}" />
}}
<div class="text-right">
<label for="sidebar-view" class="btn btn-secondary">Close</label>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
|}}
</div>
</syntaxhighlight>

Property:Meeting type

2023-09-14T07:42:49Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Created page with "Has type::Text"

[[Has type::Text]]

Property:Meeting chair

2023-09-14T07:42:44Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Created page with "Has type::Text"

[[Has type::Text]]

Property:Attendees

2023-09-14T07:42:39Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Created page with "Has type::Text"

[[Has type::Text]]

Property:Absentees

2023-09-14T07:42:33Z

Ebc16062-dd09-4928-8cf3-821f492b0c44: Created page with "Has type::Text"

[[Has type::Text]]