MediaWiki

Help:Extension:FormWizard

Translate this page
Languages:
Example step 1 view from formWizard configuration file.
Example step 2 view from formWizard configuration file.
Example step 3 view from formWizard configuration file.
Example step 4 view from formWizard configuration file.

FormWizard is a MediaWiki extension that uses data provided by users to create pages and adding the content to these pages.

Configuration

Each configuration is placed in a JSON file in the namespace where the project will be used. Each configuration file is made up of two parts; steps and target. step_n is the nth step in the form with only one step being visible at any point in time. target is used to define the mode which the wizard is operating which will be used to determine if it appends to a page or create a sub page.

Many steps could be defined as possible. For example 

"steps": {
    "step_1": {
    },
    "step_2": {
    },
    ...
    "step_n":{
    }
  }

Below is the two different ways which the target part can be defined. 

"target": {
   "baseUrl": "wiki",
   "mode": "subpage",
   "rootname": "DestinationPage/"
  }

This would create a text box above the button allowing a custom subpage name to be defined. 

"target": {
   "baseUrl": "wiki",
   "mode": "append",
   "pagename": "DestinationPage"
  }

The above does not allow a custom subpage to be defined.

Form elements

The following from here have been implemented and can be used so far. These are:

  • DropdownInputWidget
  • NumberInputWidget
  • RadioSelectInputWidget
  • TextInputWidget
  • ComboBoxInputWidget
  • MultilineTextInputWidget
  • CheckboxMultiselectInputWidget
  • LabelWidget

Note: It will be good to know that LabelWidget is used to get the various sections of the page. so for example something like: 

{
   "type": "LabelText",
   "label": "How many people will attend the event?"
}

will yield the following blank section.

How many people will attend the event?

The Wizard

The wizard is launched at the center of the page in the form of a dialog whose steps are completed in several stages depending on the configuration settings. Below is and example of the configuration file Config.json:

Example Config file
{
   "target": {
         "baseUrl": "wiki",
         "mode": "subpage",
         "rootname": "Grants:Project/Rapid/"    
    },
	"steps": {
		"step_1": {
			"schema": [
				{
					"type": "LabelText",
					"label": "What is Your Name?"
					
				},
				{	
					"type": "smallTextBox",
					"placeholder": "Enter Name",
					"characterLength": 200,
					"required": true
					
				},
				{	
					"type": "PopupButtonWidget",
					"framed": false
				},				
				{
					"type": "LabelText",
					"label": "What is Your Country?"

				},
				{
					"type": "ComboBoxInputWidget",	
					"options": [
								    {
								      "data": "Cameroon",
								      "label": "Cameroon"
								    },
								    {
								      "data": "Ghana",
								      "label": "Ghana"
								    },
								    {
								      "data": "Nigeria",
								      "label": "Nigeria"
								    },
								    {
								      "data": "South Africa",
								      "label": "South Africa"
								    },
								    {
								      "data": "Kenya",
								      "label": "Kenya"
								    }
										
								],
					"menu": { "filterFromInput": true	 }
				},
				{
					"type": "LabelText",
					"label": "Why are you applying?"
				},
				{
					"type": "MultilineText",
					"rows": 4,
					"autosize": true,
					"placeholder": "Tell Us why you are applying"
				},
				{
					"type": "LabelText",
					"label": "Select an animal you like"
				},
				{
					"type": "CheckboxMultiselect",
					"value": [ "dog","cat" ],
					"options": [
						{
							"data": "cat",
							"label": "Cat"
						},
						{
							"data": "dog",
							"label": "Dog",
							"disabled": true
						},
						{
							"data": "goldfish",
							"label": "Goldfish"
						}
					]
				}
			]
		},

		"step_2": {
			"schema": [
		{
			"type": "LabelText",
			"label": "Tell Us Why you want to Apply"
		},
		{	
			"type": "smallTextBox",
			"placeholder": "Reason for Application",
			"title": "Textbox",
			"label": "TextBox",
			"characterLength":200,
			"mandatory":false,
			"notices": "Please enter this field well"
		},
		{
			"type": "LabelText",
			"label": "Can we have your picture?"
		},
		{
			"type": "SelectFileWidget",
			"label": "Tell Us Why you want to Apply",
			"accept": [ "image/png", "image/jpeg" ],
			"showDropTarget": true
		},
		{
			"type": "LabelText",
			"label": "Select an option please"
		},
		{
			"type": "DropdownInputWidget",
			"options": [
					{
						"optgroup": "Vowels"
					},
					{
						"data": "a",
						"label": "A"
					},
					{
						"optgroup": "Consonants"
					},
					{
						"data": "b",
						"label": "B"
					},
					{
						"data": "c",
						"label": "C"
					}
				],
			"value": "b"
		},
		{
			"type": "LabelText",
			"label": "Select One From Below"
		},
		{
			"type": "RadioSelectInputWidget",
			"value": "dog",
			"options": [
				{
					"data":"cat",
					"label": "Cat"
				},
				{
					"data": "dog",
					"label": "Dog"
				},
				{
					"data": "goldfish",
					"label": "Goldfish"
				}
			]
		},
		{
			"type": "LabelText",
			"label": "How may people will attend your Event"
		},
		{
			"type": "NumberInputWidget",
			"min": 0,
			"max": 5,
			"isInteger": true
		}

			]
		},
		
		"step_3": {
			"schema": [
				{
					"type": "LabelText",
					"label": "Other Applicant Name"
				},
				{	
					"type": "smallTextBox",
					"placeholder": "Enter Other Application",
					"characterLength":200,
					"mandatory":false
				},
				{
					"type": "LabelText",
					"label": "Select their Country "
				},
				{
					"type": "ComboBoxInputWidget",	
					"options": [
								    {
								      "data": "Cameroon",
								      "label": "Cameroon"
								    },
								    {
								      "data": "Ghana",
								      "label": "Ghana"
								    },
								    {
								      "data": "Nigeria",
								      "label": "Nigeria"
								    },
								    {
								      "data": "South Africa",
								      "label": "South Africa"
								    },
								    {
								      "data": "Kenya",
								      "label": "Kenya"
								    }
										
								],
					"menu": { "filterFromInput": true	 }
				},
				{
					"type": "LabelText",
					"label": "Why Should they Join You? "
				},

				{
					"type": "MultilineText",
					"rows": 4,
					"value": "",
					"autosize": true,
					"placeholder": "Multiline Text"
				},
				{
					"type": "LabelText",
					"label": "Take An animal They Like"
				},
				{
					"type": "CheckboxMultiselect",
					"value": [ "dog","cat" ],
					"options": [
						{
							"data": "cat",
							"label": "Cat"
						},
						{
							"data": "goldfish",
							"label": "Goldfish"
						}
					]
				}
			]
		},

		"step_4": {
			"schema": [
		{
			"type": "LabelText",
			"label": "Tell Us Why you want to Apply"
		},
		{	
			"type": "smallTextBox",
			"placeholder": "Reason for Application",
			"title": "Textbox",
			"label": "TextBox",
			"characterLength":200,
			"mandatory":false,
			"notices": "Please enter this field well"
		},
		{
			"type": "LabelText",
			"label": "Can we have your picture?"
		},
		{
			"type": "SelectFileWidget",
			"label": "Tell Us Why you want to Apply",
			"accept": [ "image/png", "image/jpeg" ],
			"showDropTarget": true
		},
		{
			"type": "LabelText",
			"label": "Select an option please"
		},
		{
			"type": "DropdownInputWidget",
			"options": [
					{
						"optgroup": "Vowels"
					},
					{
						"data": "a",
						"label": "A"
					},
					{
						"optgroup": "Consonants"
					},
					{
						"data": "b",
						"label": "B"
					},
					{
						"data": "c",
						"label": "C"
					}
				],
			"value": "b"
		},
		{
			"type": "LabelText",
			"label": "Select One From Below"
		},
		{
			"type": "RadioSelectInputWidget",
			"value": "dog",
			"options": [
				{
					"data":"cat",
					"label": "Cat"
				},
				{
					"data": "dog",
					"label": "Dog"
				},
				{
					"data": "goldfish",
					"label": "Goldfish"
				}
			]
		},
		{
			"type": "LabelText",
			"label": "How may people will attend your Event"
		},
		{
			"type": "NumberInputWidget",
			"min": 0,
			"max": 5,
			"isInteger": true
		}

			]
		}
	}
}

The above configuration file yields the following dialog with each step having it's elements as described.

To navigate the screens, the Next button becomes useful and to safely end the process, the Cancel button is ueed.

Help And Feedback

Help
Go to the help page.
Feedback
Go to the page for leaving feedback.

Known limitations

The extension is still in under development and there is more functionality to be added upon request because each project will like how the pages will be arranged (ordered). At the moment, just a page with section and content could be created given the data the user provides while going through the dialog steps.

Also the images part have not been handled using the image elements and so the image link on commons could be used at the moment instead of the `SelectFileWidget`. Amongst this are many others which have not yet been listed here.

Retrieved from "https://www.mediawiki.org/w/index.php?title=Help:Extension:FormWizard/en&oldid=6534416"