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
editIt 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
editThe 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
editThe 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
editType
editIt defines the type of the element. The possible values can be found above. Eg: "type":"largeTextBox"
Placeholder
editAs the name suggests it is a placeholder value for text fields. Eg: "placeholder": "This is a placeholder"
Title
editThis is the name that will be used for the field in the form. Eg: "title":"Goals Section"
String Length
editFor text fields a maximum string length can be defined after which the entered string will automatically be truncated. Eg: "characterLength": "300"
Add To
editIt 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
editIf 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
editIn 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
editIt 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
editYou 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
editDefault values can be added to fields. Eg: "value": ""
Choice List & Hidden
editFor 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
editTextual 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
editThis tool was built as part of Idealabs April August 2014 sprint