Meta:FormWizardExpand

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

Background

edit

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