Meta:FormWizardExpand
 |  This page is currently a draft. More information pertaining to this may be available on the talk page. Translation admins: Normally, drafts should not be marked for translation. |
formsGadget is a gadget that provides a structured, step-by-step workflow for creating a new wiki-page and expanding it later.
Overview edit
It allows a user to create or expand a page by filling forms fields. It provides validation for certain fields. All the fields in the form are configurable. The form is created dynamically from a config file, eg FormWizard/Config/IdeaLab. You can see it in action at Grants:IdeaLab/Ideas
Configuration edit
The configuration for each grant type is maintained in a separate file, eg IdeaLab would be formsGadgetConfig/IdeaLab. There are two keys namely "create" and "expand", configurations for the create & expand mode respectively. Each of these broadly have two kinds of sub dictionaries. One called 'config' and the others called 'step-n'. Where n is the nth step in the form. At any given point of time only one of the steps is visible. The user can navigate forward or backward. That is configurable too.
Below is an example of the 'config' sub dictionary
"config":{
"post-edit": "Thank you for creating your idea! Visit the toolkit page (linked at the bottom of the infobox) for some next steps to turn your idea into action.",
"infobox": "Probox",
"page-home": "Grants:IdeaLab/Build",
"dialog-title": "Let's create your idea!",
"toolkit-name": "Toolkit",
"toolkit-template": "subst:Grants:IdeaLab/Build/Idea_toolkit",
},
You can define as many steps as needed. Eg
"step-1":{
.....
},
"step-2":{
.....
},
"step-3":{
.....
}
The steps further contain elements as shown below.
"projectNameTextbox": {
"type": "smallTextBox",
"placeholder": "What should we call your idea?",
"title": "Idea title",
"characterLength":100,
"mandatory":true,
"error-messageLength": "Max length reached",
"error-notFilled": "Mandatory field",
"add-to": "infobox",
"infobox-param":"project",
"validate": "doesNotExists",
"page-title":true
},
Supported Elements edit
The elements supported in the forms gadget are listed below. On the right is the value to be used in the dictionary.
- Small Textbox - smallTextBox
- Large Textbox - largeTextBox
- Checkbox List - checkboxList
- Stepper List - stepperList
- Image - image
- Next Button - nextButton
- Done Button - doneButton
- Cancel Button - cancelButton
- Link - link
- Dropdown - dropdownList
Specification Values edit
Type edit
It defines the type of the element. The possible values can be found above. Eg: "type":"largeTextBox"
Placeholder edit
As the name suggests it is a placeholder value for text fields. Eg: "placeholder": "This is a placeholder"
Title edit
This is the name that will be used for the field in the form. Eg: "title":"Goals Section"
String Length edit
For text fields a maximum string length can be defined after which the entered string will automatically be truncated. Eg: "characterLength": "300"
Add To edit
It defines where the said field's value will be added to. Either as a new section or to the infobox. It can take two values "section" and "infobox". Eg: "add-to": "section",
Section Header edit
If add-to is defined as section then this key value is to be added. It conveys which section to add the string to. Eg: "section-header": "Goals",.
Infobox Param edit
In case add-to is defined as infobox then an infobox-param key value is added. This defines to which infobox param to add the string to. Eg: "infobox-param": "image"
Mandatory edit
It defines if a field must compulsorily be filled in or not. It takes a boolean value. It is either true or false. Eg: "mandatory": "false",
Visibility edit
You can hide some fields with a preset value. This is useful when you want to add something to the page but not necessarily but the user. Eg: "visibility": "hidden",
Value edit
Default values can be added to fields. Eg: "value": ""
Choice List & Hidden edit
For elements where there are multiple values like dropdowns, checkbox list and the special stepperlist the values are defined in the as given in the example below. The hidden values are values that will not be shown to the user but will get added to the page (infobox).
"choiceList": [
{
"key": "advisor",
"value": 0
},
{
"key": "community_organizer",
"value": 0
},
{
"key": "project_manager",
"value": 0
},
{
"key": "researcher",
"value": 0
},
{
"key": "designer",
"value": 0
},
{
"key": "developer",
"value": 0
},
],
"hidden": [
{
"key": "portal",
"value": "Idealab"
},
{
"key": "translations",
"value": "Probox/Idealab/Content"
},
{
"key": "more_participants",
"value": "YES"
}
],
Text edit
Textual description can be added, as many as need by adding like in the example below. 'text-n':'Description 1' etc Eg: "text-1" : "A very short description"
Files edit
- FormWizard/Config/IdeaLab - The gadget's config values & interface strings (Each grant type has its own config file)
- formsGadget.js - The gadget code
- formsGadget.css - The styling/css of the gadget
- formsGadget , The code on github.
Background edit
This tool was built as part of Idealabs April August 2014 sprint