Configuration form

1. Overview

The configuration form allows the end user of your widget to customize it easily, even without any technical knowledge.

The form file's location must be specified explicitly in the package.json in the form field, as follows:

"form": "dist/form.js"

2. How to use it

Widgets forms are an array of components. A component is a simple plain object that represents an input or an option for your Widget. If you have created your Widget with the Widget CLI, you can edit the form.js directly in the `src` folder (otherwise you will have to create one).

To get the data from your form to your javascript file, add/edit the propName property in your form components.

Here is an example of a text input:

export default [
  {
    type: 'text',
    category: 'content',
    label: 'Message :',
    propName: 'message',
    placeholder: 'Enter a message'
  },
]

You will find the DATA.message variable in your Javascript.

You can view all the available components in the Components Summary.

3. Component categories

Each component has to be in a category, each category representing a tab within the configuration form. The configuration component will then be displayed within each of these tabs. 4 categories are currently available:

• Layout: The component will modify the inner/outer disposal of the widget
• Content: The component will modify the text of the widget (the title or text or a button for example) or add/edit some content related elements (a button for example).
• Styles: The component will impact the design of the widget.
• Conditions: The component will affect the trigger events or tracking options of the widget.

Please note that all groups are not mandatory and don't necessarily need to be enriched. In this case, they will be hidden from end users.

Here is an example of the radioImage component in the Layout category and the inputText component in the Contentcategory;:

export default [
  {
    type: 'radioImage',
    category: 'layout',
    label: 'Select a layout',
    value: 'center',
    propName: 'layout', 
    options: [
        { label: 'Center', value: 'center', src: 'http://img.com/center.jpg' },
        { label: 'Left', value: 'left', src: 'http://img.com/left.jpg' },
        { label: 'Right', value: 'right', src: 'http://img.com/right.jpg' }
    ],
  },
  {
    type: 'text',
    category: 'content',
    label: 'Message :',
    propName: 'message',
    placeholder: 'Enter a message'
  },
]

4. Condition management

In the configuration form, you can show or hide a component (if a component is present or a value is active) by adding a conditions property.

The property is an array that you can use to handle one or more conditions. Make sure each condition contains a property with one of the following keys: "field" or "value"

Here is an example of the 'Select' component. Components are shown only if there is another component with an "animals" propName AND another component with a "videogames" propName:

export default [
  {
    type: "select",
    label: "Which one ?",
    placeholder: "Panda",
    propName: "animal",
    conditions: [
      { field: "animals" },
      { field: "videogames" },
    ],
    options: [{ label: "Cat", value: 1 }, { label: "Dog", value: 2 }]
  },
]

Here is an example of the Selectcomponent. Components are shown only if there is another component with a "videogames"propName that has "cod" value :

export default [
  {
    type: "select",
    label: "Which one?",
    placeholder: "Panda",
    propName: "animal",
    conditions: [
      { field: "videogames", value: "cod" },
    ],
    options: [{ label: "Cat", value: 1 }, { label: "Dog", value: 2 }],
  },
]

5. Translation

You can add translation to label, value and placeholder. To add a translation, create an object with at least 2 properties. Please use these keys :

• en: English language
• fr: French language
• es: Spanish language
• de: German language

Here is an example of the component with the label translated into french and english:

export default [
  {
    category: "conditions",
    propName: "wysiwyg",
    type: "wysiwyg",
    value: "<strong>BOLD</strong> <i>italic</i>",
    label: {
      fr: "FR wysiwyg",
      en: "EN wysiwyg",
    },
  }
],