CSP Wiki - User contributions [en]

DevOps:Doc/FlexForm/1.0/create

2022-08-03T12:00:16Z

Slot migration: Slot migration

===Name===
_create
===Type===
_create
===Synopsis===
Using a form to create new pages or overwrite existing pages
===Description===
_create can be defined as part of a form to have new page(s) created on form submit or overwrite (an) existing page(s).
===Parameters===
'''_create'''

'''mwtemplate''' = Name of a template to use as content for the new page. If you have a form with only one input element you can also use mwtemplate="wsnone". This will take the content of the form input element and make it the source content of the new page (without putting it inside a template).

'''mwwrite''' = Full name of the target page

'''mwfollow''' = Will send the user to the newly create page after for submission

'''mwoption''' can hold three different values:

* "'''add_random'''" = Create random numbers
* "'''next_available'''" = Get the next available number. If mwwrite is : "orders/", this option will find the highest orders number (e.g. orders/192) and will create a page with one number higher (e.g. orders/193)
* "'''range:'''" = Get the next available free slot in a range of numbers. If mwwrite is : "orders/", this option will find the first free spot in a range of numbers. If mwoption="range:2019000-2019999" and mwwrite="orders/" then FlexForm will start looking for a page called orders/2019000. If exists it will look for orders/2019001 etc.. till the first free page is found.

'''mwleadingzero''' can be used in combination with range. When a range is set like 1-99999 using mwleadingzero will use the length of the end range and use it to fill the start range with leading zeros, making the range from 00001-99999.

'''mwfields''' = comma separated names of form elements that need to be included. Only works when using multiple _create.

If you are creating multiple pages and want to re-assign form fields to template variables, you still add the form field name to mwfields, but add "'''::'''" and then the name of the template variable. So if you want to tell mwfields to use formfield "'''name2'''", but add it to the template as "'''Name'''", add : "'''name2::Name'''" to mwfields.

'''mwslot''' = name of a specific content slot to use.

'''nooverwrite''' = when this is set, no create will be done for a page that already exists. Even if you are creating a new slot for a page that already exist.

There are several ways for creating a page with FlexForm.

# Easiest Use mwtemplate and mwwrite as described above (and optionally wsfollow, wsoption, etc) This will use the values of mwtemplate and mwwrite and any form elements the current for has and create a new page with template "mwtemplate" and title of "mwwrite". See example 1.
# More advanced and possibilities Use mwtemplate and mwwrite with more options than described above (and optionally wsfollow, wsoption, etc) mwwrite can use can use other elements in the form and use those values to create a title for a new page. Field names can be added using square brackets. So if a form also has a text input field of "title" mwwrite could be "[title]". [mwrandom] can also be used e.g. mwwrite="[title]/[mwrandom]". See example 2.
# Create multiple pages with one form and control what form elements are used. This is where mwfields comes in. This is a comma separated list of form elements that will be used to create the new page. If a form has 15 text input fields, then using _create will include all 15 (filled-in by user) elements in the new page. Using mwfields you can tell _create specifically what form element to use to create a new page. So, when creating multiple new pages with one form, mwfields should be used with any and all _create. See example 3.
# Create a new page and fill different content slots for that page. You have to give the definition of the first _create an id. The other _create elements reference the first _create with a mwwrite like mwwrite="::id::<idOfWSCreateWithID>". See example 4.

===Example===
Example 1 : Create a new page with the next available number
<syntaxhighlight lang="html">
<_create mwwrite="orders/" mwtemplate="Order" mwoption="next_available" />
</syntaxhighlight>
Create a new page with the next available number in a range and always start from the beginning
<syntaxhighlight lang="html">
<_create mwwrite="orders/" mwtemplate="Order" mwoption="range:2019000:2019999" />
</syntaxhighlight>
Random number
<syntaxhighlight lang="html">
<_create mwwrite="Proj-solution:" mwoption="add_random" mwtemplate="Solution" />
</syntaxhighlight>

Example 2 : Create from text, mwrandom and fieldvalues
<syntaxhighlight lang="html">
<_create mwwrite="Proj-solution:[namefield]/[mwrandom]" mwtemplate="Solution" />
</syntaxhighlight>

Example 3 : Create from text and field values and only include specific form element names in the new template
<syntaxhighlight lang="html">
<_create mwwrite="Proj-solution:[namefield]/Personal" mwtemplate="Personal" mwfields="naam, adres, straat, plaats" />
<_create mwwrite="Proj-solution:[namefield]/Business" mwtemplate="Business" mwfields="Company, cadres, cstraat, cplaats" />
</syntaxhighlight>

Example 4 : Create a page with title : Test/[title]. With no main content and a template of Structured data with an argument of Hello in slot:mds-metadataslot". At the same time content slot "mds-metadataslot2" get the same template with argument Hello2.
<syntaxhighlight lang="html">
<_create id="testingSlot" mwwrite="Test/[title]" mwtemplate="Structured data" mwfollow mwfields="Hello" mwslot="mds-metadataslot" />
<_create mwwrite="::id::testingSlot" mwtemplate="wsnone" mwfields="Hello2" mwslot="mds-metadataslot2" />
</syntaxhighlight>

===Note===
If you create a page from text, mwrandom and field values and also add mwoption="add_random", another random number will be added to the end of the page title.

You can have multiple instances of _create in a form, as long as mwfields is an argument with every _create.
If you have multiple _create and they all have a mwfollow, the last _create in the list will be followed.
===Links===
https://www.mediawiki.org/wiki/Multi-Content_Revisions

DevOps:Doc/FlexForm/1.0/Form options

2022-08-03T12:00:16Z

Slot migration: Slot migration

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

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

See example 2
<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''' ====

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

''Note: reCAPTCHA v3 will not work when submitting the form through AJAX (mwidentifier="ajax")''<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 '''interval''', on '''change''' or '''both'''.

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''': WSForm will look for all elements that have a class name starting with "tinymce", as suggested by TinyMCE.

When using ''auto'' or ''oninterval'' 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.

====== 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 action="addToWiki" id="unique id per form" autosave=""></_form>
</syntaxhighlight>

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

Set autosave to change only :
<syntaxhighlight lang="html">
<_form action="addToWiki" id="unique id per form" autosave="onchange"></_form>
</syntaxhighlight>
'''Note: A form needs to have an unique identifier set by its id'''
<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 action="addToWiki" setwikicomment="Edit user preference form" >
Your flexform elements here
</_form>
</syntaxhighlight>

<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 action="addToWiki" extension="<name of your extension" >
Your flexform elements here
</_form>
</syntaxhighlight>

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

===Note===

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

DevOps:Doc/FlexForm/1.0/instance

2022-08-03T12:00:16Z

Slot migration: Slot migration

===Name===
_instance
===Type===
_instance
===Synopsis===
Add or remove defined instances to a form
===Description===
With '''_instance''' you can define a part of a form as an instance that can be added or removed by the user (in a way add more rows to submit more information).

====== How it works ======
'''_instance''' holds a list of parameters that define the usage of the instance.

First you define what template on a page it needs to edit ('''template-parent''') and what parameter of that template needs to be edited ('''name''').

The idea is that the '''name''' attribute will hold multiple templates. That template is defined with the '''template''' parameter.

If you leave out anything else, FlexForm will render the instance based on the default Wikibase Solutions setup. (default settings listed with the parameters).

All the other parameters are described below.
===Parameters===
'''template-parent'''

Main template to edit on a page
<hr>
'''name'''

Name of the parameter to edit with the template-parent. Fields inside the instance cannot have the same name as this parameter.
<hr>
'''template'''

Name of the template to put inside parameter name.
<hr>
'''default-content'''

Allows to fill the instanced textarea with default content. Note: When a page contains text default content will always be overwritten.
<hr>
'''button-add'''

Main class for the button add instance. This is a class name that triggers the add instance.
default WSmultipleTemplateAddAbove
You can set this to none to not add this option at all
<hr>
'''button-add-extra'''

Extra class that can be added to the button for styling
default wsform-instance-add-btn
If you want no extra class then use button-add-extra="none"
<hr>
'''button-remove'''

Main class for the button remove instance. This is the class name that triggers the remove instance.

default '''WSmultipleTemplateDel'''

You can set this to none to not add this option at all
<hr>
'''button-remove-extra'''

Extra class that can be added to the button for styling

default '''wsform-instance-remove-btn'''

If you want no extra class then use button-remove-extra="none"
<hr>
'''button-move'''

Main class for the move instance button. This is the class name that trigger a move instance.

default '''ws-sortable-handles'''

You can set this to none to not add this option at all
<hr>
'''button-move-extra'''

Extra class that can be add to the button for styling

default '''wsform-instance-move-handle'''

If you want no extra class then use button-move-extra="none"
<hr>
'''add-button-on-bottom'''

Button below instance to add an add button. Value is text in the button

Use a value of "none" to disable this button

default '''empty'''
<hr>
'''button-on-bottom-class'''

Class for the button below the instance. Defaults to WSmultipleTemplateAddAbove
<hr>
'''wrapper-instance'''

div wrapper for the defined instance.

default '''WSmultipleTemplateMain'''
<hr>
'''wrapper-main'''

main div wrapper for all instances

default '''WSmultipleTemplateMain'''
<hr>
'''wrapper-main-extra'''

Extra class to add styling to the instances.

default '''wsform-instance-record'''
<hr>
'''instance-storage'''

class for the textarea to store instance information

default '''WSmultipleTemplateField'''
<hr>
'''instance-list'''

Class name for the wrapper for the list of instances

default '''WSmultipleTemplateList'''

===Example===
<syntaxhighlight lang="html">
<_form action="addToWiki">
<_edit target="{{PAGEID}}" template="Log" formfield="Hours spent today" />
<_instance
template-parent="Log"
template="Hours spent"
name="Hours spent today"
>
<div class="test">
<_input type="text" name="Task" placeholder="Task" />
</div>
</_instance>
<_input type="submit" />
</_form>
</syntaxhighlight>
<_form action="addToWiki">
<_edit target="{{PAGEID}}" template="Log" formfield="Hours spent today" />

<_instance
template-parent="Log"
template="Hours spent"
name="Hours spent today"
>
<div class="test">
<_input type="text" name="Task" placeholder="Task" />
</div>
</_instance>

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

'''Note:'''

'''Using instances default content together with Tokens and a SMW query'''

When using this combination, usually the value of a token has been saved and is put inside the default content. When rendering the instances, FlexForm will try to do a query to look-up the label that is attached to the value of the token.

Example : Say the Token-field is used to find certain pages with certain Semantic properties. In most cases the token visually shows the Display title of a query while the value of the token is the exact page Title and that is also the value that will be stored.

When rendering instances with previous saved page titles, FlexForm Tokens does not have the appropriate label to show for the token, in this case the Displaytitle. FlexForm will then analyze the SMW query attached to the token and try to get the SMW property as a label. In this case, the Displaytitle.

DevOps:Doc/FlexForm/1.0/ShowOnSelect

2022-08-03T12:00:15Z

Slot migration: Slot migration

===Name===
showonselect
===Type===
_form
===Synopsis===
Show or hide elements based on a form input change
===Description===
This allows to show elements in a form based on a selection option, a checkbox status or radio button status.

You can create a complete form with certain form elements hidden based on a selection in the form done by a user.
===Parameters===
'''show-on-select on the _form tag'''

For it all to work you must let FlexForm know you want to use Show On Select by adding a parameter to the _form tag. '''See example 1'''.
<hr>
'''show-on-select on a select field'''

The actual show-on-select attribute is added to an option field within a select field.
The value of show-on-select will be used to show a show-on-select-trigger with the same name. '''See example 2'''.

This will show an additional text input field with the name texttest1 when you select option 1 and texttest2 will be hidden. When option 2 is chosen, then texttest2 will be shown and texttest1 hidden.
<hr>
'''show-on-checked on a radio button'''

'''Example 3''' shows you can also add a show-on-select-trigger to something different than a FlexForm _input field.
The example will hide the div with the trigger until the radio button is checked.
<hr>
'''show-on-checked on a checkbox and show-on-unchecked on a checkbox'''

'''Example 4''' show an example of how to use show-on-checked for a checkbox field.
Checkboxes can have an additional option called show-on-unchecked. So, in the example, if a checkbox is unchecked it will show test B and hide test A. If the checkbox is checked it wish show test A and hide test B

===Example===
Example 1 : Show or hide elements based on a form input change
<syntaxhighlight lang="html">
<_form action="addToWiki" show-on-select="show-on-select">
</_form>
</syntaxhighlight>

Example 2 : show-on-select on a select field
<syntaxhighlight lang="html">
<_form action="addToWiki" show-on-select="show-on-select" >
<_select name="selectme" id="selectme" >
<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
<_input type="option" for="selectme" show-on-select="testingId" value="2">2</_input>
<_input type="option" for="selectme" show-on-select="testingId3" value="3">3</_input>
</_select>
<_input type="text" show-on-select-trigger="testingId" name="texttest1" value="2" />
<_input type="text" show-on-select-trigger="testingId2" name="texttest2" value="1" />
</_form>
</syntaxhighlight>
<_form action="addToWiki" show-on-select="show-on-select" >
<_select name="selectme" id="selectme" >
<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
<_input type="option" for="selectme" show-on-select="testingId" value="2">2</_input>
<_input type="option" for="selectme" show-on-select="testingId3" value="3">3</_input>
</_select>
<_input type="text" show-on-select-trigger="testingId" name="texttest1" value="2" />
<_input type="text" show-on-select-trigger="testingId2" name="texttest2" value="1" />
</_form>

Example 3 : show-on-checked on a radio button
<syntaxhighlight lang="html">
<_form action="addToWiki" show-on-select="show-on-select">
<_input type="radio" show-on-checked="tester"/>
<div show-on-select-trigger="tester">
test checked
</div>
</_form>
</syntaxhighlight>
<_form action="addToWiki" show-on-select="show-on-select">
<_input type="radio" show-on-checked="tester"/>
<div show-on-select-trigger="tester">
test checked
</div>
</_form>

Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.
<syntaxhighlight lang="html">
<_form action="addToWiki" show-on-select="show-on-select" >
<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
<div show-on-select-trigger="test A">test checked</div>
<div show-on-select-trigger="test B">test unchecked</div>
</_form>
</syntaxhighlight>
<_form action="addToWiki" show-on-select="show-on-select" >
<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
<div show-on-select-trigger="test A">test checked</div>
<div show-on-select-trigger="test B">test unchecked</div>
</_form>
===Note===
Form fields that are in a hidden section will not be submitted together with the form!
===Links===

DevOps:Doc/FlexForm/1.0/input/file

2022-08-03T12:00:15Z

Slot migration: Slot migration

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

'''pagecontent ''': Text content to be added on the File Page

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

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

=== 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 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 action="addToWiki" >
<_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.'''

===Examples===
==== Example 1 ====
<syntaxhighlight lang="html">
<_input type="file" id="file-upload" 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 action="addToWiki" enctype="multipart/form-data" >
<_input type="file" id="file-upload" 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 action="addToWiki" enctype="multipart/form-data" >
{{#tag:_input ||type=file |id=file-upload |target=picture-[mwrandom] |parsecontent=true |pagecontent=<nowiki>{{Uploaded file
|Uploaded from page=</nowiki>{{FULLPAGENAME}}<nowiki>
|Uploaded by=</nowiki>{{CURRENTLOGGEDUSER}}<nowiki>
|Comment=[Comment]
}}</nowiki>
}}
<_input type="text" name="Comment" placeholder="Comment" />
<_input type="submit" value="upload" />
</_form>

</syntaxhighlight>

===Note===
A '''_input type="file"''' always needs a unique ID!

===Links===

DevOps:Doc/PageSync/1.5/Share pages

2022-08-03T12:00:15Z

Slot migration: Slot migration

With PageSync you can also select pages or files and create a '''PageSync Share File''' from them.

A '''PageSync share file''' can be used on another Wiki with PageSync installed and have those pages or files be installed there.

The big difference with the Backup option is that you can choose what pages or files will be included based on tags. Also restoring a backup on another Wiki will add the contents to PageSync to monitor them as well. Restoring a '''PageSync Share''' option only adds the pages or files to a wiki once. Therefore a '''PageSync share file''' could be used to install a set of templates, widgets, pages and files to add functionality to your wiki.

If you navigate to the PageSync Special page and click on the SHARE tab you will see an overview of the shared files you have created if you already have any.

This page allows for you to download a PageSync Share file or delete it from your server. There are also two button to create a new PageSync Share file or install a PageSync Share file.

[[File:Screenshot PageSync Share page.png|alt=Screenshot PageSync Share page|none|thumb|600x600px|PageSync Share page]]

<hr>
==== Install a PageSync Shared File ====
[[File:Screenshot PageSync Install PageSync Share file screen.png|alt=Install PageSync Share file screen|thumb|600x600px|Install PageSync Share file screen]]

Installing a set of pages through a '''PageSync Share file''' is done by sharing the URL where the ZIP file can be downloaded.

On this screen you can type the download URL. This can be e.g. a github link.

When you enter the URL and click the download and preview button, PageSync will check if the file is valid and will take you to the next page where you can view details information on the '''PageSync Share File'''.

[[File:Screenshot PageSync preview ShareFile install.png|alt=Information on the PageSync Share file you are about to install.|left|thumb|600x600px|Information on the PageSync Share file you are about to install.]]

The Preview page will show you all the information available before installing the '''PageSync Share File'''. You also need to agree with the description within the File information.

Once you click the '''INSTALL FILES''' button, PageSync will install all the pages and files that are in the ZIP file.

<hr>
==== Create a PageSync Share File ====
[[File:Screenshot PageSync create PageSync Share File.png|alt=Screenshot PageSync create PageSync Share File|thumb|600x600px|PageSync create PageSync Share File]]

If you click the create the button create a share ZIP file, you will get a new screen where you select pages or files based on their tags.

You have three options there..

* Pages must have all chosen tags
* Pages must have at least one chosen tag
* Ignore tags and select all synced pages

[[File:Screenshot PageSync create share file overview.png|alt=Screenshot PageSync create share file overview|left|thumb|600x600px|PageSync create share file overview]]

After clicking the '''Select and preview pages'''-button you will get an overview of the selected pages and files.

You will also '''need''' to add a Description/Disclaimer to the to be created Share File.

Project, Company and Name are optional. PageSync will always add your name and the name of the Wiki where you are creating the '''PageSync Share file''' from.

This information will be shown when someone wants to install you PageSync Share File.

Once you click on the '''Create share file'''-button, you will go back to the main PageSync Share page with an overview of your '''PageSync Share Files'''.

DevOps:Doc/FlexForm/1.0/input/checkbox

2022-08-03T12:00:14Z

Slot migration: Slot migration

===Name===
checkbox
===Type===
_input
===Synopsis===
How to use checkboxes
===Description===
<code>_input</code> elements of type '''<code>checkbox</code>''' are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).
===Parameters===
_input type="checkbox"

- Extra option '''default'''

''By default, when a checkbox is not checked, it will '''not''' be send with the form. This is standard HTML5 behaviour.''

If you do want a value send with the form if the checkbox is not Clicked, then you can use the "default" parameter.

So the following example will send "Yes" when the checkbox is clicked and "No" when it is not.
_input name="test" value="Yes" default="No" type="checkbox"
Keep in mind that if you use checkboxes as an array of information like in this example :
_input type="checkbox" name="Role[]" default="1" value="organizer" id="organizer-checkbox"
_input type="checkbox" name="Role[]" default="2" value="participant" id="participant-checkbox"
Then using the "default" option will only work if none of the checkboxes have been clicked. '''You should not set a default value per checkbox when they all use the same name'''. If you do (like in the example above) only the last checkbox with a default value will be used if no checkboxes have been checked and the value for Role in this case would be "2".

===Example===
<syntaxhighlight lang="html">
<_input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <_label for="archived-checkbox">Yes, archive this page</_label>
</syntaxhighlight>
<_input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <_label for="archived-checkbox">Yes, archive this page</_label>

<syntaxhighlight lang="html">
<_input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" />
<_label for="organizer-checkbox">Organizer</_label>
<_input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" />
<_label for="participant-checkbox">Participant</_label>
<_input type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /><_label for="contact-checkbox">Contact</_label>
<_input type="checkbox" name="Role[]" value="user" id="user-checkbox" /><_label for="user-checkbox">User</_label>
</syntaxhighlight>
<_input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" /> <_label for="organizer-checkbox">Organizer</_label><br><_input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" /> <_label for="participant-checkbox">Participant</_label><br><_input type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /> <_label for="contact-checkbox">Contact</_label><br><_input type="checkbox" name="Role[]" value="user" id="user-checkbox" /> <_label for="user-checkbox">User</_label>

===Note===
Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

DevOps:Doc/FlexForm/1.0/email

2022-08-03T12:00:14Z

Slot migration: Slot migration

===Name===
_email
===Type===
_email
===Synopsis===
Using a form to send an email
===Description===
FlexForm can send a submitted form as an email. The FlexForm tag needs an action of 'email' for this. All other setting are done through the _email function.

An email is send using an email template. Such an email template can be any page in the Wiki where you define the details for the email.

When sending an email you need certain information:
{| class="wikitable"
|+At form level means this can be set within the Form.
At template level means this is set within the template.
!Name
!Type
!At form level
!At template level
!Mandetory
|-
|To
|email address
|yes
|yes
|yes
|-
|From
|email address
|no
|yes
|yes
|-
|Subject
|text
|yes
|yes
|yes
|-
|Content
|text
|no
|yes
|yes
|-
|CC
|email address
|no
|yes
|no
|-
|BCC
|email address
|no
|yes
|no
|-
|Reply to
|email address
|no
|yes
|no
|-
|Attachment
|Filepath
|no
|yes
|no
|-
|Header
|Wiki Page
|no
|yes
|no
|-
|Footer
|Wiki
|no
|yes
|no
|}
All the elements needed to send an email can be set inside the email template. You can create multiple email templates. You simply tell FlexForm what email template to use in the form. The elements that can be set at form level will override any defined elements in the template.

All form elements that should be send with the email, must be defined in the email template. If you have a _field element of type text and a name of "address" and you want to send this with the email, you have to put the name of the field inside the template with a "$"-sign in front of it( in this case $address). See examples.
===Form Parameters===
'''to''' = recipients email address

'''template''' = Title name of Wiki pages containing the email template

'''subject''' = Subject of the email to be send

=== Template Parameters ===
'''_to''' = recipients email address

'''_from''' = senders email address

'''_subject''' = email subject

'''_cc''' = email address that receives a copy of the email

'''_bcc''' = email address that receives a copy of the email, but not visible to anyone else

'''_replyto''' = email address used when someone replies to the send email

'''_header''' = Title name of Wiki page with the email letterhead

'''_footer''' = Title name of Wiki page with the email footer

'''_html''' = Value can be yes or no, defaults to yes. Whether or not the email should be send as HTML (yes) or plain text (no)

If everything is defined in an email template, then _email would only need the template argument to send an email.

===Example===
<syntaxhighlight lang="html">
<_form action="email">
<_email template="FlexForm_mail_template"></_email>
<_input type="text" name="name" placeholder="Your name" />
<_input type="email" name="email" placeholder="Your email address" />
<_input type="text" name="city" placeholder="City you live" />
<_input type="submit" value="submit your information" />
</_form>

</syntaxhighlight>
Wiki page with title "FlexForm_mail_template"
<syntaxhighlight lang="html">
%_to=$email%
%_bcc=info@wikibase.nl%
%_subject=Form submitted from website by $name%
%_from=info@wikibase.nl%

<p>Dear <strong>$name</strong>,</p>
<p>
Thank you for submitting the form on our website. We have received the following details:</p>
<ul>
<li>Name : $name</li>
<li>Email : $email</li>
<li>City : $city</li>
</ul>
<p>We will contact you shortly</p>
<p>Best regards</p>
</syntaxhighlight>

DevOps:Doc/FlexForm/1.1/Installation of FlexForm

2022-08-03T12:00:14Z

Slot migration: Slot migration

== Installation ==
Grab in instance from https://github.com/WikibaseSolutions/FlexForm.

Create a "'''FlexForm'''" folder in your Wiki extensions folder and extract the files there.

==== Setup ====
You can tweak '''FlexForm''' to an extent in your Localsettings.php<syntaxhighlight lang="php">
$wgFlexFormConfig['secure'] = true; //( default is true ). Will render form that make no sense when inspected in the browser

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

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

$wgFlexFormConfig['auto_save_after_change'] = 3000; // 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_btn_on'] = 'Autosave on'; // text on the autosave button to toggle on

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

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

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

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

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

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

$wgFlexFormConfig['filter_input_tags'] = false; // 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['CreateAndEditForms']['allowedGroups'] = ["sysop","moderator"]; // Defaults to sysop. Only a user in the allowedGroups is able to edit pages with a FlexForm in the source.

$wgFlexFormConfig['CreateAndEditForms']['hideEdit'] = true; // 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['create-seo-titles'] = true; // Defaults to false. Will turn titles given to wscreate into url friendly slugs. Creating only latin character and converting spaces and special characters.

</syntaxhighlight>

==== Finally ====
Add the following line at the end of your LocalSettings.php to enable the extension :<syntaxhighlight lang="php">
wfLoadExtension( 'FlexForm' );
</syntaxhighlight>

==== Notification/Messages ====
'''FlexForm''' has a notification system build in. This is used to show possible errors or success / custom messages.
To enable this.. add to your header page :<syntaxhighlight lang="php">
<_form showmessages />
</syntaxhighlight>

DevOps:Doc/FlexForm

2022-08-03T12:00:14Z

Slot migration: Slot migration

[[File:FlexForm logo.png|frameless]]

'''FlexForm''' is an enhanced HTML5 Form rendering engine.

It renders HTML5 form elements and allows editing or creating one or more pages with one form.

When you are familiar with creating HTML5 forms you will have no problem using '''FlexForm'''.

To get started for the first time, have a look at the get started documentation.

'''FlexForm''' is a complete rewrite from the previous '''WSForm'''.

=== Why FlexForm ===
Currently there are several MediaWiki extensions that help you create Forms for your website.

What makes '''FlexForm''' different from the other extensions, is that it is really flexible. You can create a simple form (or a complex one) on any page and in any namespace.

You do not have to use any special page to setup a form or to render it.

It is also not bound to any kind of styling. This means that a simple form will not look very nice by default, but adding some css styling classes to the form gives you all the freedom in styling the form to any and all your needs. For those who are a bit less stylish, '''FlexForm''' will be supporting MediaWiki OOUI styling in the future by means of Themes.

'''FlexForm''' has Themes support.

'''FlexForm''' is very powerful.

'''One''' singe form can:

* create a page in the Wiki
* create several pages in the Wiki
* can edit a page in the Wiki
* can edit several pages in the Wiki
* can edit Multi Revision Content slots
* can send an email
* can upload a file
* can upload multiple files

Or do a combination of all of the above.

There are also Show on Select options, Multiple instances options and submit a form through Ajax (so the user stays on the page without any reload).

If you still want more features, check the documentation on the right.

=== How is it different from PageForms? ===
Some of the main difference are:

* PageForms will render forms through its Special page. The only exception is the ''autoedit'' parser function that will allow to edit a parameter in a template on a page using Ajax.
* PageForms renders an edit button on a page. With it you can edit Template parameters on a page.
* FlexForm can render a form on any page or render several forms on page. It allows for editing multiple Template parameters on a page or different pages.
* FlexForm will not read the content and template of a page and render an edit form. It does allow for you to create a very simple form that gives you all the freedom to show only relevant information to be edited.
* FlexForm is designed to handle multiple tasks with one form. Create or edit page(s), send an email, upload one or multiple files or a combination.
* FlexForm can be combined with the Chameleon skin and Bootstrap (or with custom js/css) to render forms in a popup, tab or collapsible element to create a more user-friendly experience where editing is part of the same page where you are also displaying information.

DevOps:Doc/FlexForm/1.0/input/signature

2022-08-03T12:00:13Z

Slot migration: Slot migration

===Name===
signature
===Type===
_input
===Synopsis===
How to render a signature field
===Description===
A signature field allows person to add a signature to a form.
===Parameters===
type="signature"

<nowiki>*</nowiki> = means required

'''fname'''*

''type : text''

Name of the file to be placed in the Wiki

'''ftype'''*

''type : text''

Filetype. Either png, svg or jpg

'''pagecontent'''*

''type : text''

The (text-) content that goes on the page when saving to the wiki

'''class'''

''type : text''

Adds an additional CSS class to the signature canvas.

By default the signature canvas will always get class: wsform-signature.

'''clearbuttonclass'''

''type : text''

Adds an additional CSS class to the clear button to clear the canvas.

By default the clear button will always get class: wsform-signature-clear.

'''clearbuttontext'''

''type : text''

Text to be placed in the clear button. Default to Clear.

'''background'''

''type : color. Either hexadecimal, CSS color name or css rgb value''

Background color for the signature field

'''drawcolor'''

''type : color. Either hexadecimal, CSS color name or css rgb value''

Color of the signature pen

'''thickness'''

''type : integer''

Thickness of the signature pen

'''notavailablemessage'''

''type : text''

When a browser does not support the signature canvas, this message will be displayed.

Default message : "Your browser doesn't support signing"

'''guideline'''

''type : text''

Show a horizontal line to guide when writing a signature.

Use guideline="true" is the only way to show the guideline.

Please note that the guideline will be saved together with the signature, unless you choose svg as file type.

Additional guideline option, available when guideline is set to true

- '''guidelineoffset'''

''type: integer''

Offset from the bottom of the canvas

- '''guidelineindent'''

''type: integer''

Margin left and right from the line to the side of the canvas

'''- guidelinecolor'''

''type : color. Either hexadecimal, CSS color name or css rgb value''

Color for the guideline

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="signature" fname="Signature-test" ftype="png" pagecontent="test" guideline="true" clearbuttonclass="btn btn-primary" />
</syntaxhighlight>
<_input type="signature" fname="Signature-test" ftype="png" pagecontent="test" guideline="true" clearbuttonclass="btn btn-primary" />
===Note===
''Only one signature field per form is supported!''
===Links===

DevOps:Doc/PageSync/2.0/Installing PageSync

2022-08-03T12:00:13Z

Slot migration: Slot migration

== Version 2.0 has a major change in its file management. ==

====== When installing version 2.0 you will have to remove all the PageSync files: '''export.index''' and all the files in the '''export folder'''. Alternatively you could set a new path for the PageSync files ( '''$wgPageSync['filePath']''' = ). ======

====== You will then have to add them again to PageSync. ======
Or try to run the '''maintenance''' script with '''--convert-2-version-2'''. This should convert all your files and keep them in PageSync. '''Make a Backup first!'''

== Installation ==
Grab in instance from https://github.com/Open-CSP/PageSync.

Create a "'''PageSync'''" folder in your Wiki extensions folder and extract the files there.

==== Setup ====
'''PageSync''' needs a full path to a directory to store the files that can be synced. e.g. $IP/wspsFiles

This can be set in the localsettings as :
<syntaxhighlight lang="php">
$wgPageSync['filePath'] = $IP . '/wspsFiles';
</syntaxhighlight>

'''PageSync''' also needs a temporary file path to a directory to handle received Share file.
<syntaxhighlight lang="php">
$wgPageSync['tempFilePath'] = $IP . '/wspsTemp';
</syntaxhighlight>

Make sure the folders have the correct rights for '''PageSync''' to store files.

<small><u>It is also a good practice to store these files outside of your html folder. The content of pages are stored as raw wikitext and although you can store synced files in sub folders hidden within the root, they are potentially visible.</u></small>

Files from the File namespace will also be synced.

You can define what slots you want to sync. Default value is all. If you change this value, make sure to add "main" for the main content-slot.
<syntaxhighlight lang="php">
$wgPageSync['contentSlotsToBeSynced'] = "all";
</syntaxhighlight>
or
<syntaxhighlight lang="php">
$wgPageSync['contentSlotsToBeSynced'] = ['main', 'my-content-slot'];
</syntaxhighlight>

==== Finally ====
Add the following line at the end of your LocalSettings.php, or at least after the above configuration setting, to enable the extension :<syntaxhighlight lang="php">
wfLoadExtension( 'PageSync' );
</syntaxhighlight>

Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

If you have the extension AdminLinks installed, you can find a link to PageSync there.

DevOps:Doc/FlexForm/1.1/extensions

2022-08-03T12:00:13Z

Slot migration: Slot migration

'''FlexForm''' can be extended by a PHP function to handle additional tasks after a Form has been submitted.

This can be done with '''FFAfterFormHandling''' MediaWiki Hook. For more information see de Docs on Hooks.

Or using the following method:

Start a FlexForm and tell it to use your extension :<syntaxhighlight lang="html">
<_form action="addToWiki" extension="<name of your extension" >
Your flexform elements here
</_form>
</syntaxhighlight>

Create a folder in <code>FlexForm/src/Modules/Handlers</code> with the name of your extension.

In this folder create a file called <code>PostHandler.php</code> with the following namespace :
<syntaxhighlight lang="html">
namespace FlexForm\Modules\Handlers\< your extension name = same as folder name >;
</syntaxhighlight>

Your extension will be based based on a class PostHandler and will utilize the '''HandlerInterface''' interface and will only hold one method : '''execute'''

<syntaxhighlight lang="php">
class PostHandler implements HandlerInterface {
/**
* @inerhitDoc
*/
public function execute( array $flexFormFields, HandleResponse $responseHandler ): HandleResponse {

}
}
</syntaxhighlight>

The array <code>$flexFormFields</code> will be available and hold all submitted Form elements as '''name->value'''.

If your extension produces an error, throw a '''FlexFormException''' and FlexForm will take care of the rest. ''Make sure to throw a message that with your extension name''.

If your extension has successfully finished its tasks, tell the '''responsehandler''' it has been successful and return the responseHandler :
<syntaxhighlight lang="php">
$responseHandler->setReturnType( HandleResponse::TYPE_SUCCESS );
return $responseHandler;
</syntaxhighlight>

If your extension has successfully finished its tasks and you want to pass additional information to the user :
<syntaxhighlight lang="php">
$responseHandler->setReturnType( HandleResponse::TYPE_SUCCESS );
$responseHandler->setReturnData( string < your message > );
return $responseHandler;
</syntaxhighlight>

==== NOTE: ====
When a FlexForm has the extension tag. FlexForm will first search for the extension in the Handlers folder. If it cannot be found it will run the '''FFAfterFormHandling''' hook.

No error message will be shown if FlexForm cannot find the extension.

DevOps:Doc/FlexForm/1.0/Error-messages

2022-08-03T12:00:13Z

Slot migration: Slot migration

===Name===
Troubles and Error messages
===Type===
_form
===Synopsis===
Common behaviour and list of (error) messages that might occur
===Description===
Tag extensions, like FlexForm, cannot hold any html in its arguments.<syntaxhighlight lang="html">
<_input type="text" value="hello<br>how are you" />
</syntaxhighlight>The above example will simply not be rendered. This is how MediaWiki tags work.

You can use the following syntax, it at least will not break. It is another way of writing tag code.<syntaxhighlight lang="html">
{{#tag:_input||type=text|value=hello<br>how are you}}
</syntaxhighlight>The HTML will be filtered out.

Here's a list of common error messages that might occur, with a brief description of what the problem might be.
{| class="wikitable"
|+
!Message
!Type
!Why
!Possible solutions
|-
|Can not find template
|_email
|shown when the page mentioned in the template cannot be read or parse by the API
|check page name if it exists or not miss-spelled
|-
|not a secure form
|_form
|shown when the sec option is set to true and the form has been manipulated after form submit
|
|-
|Secure fields not complete
|_form
|shown when the sec option is set to true and files with type is secure (not to be manipulated with) are incomplete after a form submit
|
|-
|Did not receive a session token from the form
|_form
|shown when a secure token that is generated by FlexForm did not come with a form submit
|
|-
|Form session expired
|_form
|shown when the time between a form render and the actual submit has taken to long
|Change the config option '''form-timeout-limit''' to a higher number in seconds ( default 7200 secs = 120 mins = 2 hours )
|-
|No return found
|_form
|shown when a form has been submitted but FlexForm cannot find a page to return to after handling the form
|
|-
|no captcha details
|reCaptcha
|shown when a form with a recaptcha has been submitted, but no recaptcha information can be found in the form
|
|-
|No requests
|_form
|shown when a form has been submitted, but FlexForm could not find any valid request
|Usually this means the '''action''' parameter of a form is invalid.
|
|-
|Cannot find user to connect to file upload
|_form
|
|}

===Discord===
You might find a helping hand here as well : https://discord.gg/ehFrPmT

DevOps:Doc/FlexForm/1.1/API/FlexFormBot

2022-08-03T12:00:12Z

Slot migration: Slot migration

===Name===
API
===Type===
FlexFormBot
===Synopsis===
Trigger a FlexForm action.
===Description===
Trigger a FlexForm action. Currently only the email trigger is available.

===Parameters===
'''trigger''' - What function needs to be triggered within FlexForm. This parameter is required.

'''data''' - Extra data needed for the Trigger function. Depends on the trigger action. Please read the manual for more information.

'''title''' - Title needed for the Trigger function. Depends on the trigger action. Please read the manual for more information.

'''token''' - A "'''csrf'''" token retrieved from action=query&meta=tokens. This parameter is required.

====Trigger email====
With this trigger you can send an email, based on the email-template.

The email trigger also needs a title of a page. That page needs to be setup as a full email template. Read the docs "email" on how to setup such a template.

Additionally, you can use the data attribute to add BCC addresses to an email. Format is a JSON

<code>{ "bcc": "Charlot [charlot@wikibase.nl], Ad [ad@wikibase.nl]" }</code>
===Example===
Make a call using the csrf token to the MediaWiki API
<syntaxhighlight>
To = api.php
action = FlexFormBot
trigger = email
title = Email template page
token = <your csrf token>
</syntaxhighlight>

===Return format===
The API result will be in a JSON format. When an error occurs, you will have an error field present where you can read its message.

Example of an error
<syntaxhighlight lang="json">
{
"FlexFormBot": {
"error": {
"message": "The page you specified doesn't exist.",
"request": {
"trigger": "email",
"title": "Email_template_tsest",
"data": null
}
}
}
}
</syntaxhighlight>

Example of success
<syntaxhighlight lang="json">
{
"FlexFormBot": {
"result": {
"request": {
"trigger": "email",
"title": "Email_template_test",
"data": null
},
"message": "success"
}
}
}
</syntaxhighlight>
===Note===
You need to add the csrf token with every request to FlexFormBot

DevOps:Doc/FlexForm/1.0/input/select

2022-08-03T12:00:12Z

Slot migration: Slot migration

===Name===
select (dropdown)
===Type===
_select
===Synopsis===
How to use select with option fields to create a dropdown input
===Description===
The <code>select</code> element is used to create a drop-down list.

The <code>name</code> attribute is needed to reference the form data after the form is submitted (if you omit the <code>name</code> attribute, no data from the drop-down list will be submitted).

The <code>id</code> attribute is needed to associate the drop-down list with a label.

The <code><nowiki><_input type="option"></_input></nowiki></code>tags inside the <code><select></code> element define the available options in the drop-down list.

===Parameters===
<code><nowiki><_select><_input type="option"></_input></_select></nowiki></code>

All other valid HTML5 attributes are allowed
===Example===
<syntaxhighlight lang="html">
<p>Select a car:</p>
<div>
<_select name="car">
<_input type="option" value="volvo">Volvo</_input>
<_input type="option" value="saab">Saab</_input>
</_select>
</div>
</syntaxhighlight>
<div>
<_select name="car">
<_input type="option" value="volvo">Volvo</_input>
<_input type="option" value="saab">Saab</_input>
</_select>
</div>

<syntaxhighlight lang="html">
<div>
<_select name="car-2" placeholder="Select car">
<optgroup label="German">
<_input type="option" value="bmw">BMW</_input>
<_input type="option" value="mercedes" disabled="disabled">Mercedes</_input>
</optgroup>
<optgroup label="French">
<_input type="option" value="renault">Renault</_input>
<_input type="option" value="peugot">Peugot</_input>
</optgroup>
</_select>
</div>
</syntaxhighlight>
<div>
<_select name="car-2" placeholder="Select car">
<optgroup label="German">
<_input type="option" value="bmw">BMW</_input>
<_input type="option" value="mercedes" disabled="disabled">Mercedes</_input>
</optgroup>
<optgroup label="French">
<_input type="option" value="renault">Renault</_input>
<_input type="option" value="peugot">Peugot</_input>
</optgroup>
</_select>
</div>

DevOps:Doc/FlexForm/Change-log

2022-08-03T12:00:12Z

Slot migration: Slot migration

===Changelog===

*1.1.26 : Rendering instances with default content will do a SMW Ask to get the Display property for a token using its value and Query
*1.1.25 : Instance default-content 2 token fix

*1.1.24 : Fixed an issue where select2 tokens callbacks were initiated multiple times. Removed 1.12 J-UI dependency.

*1.1.23 : Another instance update for tokens. Recent changes are now initiated.

*1.1.22 : Instances and textarea fix

*1.1.21 : Fixed Paragraph tag appearing in fieldset

*1.1.20 : Fixed file upload preview and dropzone issues

*1.1.19 : Added wscreate usefield like options. Fixed SMW query results being escaped

*1.1.17 : Fixed autosave with Instances

*1.1.16 : VE error message fix when nog VE loaded.

*1.1.15 : Extended the hook to contain extension name.

*1.1.14 : Create user email is now a system message. Added FFAfterFormHandling Hook.

*1.1.13 : Added extension support

*1.1.12 : Added entity decoding to mwreturn to support &-sign. Fixed multiple instances issue.

*1.1.11 : SEO url's to file upload

*1.1.10 : Added sortable tokens

*1.1.9 : Addendum and SEO setting

*1.1.8 : FileUpload fix

*1.1.7 : Add HTML screenshot upload (canvas)

*1.1.6 : reCaptcha fixed. Rdy to test. https://github.com/WikibaseSolutions/FlexForm/issues/8

*1.1.5 : Fixed slot creation bug

*1.1.4 : Instances changes

*1.1.3 : Added frame parsing for tokens. Form validation was set to input field validations.. Fixed!

*1.1.2 : Fixed no submit on enter per form. Security checksum changes.

*1.1.1 : Added support for anonymous users

*1.1.0 : Email bot api support, create user support, various fixed after refactoring. Added security options. Special note: By default only a sysop can now edit or create a page with FlexForm on it. This can be changed in the settings for FlexForm.

*1.0 : Initial first public release ''Compared to the previous version any File upload method is not supported and will be added in a later version. Rendering of a form has been rewritten to support themes.''

DevOps:Doc/FlexForm/1.0/input

2022-08-03T12:00:12Z

Slot migration: Slot migration

===Name===
_input
===Type===
_input
===Synopsis===
Create various input field using _input
===Description===
_input is like input in HTML, but can differ sometimes.
===Parameters===
All valid HTML attributes can be used, like :

name, value, class, placeholder, required etc..

For possible types you can search the '''FlexForm''' docs for all documentation that starts with _input.

Some examples for types are : text, url, phone, textarea, password, range, checkboxes, radiobutton, email and more.

There are some '''FlexForm''' specific attributes like ''parsepost'' and ''html''.

'''- parsepost''' can be used on e.g. a hidden field where the value holds names of other fields to be switched at post processing. e.g.

This will read the form field value with name "title" and replace [title] in the value of the newtitle field

''TODO: Above needs more details''

'''- html''' attribute allows filtering input fields. The options are :

* "default" which is the same as not adding it at all. It will filter by the HTMLPurifier rules (see link below)
* "all" no filtering will be done (not even XSS hacks)
* "nohtml" means all HTML will be filtered out
* "custom" is used like this : "custom=b,u,i", meaning no html is allowed, except bold, italic and underline

'''- required''' attribute in FlexForm differs from the HTML variant.

When a '''HTML5''' form field has the word "'''required'''" as an attribute, this field will always be required. Even '''required="no"''' will make the field required.

With '''FlexForm''' this needs to be '''required="required"''' for an input field to be required. Only required or required="no" or required="whatever" will not make the field a required field.

Example on how to use required in FlexForm :<syntaxhighlight lang="html">
<_input type="email" name="emailfield" placeholder="This is a placeholder" required="required" />
</syntaxhighlight>

===Example===

===Note===

===Links===

DevOps:Doc/PageSync

2022-08-03T12:00:12Z

Slot migration: Slot migration

[[File:PageSync logo.png|frameless]]

The '''PageSync''' MediaWiki extension allows for storing any wiki page content to a file on the server. Allowing for it be e.g. pushed to git or bitbucket and deployed on another server. The reason for development of PageSync was to have all application artifacts, including templates, forms and other pages in the wiki, under version control.

'''PageSync''' has a maintenance script to import pages from file. This enables automatic deployment of wikis and transfer of content from one wiki to another.

'''PageSync''' is able to sync all Multi Revision Content slots and will also sync Files in the File namespace. Additionally you can save all synced files as a ZIP Archive and exchange the ZIP archive.

Pages that have been added to '''PageSync''' can also be given ''tags'' and ''descriptions''. With these tags you can pick certain pages and files and combine them into one '''PageSync Share file'''. Such a share file can be shared with others that have '''PageSync''' installed and will only install the pages and files inside the Share file without adding them to '''PageSync'''. A one time pages and files instalment.

For more information on installing and usage, please have a look at the documentation.

== Scenario ==
We usually have a developing environment. When developing is done, we push our code to a repository. From there we create a Docker container and we deploy it to a Testing server. From there it is deployed to an Acceptance server and finally to production.

This is all fine with PHP and or JavaScript code, but we also create templates and widgets that are fundamental for it all to work properly.

With '''PageSync''', we can now also push our Templates, Widgets or any important Wiki page to our repository. When deploying a container, the '''PageSync''' maintenance script is automatically run and therefore also updating pages in the Wiki.

DevOps:Doc/PageSync/1.5/Using PageSync

2022-08-03T12:00:11Z

Slot migration: Slot migration

See also the Special page section below.

Basically, if you are a sysop, any page that can be synced will have a slider in the top menu. Click on it and it will turn blue indicating it is synced ( a notification will also be shown ). If the slider is already blue when you visit a page, it simply means the page is already synced and is being monitored for changes. Click the slider again for the page to be excluded from syncing.

== User rights ==
sysop/admins are allowed to set a page to be synced. All other users have no such ability.

== Special Page ==
By default the special page shows a list of all Wiki pages set for syncing.

* From the Special page you can also create, restore and delete ZIP backups. To be able to use '''ZIP Backups''', make sure ZIPArchive is installed on your PHP setup.
* The special page also allows for you to do a '''Semantic MediaWiki Query''' to quickly add certain pages to '''PageSync'''. This feature only works if you have '''''SemanticMediaWiki''''' extension installed.
* Creating '''PageSync Share files''' is also done from the Special page.
* The Special Page also shows all currently synced pages.
* Finally you can also delete all synced pages from the Special page. This will not delete any pages in the Wiki, only the ones stored on the server by '''PageSync'''.

The entry page for the '''PageSync''' Special page will show you a list of all the pages and files that '''PageSync''' is monitoring.

Every listing allows for you to remove the page from '''PageSync''' by clicking it '''SYNC''' slider

The '''Edit button''' allows for adding tags and a description to a page. This is useful if you want to create a '''PageSync''' Share file.

[[File:Screenshot PageSync entry page.png|alt=The entry Special page for PageSync|center|thumb|600x600px|The entry Special page for PageSync]]

DevOps:Doc/FlexForm/1.0/input/radio

2022-08-03T12:00:11Z

Slot migration: Slot migration

===Name===
radio
===Type===
_input
===Synopsis===
How to use radio buttons
===Description===
_input elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options. Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
===Parameters===
_input type="radio"

All other valid HTML5 attributes are allowed
===Example===
<syntaxhighlight lang="html">
<p>Select a maintenance drone:</p>
<div>
<_input type="radio" id="huey" name="drone" value="huey" />
<_label for="huey">Huey</_label>
</div>

<div>
<_input type="radio" id="dewey" name="drone" value="dewey" checked="checked" />
<_label for="dewey">Dewey</_label>
</div>

<div>
<_input type="radio" id="louie" name="drone" value="louie" />
<_label for="louie">Louie</_label>
</div>
</syntaxhighlight>
<p>Select a maintenance drone:</p>
<div>
<_input type="radio" id="huey" name="drone" value="huey" />
<_label for="huey">Huey</_label>
</div>

<div>
<_input type="radio" id="dewey" name="drone" value="dewey" checked="checked" />
<_label for="dewey">Dewey</_label>
</div>

<div>
<_input type="radio" id="louie" name="drone" value="louie" />
<_label for="louie">Louie</_label>
</div>
===Note===
Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

DevOps:Doc/PageSync/1.5/Installing PageSync

2022-08-03T12:00:11Z

Slot migration: Slot migration

== Installation ==
Grab in instance from https://github.com/Open-CSP/PageSync.

Create a "'''PageSync'''" folder in your Wiki extensions folder and extract the files there.

==== Setup ====
'''PageSync''' needs a full path to a directory to store the files that can be synced. e.g. $IP/wspsFiles

This can be set in the localsettings as :
<syntaxhighlight lang="php">
$wgPageSync['filePath'] = $IP . '/wspsFiles';
</syntaxhighlight>

'''PageSync''' also needs a temporary file path to a directory to handle received Share file.
<syntaxhighlight lang="php">
$wgPageSync['tempFilePath'] = $IP . '/wspsTemp';
</syntaxhighlight>

Make sure the folders have the correct rights for '''PageSync''' to store files.

<small><u>It is also a good practice to store these files outside of your html folder. The content of pages are stored as raw wikitext and although you can store synced files in sub folders hidden within the root, they are potentially visible.</u></small>

Files from the File namespace will also be synced.

You can define what slots you want to sync. Default value is all. If you change this value, make sure to add "main" for the main content-slot.
<syntaxhighlight lang="php">
$wgPageSync['contentSlotsToBeSynced'] = "all";
</syntaxhighlight>
or
<syntaxhighlight lang="php">
$wgPageSync['contentSlotsToBeSynced'] = ['main', 'my-content-slot'];
</syntaxhighlight>

==== Finally ====
Add the following line at the end of your LocalSettings.php, or at least after the above configuration setting, to enable the extension :<syntaxhighlight lang="php">
wfLoadExtension( 'PageSync' );
</syntaxhighlight>

Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

If you have the extension AdminLinks installed, you can find a link to PageSync there.

DevOps:Doc/FlexForm/1.1/Hooks

2022-08-03T12:00:11Z

Slot migration: Slot migration

FFAfterFormHandling hook

When FlexForm

* is initiated with an extension
* is finished processing a submit and just before it will set notifications and return to the user

it (FlexForm) will first search for the extension in the extension folder. If it cannot find it, the '''FFAfterFormHandling''' Hook will run.

Allowing people to do additional actions with the information submitted by the Form.
{| class="wikitable"
|+
! colspan="2" |<center>FFAfterFormHandling</center>
|-
| colspan="2" |<center>Available since version 1.1.15</center>
|-
| colspan="2" |<center>Allows final actions on form values before output</center>
|-
|function
|<code>public static function onFFAfterFormHandling( string $external, array $flexFormFields, HandleResponse &$responseHandler ) { ... }</code>
|-
|hook
|<code>$wgHooks['FFAfterFormHandling'][] = 'MyExtensionHooks::onFFAfterFormHandling';</code>
|-
|called from
|<code>FlexForm/src/Processors/Request/External.php. Method: runHook</code>
|}

The string $external will hold the name of the extension that was assigned to the form.

The array <code>$flexFormFields</code> will be available and hold all submitted Form elements as '''name->value'''.

responseHandler function :

on error :

<code>$responseHandler->setReturnType( HandleResponse::TYPE_ERROR );</code>

<code>$responseHandler->setReturnStatus( "Your general error info" );</code>

<code>$responseHandler->setReturnData( "Details information" );</code>

on success you only have to return true. If you want to add a message that FlexForm should show, then you can do the following :

<code>$responseHandler->setReturnType( HandleResponse::TYPE_SUCCESS);</code>

<code>$responseHandler->setReturnData( "Success information" );</code>

'''Always return true;'''

DevOps:Doc/FlexForm/1.0/Installation of FlexForm

2022-08-03T12:00:10Z

Slot migration: Slot migration

DevOps:Doc/FlexForm/1.1/token

2022-08-03T12:00:10Z

Slot migration: Slot migration

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

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

'''allowtags''' = (no value) Allow to create values that do not exist

'''allowsort''' = allow user to sort values (drag and drop selected token). '''Does not work with query source.'''

'''allowclear''' = allow user to clear his selection (for json ajax calls)

'''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

'''callback''' = templateCallBack

'''multiple''' = multiple

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

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

===Links===

DevOps:Doc/FlexForm/1.0/token

2022-08-03T12:00:10Z

Slot migration: Slot migration

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

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

'''allowtags''' = (no value) Allow to create values that do not exist

'''allowclear''' = allow user to clear his selection (for json ajax calls)

'''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

'''callback''' = templateCallBack

'''multiple''' = multiple

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

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

===Links===

DevOps:Doc/FlexForm/1.0/input/submit

2022-08-03T12:00:10Z

Slot migration: Slot migration

===Name===
submit
===Type===
_input
===Synopsis===
How to submit a form
===Description===
To have a form send to the handler it must have a submit button.

_input elements of type "'''submit'''" are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

FlexForm has several ways to submit form.

'''Example 1''' is the traditional way

A user clicks the submit button and the page refreshes or, depending on the form settings, brings the user to e.g. a thank you page.

'''Example 2''' is submitting a Form using Ajax

Meaning the user will stay on the page without the need to reload a page. This can be very handy if a page has several FlexForms that do various tasks.
===Parameters===
_input type="submit"

All other arguments like "class" "id" etc are allowed

===Example===
Example 1
<syntaxhighlight lang="html">
<_input type="submit" value="Send Request" />
</syntaxhighlight>
Example 2
<syntaxhighlight lang="html">
<_input type="submit" value="Send Request" mwidentifier="ajax" />
</syntaxhighlight>
===Note===
When a user clicks on a submit button. FlexForm disables the button (to prevent clicking more than once), will add a class of "wsform-submitting" to the form while it is being submitted and will add a class "wsform-submitted" when it is done (this last class is only relevant for ajax submit).
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit

DevOps:Doc/FlexForm/1.0/input/datetime-local

2022-08-03T12:00:09Z

Slot migration: Slot migration

===Name===
datetime-local
===Type===
_input
===Synopsis===
How to render a date and time input field
===Description===
_input elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

The format of the date and time value used by this input type is YYYY-MM-DDThh:mm.
===Parameters===
type="datetime-local"

All other valid parameters for an input field are valid. Additionally you can use min, max and step.
===Example===
<syntaxhighlight lang="html">
<_label for="meeting-time">Choose a time for your appointment:</_label>
<_input type="datetime-local" id="meeting-time"
name="meeting-time" value="2022-03-01T10:00"
min="2022-03-01T10:00" max="2022-03-01T18:00" />
</syntaxhighlight>
<_label for="meeting-time">Choose a time for your appointment:</_label>
<_input type="datetime-local" id="meeting-time"
name="meeting-time" value="2022-03-01T10:00"
min="2022-03-01T10:00" max="2022-03-01T18:00" />
===Note===
The displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted YYYY-MM-DDThh:mm.

For more information on this input type, see the link below.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

DevOps:Doc/FlexForm/1.0/legend

2022-08-03T12:00:09Z

Slot migration: Slot migration

===Name===
legend
===Type===
legend
===Synopsis===
Title for a _fieldset
===Description===
_legend is always used in combination with _fieldset. It is the title of a fieldset.
===Parameters===
_legend

The title comes between the beginning and end tags (see example).
===Example===
<syntaxhighlight lang="html">
<_form action="get">
<_fieldset>
<_legend class="legend-example">Choose your favorite monster</_legend>
<_input class="legend-example" type="radio" id="kraken" name="monster" />
<_label for="kraken">Kraken</_label><br/>
<_input class="legend-example" type="radio" id="sasquatch" name="monster" />
<_label for="sasquatch">Sasquatch</_label><br/>
<_input class="legend-example" type="radio" id="mothman" name="monster" />
<_label for="mothman">Mothman</_label>
</_fieldset>
</_form>
</syntaxhighlight>
<_form action="get">
<_fieldset>
<_legend class="legend-example">Choose your favorite monster</_legend>
<_input class="legend-example" type="radio" id="kraken" name="monster" />
<_label for="kraken">Kraken</_label><br/>
<_input class="legend-example" type="radio" id="sasquatch" name="monster" />
<_label for="sasquatch">Sasquatch</_label><br/>
<_input class="legend-example" type="radio" id="mothman" name="monster" />
<_label for="mothman">Mothman</_label>
</_fieldset>
</_form>
===Note===
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

DevOps:Doc/FlexForm/1.0/edit

2022-08-03T12:00:09Z

Slot migration: Slot migration

===Name===
_edit
===Type===
_edit
===Synopsis===
Using a form to edit pages that have content with templates.
===Description===
How to edit pages in the wiki with FlexForm
===Parameters===
'''_edit'''

'''target''' = Target page ( title or page id ) that needs to be edited

'''template ''' = Name of the template on the target page that needs to be edited

'''formfield''' = Name of the field in the template. Field in the form should have the same name

'''usefield''' = [optional] If the field in the form differs from the template variable name, you can use "usefield" to let _edit know what other field from the form it should use

'''value''' = [optional] Don't read the value from the form field, but use this value explicitly

'''mwslot''' = [optional] Name of content slot to use

===Example===
<syntaxhighlight lang="html">
<_edit target="pageid" template="template" formfield="formfield" />
</syntaxhighlight>

===Note===

* You can have multiple _edit's in a form all doing different tasks.
* If you have more than 5 edits to one singe page in the wiki, consider [[DevOps:Doc/FlexForm/1.0/create]] to speed-up the process.
* If you omit value, then the value of the form will be used (so what a user has filled in).
===Links===
https://www.mediawiki.org/wiki/Multi-Content_Revisions

DevOps:Doc/FlexForm/1.1/createuser

2022-08-03T12:00:09Z

Slot migration: Slot migration

===Name===
_createuser
===Type===
_createuser
===Synopsis===
Using a form to register a new user in the Wiki
===Description===
_createuser is very powerfull and needs special attention. This option can create a new user in the Wiki. It will create a random password and send the user details to the users email address. A confirm emailaddress email will also be send.

This functionality is disabled by default and can be enabled by setting the <code>$wgFlexFormConfig['can_create_user'] = true;</code> , see [[DevOps:Doc/FlexForm/1.0/Installation_of_FlexForm]].
===Parameters===
'''_createuser'''

'''username''' = [mandatory] The new username to be registered

'''email''' = [mandatory] The email address of the new user

'''realname''' = Optional the real name of the user

===Example===
Create a new user with username adje
<syntaxhighlight lang="html">
<_form action="addToWiki" >
<_createuser username="adje" email="ad@wikibase.nl" realname="Ad Strack van Schijndel" />
<_input type="submit" value="create Adje" />
</_form>
</syntaxhighlight>

===Note===
Make sure that when using this powerful function to have the FlexForm setting "secure" to true for more security. Furthermore, take care where you show such a form.

DevOps:Doc/FlexForm/1.0/input/image

2022-08-03T12:00:09Z

Slot migration: Slot migration

===Name===
image
===Type===
_input
===Synopsis===
A graphiocal submit button
===Description===
_input elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
===Parameters===
type="image"

All other valid parameters for an input field are valid. Additionally you can use min, max, step and list.
===Example===
<syntaxhighlight lang="html">
<_fieldset style="border:1px solid #eee; padding:15px;">
<_legend>Sign in</_legend>
<p>Sign in to your account:</p>
<div>
<_label for="userId">User ID</_label>
<_input type="text" id="userId" name="userId" />
</div>
<_input type="image" id="image" alt="Login"
src="//{{filepath:Login-btn-example.png|nowiki}}" />
</_fieldset>
</syntaxhighlight>
<_fieldset style="border:1px solid #eee; padding:15px;">
<_legend>Sign in</_legend>
<p>Sign in to your account:</p>
<div>
<_label for="userId">User ID</_label>
<_input type="text" id="userId" name="userId" />
</div>
<_input type="image" id="image" alt="Login"
src="{{filepath:Login-btn-example.png|nowiki}}" />
</_fieldset>
===Note===
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

DevOps:Doc/FlexForm/1.0/input/number

2022-08-03T12:00:08Z

Slot migration: Slot migration

===Name===
number
===Type===
_input
===Synopsis===
How to render a number only input field
===Description===
elements of type <code>'''"number"'''</code> are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a <code>step</code> attribute, which takes as its value a number specifying the step amount.

You can use the <code>min</code> and <code>max</code> attributes to specify a minimum and maximum value that the field can have.

===Parameters===
_input type="number"
===Example===
This example accepts only a value between 0 and 10 with steps of 0.01 (e.g. 2.21)
<syntaxhighlight lang="html">
<_input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
</syntaxhighlight>
<_input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
===Note===

===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

DevOps:Doc/FlexForm/1.0/input/button

2022-08-03T12:00:08Z

Slot migration: Slot migration

===Name===
button
===Type===
_input
===Synopsis===
How to render a simple push button
===Description===
Elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function.
===Parameters===
type="button"

All other valid parameters for an input field are valid

'''Specific parameters.'''

For there exact meaning, follow the link in the Link section below

* autofocus
* autocomplete
* disabled
* form
* formaction
* formenctype
* <s>formmethod</s> -- not supported by FlexForm
* formnovalidate
* formtarget
* name
* type - in FlexForm this argument is buttontype (e.g. _input type="button" buttontype="submit")
* value
===Example===
<syntaxhighlight lang="html">
<_input type="button">Click me</_input>
</syntaxhighlight>
<_input type="button">Click me</_input>
===Note===
The FlexForm button renders a '''<button>''' HTML attribute and '''not''' a '''input type="button"'''.

This will give you more freedom and is actually preferred. See the Link in the Links section for all the options.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

DevOps:Doc/FlexForm/1.0/input/month

2022-08-03T12:00:08Z

Slot migration: Slot migration

===Name===
month
===Type===
_input
===Synopsis===
How to render a month/year input field
===Description===
'''_input''' elements of type '''month''' create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number.
===Parameters===
type="month"

All other valid parameters for an input field are valid. Additionally you can use min, max, step and list.
===Example===
<syntaxhighlight lang="html">
<_label for="bday-month">What month were you born in?</_label>
<_input id="bday-month" type="month" name="bday-month" />
</syntaxhighlight>
<_label for="bday-month">What month were you born in?</_label>
<_input id="bday-month" type="month" name="bday-month" />
===Note===
When not a correct month is entered, the browser will fallback to a text-input field. Read the link below how to handle these situations.

Also note that not all browsers support the month attribute.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month

DevOps:Doc/FlexForm/1.0/fieldset

2022-08-03T12:00:08Z

Slot migration: Slot migration

===Name===
fieldset
===Type===
fieldset
===Synopsis===
How to group certain inputfields together
===Description===
A _fieldset can visually group certain form elements together. In other word you can group questions related to each other.

A _fieldset is useally used in combination with _legend, but not necessary.
===Parameters===
_fieldset

Can hold all styling HTML5 arguments. It also has a form tag that refers to the form's id when a fieldset is not nested within a form.

You can also disable a fieldset, essentially disabling all _input fields inside a _fieldset.
===Example===
<syntaxhighlight lang="html">
<_form action="get">
<_fieldset>
<_legend>Simple fieldset</_legend>
<_input type="radio" id="radio" /><_label for="radio">Spirit of radio</_label>
</_fieldset>
</_form>
</syntaxhighlight>
<_form action="get">
<_fieldset>
<_legend>Simple fieldset</_legend>
<_input type="radio" id="radio" />
<_label for="radio">Spirit of radio</_label>
</_fieldset>
</_form>

===Note===
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

DevOps:Doc/FlexForm/1.0/input/date

2022-08-03T12:00:07Z

Slot migration: Slot migration

===Name===
date
===Type===
_input
===Synopsis===
How to render a date input field
===Description===
_input elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

The resulting value includes the year, month, and day, but not the time.

The date is formatted according to ISO8601, described in Format of a valid date string in Date and time formats used in HTML.
===Parameters===
type="date"

All other valid parameters for an input field are valid. Additionally you can use min, max and step.
===Example===
<syntaxhighlight lang="html">
<_input type="date" name="date" value="2022-03-01" min="2022-01-01" max="2022-12-31" />
</syntaxhighlight>
<_input type="date" name="date" value="2022-03-01" min="2022-01-01" max="2022-12-31" />
===Note===
When not a correct date is entered, the browser will fallback to a text-input field. Read the link below how to handle these situations.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

DevOps:Doc/FlexForm/1.0/Getting started

2022-08-03T12:00:07Z

Slot migration: Slot migration

'''FlexForm''' is a parser function. You can use it on any page and in any namespace. By default it will render plain HTML5 forms with no styling. To bring forms to life and make them attractive, you will need to add styling to a '''FlexForm''' or render using themes.

'''FlexForm''' syntax is much like creating a standard form in HTML5, so if you are familiar with creating HTML5 forms, you should have no problems with '''FlexForm'''.

If you are not familiar with HTML Forms, then [https://www.w3schools.com/html/html_forms.asp this link to W3schools] might be a good start.

Example:

This is a simple HTML5 form :<syntaxhighlight lang="html5">
<form>
<label for="name">Name</label>
<input type="text" name="name" />
<input type="submit" value="submit" />
</form>
</syntaxhighlight>This is the same form, but now build with '''FlexForm''' :<syntaxhighlight>
<_form action="get">
<_label for="name">Name</_label>
<_input type="text" name="name" />
<_input type="submit" value="submit" />
</_form>
</syntaxhighlight>

DevOps:Doc/FlexForm/1.0/input/hidden

2022-08-03T12:00:07Z

Slot migration: Slot migration

===Name===
hidden
===Type===
_input
===Synopsis===
How to render a hidden input field
===Description===
_input elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.
===Parameters===
type="hidden"

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="hidden" name="token" value="123231321" />
</syntaxhighlight>
===Note===
While the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. If you want to create a secure field, then use _input type="secure".
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

DevOps:Doc/FlexForm/1.0/input/range

2022-08-03T12:00:07Z

Slot migration: Slot migration

===Name===
range
===Type===
_input
===Synopsis===
How to render a input slider
===Description===
Used to get a value between x and y, presented to the user as a slider.
===Parameters===
type="range"

Other options :
autocomplete
list
min
max
step
value

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="range" min="5" max="10" step="0.01" />
</syntaxhighlight>
<_input type="range" min="5" max="10" step="0.01" />
===Note===
By default, the granularity, is 1, meaning that the value is always an integer. You can change the step attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01.

If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of "any" for the step attribute.
===Links===

DevOps:Doc/PageSync/1.5/Sync custom query

2022-08-03T12:00:07Z

Slot migration: Slot migration

[[File:Screenshot PageSync custom query main.png|alt=Screenshot PageSync custom Ask query|thumb|600x600px|Screenshot PageSync custom Ask query]]

If you have Semantic MediaWiki installed you can quickly add pages to '''PageSync''' using a Semantic Ask Query.

From the Special page you can click on SYNC CUSTOM QUERY. It will then give you the option to enter a Semantic Ask Query.

Once you have entered a Semantic Ask Query, you will get an overview of all pages that apply to the query. You can individually add them to '''PageSync''' by clicking the Slider on the right or use the big "" button to add them all at once. When using the button you can also Tag the pages you are adding. This can be handy if you want to Share pages or files.
[[File:Screenshot PageSync Custom Query 2.png|alt=Screenshot PageSync Custom Query result|center|thumb|600x600px|Screenshot PageSync Custom Query result]]

DevOps:Doc/FlexForm/1.0/input/color

2022-08-03T12:00:06Z

Slot migration: Slot migration

===Name===
color
===Type===
_input
===Synopsis===
How to render a color input field
===Description===
Elements of type "color" provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in "#rrggbb" hexadecimal format. Only simple colors (with no alpha channel) are allowed.
===Parameters===
type="color"

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="color" value="#ff0000" />
</syntaxhighlight>
<_input type="color" value="#ff0000" />
===Note===
When adding a standard value to a color field that is not a solid color or a number in HEX notation, the result will always be #000000 (in other words: black)
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

DevOps:Doc/PageSync/1.5/Backups

2022-08-03T12:00:06Z

Slot migration: Slot migration

From the Special page for PageSync there is a tab called '''BACKUPS'''.

There you can take a snapshot of all current pages and files that are monitored by PageSync.

Such a backup file can be restored at a later time to set all monitored pages back to that specific snapshot.

It is even possible to share a backup file with other wiki's and let it be restored there. They will be added to '''PageSync''' automatically and be monitored after restoring.

Be careful when restoring a backup as it will delete all the files '''PageSync''' has created (it will not remove any pages or files in the wiki! Only the files '''PageSync''' created.) and build the structure from the backup-file.

[[File:Screenshot PageSync Backup.png|alt=PageSync Special page Backup overview|center|thumb|600x600px|''PageSync Special page Backup overview'']]

DevOps:Doc/FlexForm/1.0/input/secure

2022-08-03T12:00:06Z

Slot migration: Slot migration

===Name===
secure
===Type===
_input
===Synopsis===
How to render a hidden input field that is secure
===Description===
_input elements of type secure are similar to type hidden. The difference is that a secure field is not readable by a user and a form will fail if it gets altered using Browsers developer tools
===Parameters===
type="secure"

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="secure" name="token" value="123231321" />
</syntaxhighlight>
This will render something similar to
<syntaxhighlight lang="html">
<input name="2425fb14579653aef53179a2849e4593ES5rgMk=" value="7cade404c7d02c02a3087e4fd6954caby0QljHbAPys0" type="hidden">
</syntaxhighlight>
===Note===
When using action="get" a secure field will not be returned in the url
===Links===

DevOps:Doc/FlexForm/1.0/input/password

2022-08-03T12:00:06Z

Slot migration: Slot migration

===Name===
password
===Type===
_input
===Synopsis===
How to use the password field for input
===Description===
When using the password field, people cannot see what they are typing.
===Parameters===
_input type="password"
===Example===
<syntaxhighlight lang="html">
<_input type="password" name="pass" placeholder="Type your password" required="required" />
</syntaxhighlight>
<_input type="password" name="pass" placeholder="Type your password" required="required" />
===Note===
All attributes for a password input field are supported (like in this case : name, placeholder and required). Obviously never use form action="GET" when using a password field, always use POST.
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

DevOps:Doc/FlexForm/1.0/input/email

2022-08-03T12:00:06Z

Slot migration: Slot migration

===Name===
email
===Type===
_input
===Synopsis===
How to render an email input field
===Description===
When rendering an email input field, the browser will check if it is a valid email address.
===Parameters===
type="email"

All other valid parameters for an input field are valid
===Example===
<syntaxhighlight lang="html">
<_input type="email" name="mail" placeholder="Type your email address" required="required" />
</syntaxhighlight>
<_input type="email" name="mail" placeholder="Type your email address" required="required" />
===Note===
All attributes for an email input field are supported (like in this case : name, placeholder and required.)
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

DevOps:Doc/PageSync/1.5/Maintenance script

2022-08-03T12:00:05Z

Slot migration: Slot migration

PageSync also comes with a maintenance script, in order to import previous exported pages.

=== Options ===

; summary
: Additional text that will be added to the files imported History.
; user
: Your username. Will be added to the import log. [mandatory]
; rebuild-index
: Rebuild the index file from existing files in export folder
; force-rebuild-index
: Used with 'rebuild-index' to suppress confirmation

=== ShareFile import options ===
; install-shared-file
: Url or path on the server to a PageSync share file
; install-shared-file-from-temp
: Name of the PageSync Share file already in the PageSync TempPath
; silent
: Will show no output in the terminal until it is finished.

DevOps:Doc/FlexForm/1.1/API

2022-08-03T12:00:05Z

Slot migration: Slot migration

===Name===
API
===Type===
API
===Synopsis===
FlexForm API functions
===Description===
FlexForm has some build-in API functions.

Have a look at one of the subpages for more information.

DevOps:Doc/FlexForm/create-or-edit-a-page

2022-08-03T12:00:05Z

Slot migration: Slot migration

Creating or editing a page is done using '''_create''' or '''_edit''' in a Form.

Have a look at the Documentation for more information.

DevOps:Doc/FlexForm/1.0/input/textarea

2022-08-03T12:00:05Z

Slot migration: Slot migration