CSP Wiki - User contributions [en]

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:37:51Z

3f181944-9694-4c7c-83d3-a6193204adb3:

===Name===
API

===Type===
FlexFormOpen (Available since 2.7.1)

===Synopsis===
Open FlexForm API endpoint for lightweight validation actions.

===Description===
The '''FlexFormOpen''' API provides limited, publicly accessible FlexForm functionality intended for frontend validation use cases. It does not require readapi-rights.

Currently, the available actions are:

* '''canUserBeCreated''' – Checks whether a username can be created.

This API is especially useful when implementing [[DevOps:Doc/FlexForm/2.0/CreateUser|CreateUser]] forms.

When paired with JavaScript, it allows real-time username validation (e.g., checking whether a username already exists or is invalid) before form submission.

For security reasons, this API is '''disabled by default'''.

To enable it, set the following configuration option:

<syntaxhighlight lang="php">
$wgFlexFormConfig['allowFlexFormOpenAPI'] = true;
</syntaxhighlight>

===Parameters===
'''ffAction''' – The FlexFormOpen action to execute.

* '''canUserBeCreated''' (required)

'''additionalData''' – Additional data required for the action.

* For '''canUserBeCreated''', this must contain the username to validate. (required)

===Action: canUserBeCreated===
Checks whether a username:

* Does not already exist
* Meets MediaWiki username validation requirements
* Can safely be created

This action does not create the user. It only performs validation.

===Example (JavaScript)===
Example using MediaWiki's mw.Api():

<syntaxhighlight lang="javascript">
var api = new mw.Api();

api.get({
action: "FlexFormOpen",
ffAction: "canUserBeCreated",
additionalData: correctedUsername,
formatversion: 2
}).done(function (data) {

if (data.canUser === true) {
console.log("Username can be created.");
} else {
console.log("Username cannot be created.");
}

});
</syntaxhighlight>

If the API is disabled via configuration (or default):

<syntaxhighlight lang="json">
{
"error": {
"message": "FlexFormOpen API is disabled."
}
}
</syntaxhighlight>

===Security Considerations===
Because this API does not require authentication, it is disabled by default.

It is strongly recommended to:

* Only enable it when necessary
* Implement frontend throttling or rate limiting if heavy usage is expected
* Avoid exposing sensitive validation logic

===Future Improvements===
In future versions, an optional attribute may be introduced on FlexForm input fields that automatically performs username validation without requiring custom JavaScript.

DevOps:Doc/FlexForm/1.1/API/FlexFormOpen

2026-02-23T14:35:27Z

3f181944-9694-4c7c-83d3-a6193204adb3: 3f181944-9694-4c7c-83d3-a6193204adb3 moved page DevOps:Doc/FlexForm/1.1/API/FlexFormOpen to DevOps:Doc/FlexForm/2.5/API/FlexFormOpen: Misspelled title

#REDIRECT [[DevOps:Doc/FlexForm/2.5/API/FlexFormOpen]]

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:35:26Z

3f181944-9694-4c7c-83d3-a6193204adb3: 3f181944-9694-4c7c-83d3-a6193204adb3 moved page DevOps:Doc/FlexForm/1.1/API/FlexFormOpen to DevOps:Doc/FlexForm/2.5/API/FlexFormOpen: Misspelled title

===Name===
API

===Type===
FlexFormOpen

===Synopsis===
Open FlexForm API endpoint for lightweight validation actions.

===Description===
The '''FlexFormOpen''' API provides limited, publicly accessible FlexForm functionality intended for frontend validation use cases. It does not require readapi-rights.

Currently, the available actions are:

* '''canUserBeCreated''' – Checks whether a username can be created.

This API is especially useful when implementing [[DevOps:Doc/FlexForm/2.0/CreateUser|CreateUser]] forms.

When paired with JavaScript, it allows real-time username validation (e.g., checking whether a username already exists or is invalid) before form submission.

For security reasons, this API is '''disabled by default'''.

To enable it, set the following configuration option:

<syntaxhighlight lang="php">
$wgFlexFormConfig['allowFlexFormOpenAPI'] = true;
</syntaxhighlight>

===Parameters===
'''ffAction''' – The FlexFormOpen action to execute.

* '''canUserBeCreated''' (required)

'''additionalData''' – Additional data required for the action.

* For '''canUserBeCreated''', this must contain the username to validate. (required)

===Action: canUserBeCreated===
Checks whether a username:

* Does not already exist
* Meets MediaWiki username validation requirements
* Can safely be created

This action does not create the user. It only performs validation.

===Example (JavaScript)===
Example using MediaWiki's mw.Api():

<syntaxhighlight lang="javascript">
var api = new mw.Api();

api.get({
action: "FlexFormOpen",
ffAction: "canUserBeCreated",
additionalData: correctedUsername,
formatversion: 2
}).done(function (data) {

if (data.canUser === true) {
console.log("Username can be created.");
} else {
console.log("Username cannot be created.");
}

});
</syntaxhighlight>

If the API is disabled via configuration (or default):

<syntaxhighlight lang="json">
{
"error": {
"message": "FlexFormOpen API is disabled."
}
}
</syntaxhighlight>

===Security Considerations===
Because this API does not require authentication, it is disabled by default.

It is strongly recommended to:

* Only enable it when necessary
* Implement frontend throttling or rate limiting if heavy usage is expected
* Avoid exposing sensitive validation logic

===Future Improvements===
In future versions, an optional attribute may be introduced on FlexForm input fields that automatically performs username validation without requiring custom JavaScript.

DevOps:Doc/FlexForm/2.0/Installation of FlexForm

2026-02-23T14:26:53Z

3f181944-9694-4c7c-83d3-a6193204adb3:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$wgFlexFormConfig['smtp_host'] = "";

$wgFlexFormConfig['smtp_authentication'] = true;

$wgFlexFormConfig['smtp_username'] = "";

$wgFlexFormConfig['smtp_password'] = "";

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

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

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

</syntaxhighlight>

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

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

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

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

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

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

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

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

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:24:39Z

3f181944-9694-4c7c-83d3-a6193204adb3:

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:12:33Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

fdsfds

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:12:25Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

fdsfds

DevOps:Doc/FlexForm/2.5/API/FlexFormOpen

2026-02-23T14:12:15Z

3f181944-9694-4c7c-83d3-a6193204adb3: Created page with "fdsfds"

fdsfds

DevOps:Doc/FlexForm

2026-02-23T14:08:46Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

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

=== Unlock Infinite Possibilities with FlexForm: Empower Your MediaWiki! ===
''FlexForm, the innovative MediaWiki extension developed for Open CSP, empowers you to unleash the full potential of your wiki. Seamlessly create and customize dynamic forms that cater to your unique requirements, whether it's gathering user feedback, conducting surveys, or efficiently managing data inputs. Say goodbye to rigid templates and welcome a new era of flexibility! With easy customization and seamless integration, FlexForm simplifies form management, enabling you to maximize productivity and engage your community effortlessly. Take charge of your wiki's data like never before and discover endless possibilities with FlexForm.''

'''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 [[DevOps:Doc/FlexForm/1.0/Getting started|getting 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''' single 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
* Convert Word to a Wiki page
* Convert Excel to JSON
* Send a message to a Wiki user or users

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

2026-02-23T14:08:37Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

Open CSP Steering committee

2025-09-23T13:53:04Z

3f181944-9694-4c7c-83d3-a6193204adb3:

== Agenda of the steering committee meetings ==

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

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

=== Edit Agenda meetings ===

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

}}

Open CSP Steering committee

2025-09-23T13:52:54Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

Open CSP Steering committee

2025-09-23T13:52:41Z

3f181944-9694-4c7c-83d3-a6193204adb3: Blanked the page

Wiki:Testpagina Jimmy

2025-09-23T13:47:17Z

3f181944-9694-4c7c-83d3-a6193204adb3: Created page with "<form> <_create mwwrite="Open CSP Steering committee" mwslot="ws-class-props" mwtemplate="Csp class properties" mwfields="Kroket" /> <textarea name="Kroket"></textarea> <input type="submit" /> </form>"

Media

2025-09-23T13:44:43Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

<h2 class="h2">Open CSP Media</h2>

{{#widget:Media page}}
{{Show SEO in sidebar}}

Media

2025-09-23T13:44:35Z

3f181944-9694-4c7c-83d3-a6193204adb3: User:3f181944-9694-4c7c-83d3-a6193204adb3

<h2 class="h2">Open CSP Media</h2>

{{#widget:Media page}}
{{Show SEO in sidebar}}

DevOps:Doc/FlexForm

2025-09-02T19:49:12Z

3f181944-9694-4c7c-83d3-a6193204adb3:

DevOps:Doc/FlexForm/2.5/Form options

2025-08-26T08:16:20Z

3f181944-9694-4c7c-83d3-a6193204adb3: added restrictions parameter

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

==== action ====

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

==== formtarget ====

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

See example 1

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

==== messageonsuccess ====

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

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

See example 2
<hr>

==== attachmessageto ====

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

==== mwreturn ====

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

<hr>

==== permissions ====

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

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

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

'''Since version 2.3.10'''

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

<hr>

==== restrictions ====

====== Render form for anonymous user ======
By default, a FlexForm form is never rendered for an anonymous user. You can change this by adding a restrictions="lifted" to a Form tag. This can be useful for e.g. a contact form or questionnaire. Be sure to setup the build-in reCaptcha options in Flexform when allowing anonymous form submit!

When creating a user input in a Form, FlexForm will by default always filter the input for html, JavaScript or malicious code. You can however specify per input what is allowed and what is not. More information here : [[DevOps:Doc/FlexForm/2.0/input/search|Default input HTML attribute]]

Especially when you have a "closed" wiki, where people need to register and will get their rights through user groups, it is a good option just not to show a Form to someone from a user group that is not allowed to use it.<hr>

==== no_submit_on_return ====

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

See example 3
<hr>

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

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

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

See example 4

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

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

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

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

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

This feature has 3 options:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<hr>
==== '''add-as-job''' ====
As of version 2.5.5 you can tell FlexForm to add any '''_edit''' actions to MediaWiki jobs. This is especially handy if you have one form doing over 30+ edits to one or several pages. All activity concerning jobs created and ran will be logged to the FlexForm logbook. For information on checking these logs : [[https://www.mediawiki.org/wiki/Manual:$wgDebugLogFile $wgDebugLogFile]] and [[https://www.mediawiki.org/wiki/Manual:$wgDebugLogGroups $wgDebugLogGroups]] and [[https://www.mediawiki.org/wiki/Manual:How_to_debug Manual:How to debug]].

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

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

Normal default rendering:

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

with '''simple''' class style:

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

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

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

DevOps:Doc/FlexForm/2.1/input/file

2025-06-16T08:46:25Z

3f181944-9694-4c7c-83d3-a6193204adb3: Reverted edits by 3f181944-9694-4c7c-83d3-a6193204adb3 (talk) to last revision by Fd4138e7-8b46-4c8f-99bf-d4b738ebc295

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'''multiple''' = multiple

'''*'''= a required variable

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

=== action="convertfrom:????" ===
====Pandoc====
The '''action''' argument defaults to ''upload''. If you use '''action="convertfrom:????"''' and you have Pandoc installed on your system, FlexForm will convert a document and create it as a page in the Wiki. '''target''' will then be used as a Page Title. Depending on your version of Pandoc, the results might differ. '''convertfrom''' allows all Pandoc to MediaWiki text conversions. '''docx''' would be a good example : action="convertfrom:docx". Any images uploaded during the convert can have their content of their filepages be filled using '''pagecontent'''. Since version 2.2.9 you can also add an argument '''slot="<name of slot>"''' to have the converted Document be save to a specific slot on the target page, instead of the main slot. Keep in mind, MediaWiki slots need to be defined in your LocalSettings.
====Excel ( since version 2.2.9 )====
You can also use '''action="convertfrom:xls"''' or '''action="convertfrom:xlsx"'''. This allows for converting an Excel xls or xlsx file to JSON. Images are not supported. The argument '''slot''' is supported. ''This conversion is not done using Pandoc and thus will work without having Pandoc installed''. (just make sure you run composer update after you update FlexForm).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://pandoc.org/

DevOps:Doc/FlexForm/2.1/input/file

2025-06-16T08:31:16Z

3f181944-9694-4c7c-83d3-a6193204adb3: Added accept attribute which is already supported by file input

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

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

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

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

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

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

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

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

'''accept''': Only accept files of a certain format.

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

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

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

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

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

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

'''multiple''' = multiple

'''*'''= a required variable

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

=== action="convertfrom:????" ===
====Pandoc====
The '''action''' argument defaults to ''upload''. If you use '''action="convertfrom:????"''' and you have Pandoc installed on your system, FlexForm will convert a document and create it as a page in the Wiki. '''target''' will then be used as a Page Title. Depending on your version of Pandoc, the results might differ. '''convertfrom''' allows all Pandoc to MediaWiki text conversions. '''docx''' would be a good example : action="convertfrom:docx". Any images uploaded during the convert can have their content of their filepages be filled using '''pagecontent'''. Since version 2.2.9 you can also add an argument '''slot="<name of slot>"''' to have the converted Document be save to a specific slot on the target page, instead of the main slot. Keep in mind, MediaWiki slots need to be defined in your LocalSettings.
====Excel ( since version 2.2.9 )====
You can also use '''action="convertfrom:xls"''' or '''action="convertfrom:xlsx"'''. This allows for converting an Excel xls or xlsx file to JSON. Images are not supported. The argument '''slot''' is supported. ''This conversion is not done using Pandoc and thus will work without having Pandoc installed''. (just make sure you run composer update after you update FlexForm).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://pandoc.org/

DevOps:Doc/FlexForm/2.0/input

2025-02-28T09:32:25Z

3f181944-9694-4c7c-83d3-a6193204adb3: lowercase br

===Name===
input
===Type===
input
===Synopsis===
Create various input fields
===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''<syntaxhighlight lang="html">
<input type="number" name="Number" />
...
<input type="hidden" name="Number with prefix" value="nr. [Number]" parsepost />
</syntaxhighlight>

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

'''- tempex''' attribute in FlexForm is a custom attribute. This is in its beta status and is being tested and tweaked.

Tempex stands for Template Execute. You can add this attribute to e.g. a text field, textarea, number field, etc.. The value of that field will be determent by the result of an executed/parsed template.

The value for tempex starts with the name of the template, followed by the field names in your form, all devided by a pipe. Those fields will be monitored for changes and when a change is detected the template is parsed and the result will be inserted into the field that has the tempex argument. Example :

<syntaxhighlight lang="html">
<form action="get" class="simple">
<label for="fname">First name</label> <input type="text" id="fname" name="First name" /><br>
<label for="lname">Last name</label><input type="text" id="lname" name="Last name" /><br>
<label for="email">email address</label> <input type="email" id="email" name="email" /><br>
<textarea size="150" name="total" class="tital" tempex="TestingTempex|First name|Last name|email" />
<input type="submit" value="getsend" />
</form>
</syntaxhighlight>

Of course there should be a '''Template:TestingTempex''' in your wiki in this example.

'''- 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/FlexForm/2.1/input/file

2025-02-03T09:41:50Z

3f181944-9694-4c7c-83d3-a6193204adb3: Added multiple parameter (documentation)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'''multiple''' = multiple

'''*'''= a required variable

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

=== action="convertfrom:????" ===
====Pandoc====
The '''action''' argument defaults to ''upload''. If you use '''action="convertfrom:????"''' and you have Pandoc installed on your system, FlexForm will convert a document and create it as a page in the Wiki. '''target''' will then be used as a Page Title. Depending on your version of Pandoc, the results might differ. '''convertfrom''' allows all Pandoc to MediaWiki text conversions. '''docx''' would be a good example : action="convertfrom:docx". Any images uploaded during the convert can have their content of their filepages be filled using '''pagecontent'''. Since version 2.2.9 you can also add an argument '''slot="<name of slot>"''' to have the converted Document be save to a specific slot on the target page, instead of the main slot. Keep in mind, MediaWiki slots need to be defined in your LocalSettings.
====Excel ( since version 2.2.9 )====
You can also use '''action="convertfrom:xls"''' or '''action="convertfrom:xlsx"'''. This allows for converting an Excel xls or xlsx file to JSON. Images are not supported. The argument '''slot''' is supported. ''This conversion is not done using Pandoc and thus will work without having Pandoc installed''. (just make sure you run composer update after you update FlexForm).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://pandoc.org/

Search-documentation

2025-02-03T09:03:41Z

3f181944-9694-4c7c-83d3-a6193204adb3:

===Search documentation===
__NOTOC__{{#WikiSearchConfig:
|default operator=and
|base query=[[Class::Doc]]
|aggregation size=50
|Title
|Doc subject
|Doc synopsis
|Doc parent
|Subject version
|Doc target group
|Tag
}}
<div class="main-search">
{{#WikiSearchFrontend:size=10
|facets=4
|sort=Modification date
|sort options=Modification date
|ordertype=Modification date
|order=desc
|title=_DTITLE
|layout=template
|template=Show_docs_search_result
|@Doc subject
|@Subject version
|@Doc target group
#label=Target group
|@Tag
#display=pill
|?Doc subject
|?Doc synopsis
|?Subject version
|?Doc target group
|?Doc parent
|?Title
|?$title
|?$snippet
|?$namespacename
|?$page
|?$Modification date#display=date#label=Updated#type=date}}
</div>

DevOps:Doc/FlexForm/1.1/token

2024-10-30T08:29:22Z

3f181944-9694-4c7c-83d3-a6193204adb3:

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

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

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

'''allowtags''' = (no value or (as off version 2.2.19 ->) value of 'allowtags') Allow to create values that do not exist

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

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

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

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

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

'''callback''' = templateCallBack

'''multiple''' = multiple

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

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

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

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

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

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

===Links===