Developer log #21 :: Page Forms to FlexForm

How to replace Page Forms with FlexForm

We frequently receive questions about the steps involved in migrating from Page Forms to FlexForm. In response to these questions, we have written this comprehensive Developer Log to guide you through a seamless transition to FlexForm, ensuring a smooth and efficient migration process.

Why FlexForm?

One single FlexForm 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).

Want to know about the Flexform differences with Page Forms? Click here.

FlexForm-logo square.png

Smooth migration in 3 steps:

  1. Make a list of all required fields
  2. create Form Template
  3. Call Form Template
  4. Optional steps
  5. Pre-Fill / Editing
  6. Advanced field types

1. Make a list of all required fields

First, you need to know what (form)fields you need in your FlexForm form. The easiest way to do this is by going to the source code of the Page Forms form. You can do this by navigating to /Form:NAME_OF_FORM. For example, if my form is named 'Person', I want to navigate to:

On that page you see all the formfields including their names and types. The fields are recognised by {{{field|name|type}}}, e.g. {{{field|First name|input type=text}}}. Make a list of these field names and types, or keep this page open in a tab. Note: it is important to use the same names in your FlexForm form to make sure existing information is stored and picked up correctly.

2. Create Form Template

Now, we are going to create the FlexForm form on a template page*. Create a new template for the form, e.g. Template:PersonForm. On this page you create your form. It is recommended to open the FlexForm Documentation in another tab for detailed information on field types. Form actions will vary depending on the use of the form. An example of a simple form Template is shown below:

 	<_create mwwrite="P-" mwtemplate="Person" mwoption="next_available" mwfollow />
 	<input type="text" name="Name"/>
 	<input type="date" name="Date of Birth"/>
 	<input type="hidden" name="Role" value="Customer" />
 	<input type="submit" value="Save" />

Notice that, except for the <_create> element, everything is standard HTML5.

This form creates a page for a new person. This page will have a template with parameters Name, Date of Birth and Role. While Name and Date of Birth are filled in by the user, Role has type='hidden' so that the value is saved, but not filled in (or seen) by the user. In addition, we use the create attributes to pick the pagename to be the next available number. Various options and attributes for the create are found here. To see how your PageForm form creates a page, you need to find the info field which is probably located at the start or end of the PageForm form. It will look something like this:

page name=B-<unique number ;start=1>

Note that FlexForm forms don't have any styling by default. 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.

*While it is possible to create the FlexForm form directly on the page, adopting the practice of making a template facilitates its use across multiple pages, making it a recommended best practice.

3. Call Form Template

Lastly, we need to call the template on a page we want the form to be displayed. We do this in no other way than a normal template. Just add {{TEMPLATENAME}}, in my case {{PersonForm}}. Check if the FlexForm form works like expected and you're finished!

4. Pre-Fill and Editing (optional)

If you want to create a FlexForm form to edit a page, this step is for you. Let's say we want to edit a person we added with the form created in step 2. This can be easily done by modifying a few things in the form.

Modify the template call with parameters. We need to supply the form with information to pre-fill and information of which person to edit.

|Date of Birth={{{Date of Birth|}}}
In the template call above, we supply a new parameter called 'Page' which is the page we are editing right now, thus the page of the person. Of course you can change the value to a specific page or something else. Now, we want the form to pre-fill the information in the input fields, we can do this by using the 'value' attribute.
	<_create mwwrite="{{{Page|}}}" mwtemplate="Person" mwfollow />
	<input type="text" name="Name" value="{{{Name|}}}"/>
        <input type="date" name="Date of Birth" value="{{{Date of Birth|}}}"/>
	<input type="hidden" name="Role" value="{{{Role|Customer}}}" />
	<input type="submit" value="Save" />

In the example above, we changed the create as well to edit the page of the person we are editing, but this removes the functionality of creating a new person. We can change this by using an if-statement as in the example below.

		|<_create mwwrite="{{{Page|}}}" mwtemplate="Person" mwfollow />
		|<_create mwwrite="P-" mwtemplate="Person" mwoption="next_available" mwfollow />
	<input type="text" name="Name" value="{{{Name|}}}"/>
    <input type="date" name="Date of Birth" value="{{{Date of Birth|}}}"/>
	<input type="hidden" name="Role" value="{{{Role|Customer}}}" />
	<input type="submit" value="Save" />

Notice that, we have used a default value for Role if it is empty. Therefore, new persons will have the role Customer.

Done! You can now add the template call with parameters to a person's page and then you are able to edit the person's information as well.

Using <_create> or <_edit>

Sometimes you do not need to change all values. You can use <_edit> to edit only parameters necessary. You can have multiple <_edit> tags in a form, all doing different tasks. However, if you have more than 5 edits to one single page in the wiki, consider create to speed-up the process. Documentation on create or edit tags can be found here.

5. Advanced Field Types (optional)

Some input types are pretty straightforward, e.g. Text, Textarea, Number, Date etc. Visit the FlexForm Documentation page for all information on other field types and how to use them. Explore the endless possibilities of FlexForm!

Lua error: bad argument #1 to 'mw.text.jsonDecode' (string expected, got nil).
We use functional cookies that are necessary for the proper functioning of our website. These cookies are always set. Additionally, we use marketing cookies to personalize your experience and to help us improve the performance of our website. You can choose to decline these marketing cookies.