Meta:FormWizardExpand

Correct.svg 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.

OverviewEdit

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

ConfigurationEdit

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 ElementsEdit

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 ValuesEdit

TypeEdit

It defines the type of the element. The possible values can be found above. Eg: "type":"largeTextBox"

PlaceholderEdit

As the name suggests it is a placeholder value for text fields. Eg: "placeholder": "This is a placeholder"

TitleEdit

This is the name that will be used for the field in the form. Eg: "title":"Goals Section"

String LengthEdit

For text fields a maximum string length can be defined after which the entered string will automatically be truncated. Eg: "characterLength": "300"

Add ToEdit

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 HeaderEdit

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 ParamEdit

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"

MandatoryEdit

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",

VisibilityEdit

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",

ValueEdit

Default values can be added to fields. Eg: "value": ""

Choice List & HiddenEdit

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"
                                                                        }
                                                        ],
TextEdit

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"

FilesEdit

BackgroundEdit

This tool was built as part of Idealabs April August 2014 sprint