Introduction

This article shows developers how to create and access configuration options for the custom Igloo widgets they create.

Supported data types

The following data types are supported for custom userConfig options inside a widget:

• Integer (number)
• String (text)
• Boolean
• Drop-down list

integration.json architecture

After downloading the Hello World example, developers will find a file named integrations.json in the app sub-folder. One of the objects in this file is userConfig, and this is where custom widget options need to be configured. Below is a sample (Fig 3.1):

{
    "version": "0.0.1",
    "id": "igdeploy-hello-world",
    "name": "Igloo Hello World widget",
    "description": "Hello World example for the Integrations Widget",
    "vendorName": "Igloo",
    "categories": [],
    "published": "",
    "userConfig": [
        {
            "name": "intParam",
            "label": "Enter a number value",
            "type": "number",
            "default": 4,
            "description": "Please enter a number"
        },
        {
            "name": "textParam",
            "label": "Enter a text string",
            "type": "text",
            "default": "Text placeholder",
            "description": "Please enter a text string"
        },
        {
            "name": "boolParam",
            "label": "Enter true or false",
            "type": "boolean",
            "default": true,
            "description": "Please select if the value is true or false"
        },
        {
            "name": "optionParam",
            "label": "Color choices",
            "type": "choice",
            "description": "Please select a color",
            "default": "green",
            "required": false,
            "choices": [
                {
                    "value": "blue",
                    "description": "Blue"
                },
                {
                    "value": "green",
                    "description": "Green"
                },
                {
                    "value": "red",
                    "description": "Red"
                }
            ]
        }
    ]
}

How to access the options inside the widget

The following code block will get you started in accessing your custom configuration options. The first step is to build a JavaScript object array that is accessible by the window:

/**
 * @description If there are widget config options to get, get them, and populate a JavaScript object array with the key/value pairs
 */
if (window.frameElement.getWidgetConfig) {
    var c = window.frameElement.getWidgetConfig();
    window.widgetConfig = {};
    if (c) {
        for (key in c) {
            window.widgetConfig[key] = c[key].toString();
        }
    }
}

Using the integration.json file in the above example would create the following output by typing window.widgetConfig in the console:

window.widgetConfig
{intParam: "4", textParam: "Text placeholder", boolParam: "true", optionParam: "green"}
boolParam: "true"
intParam: "4"
optionParam: "green"
textParam: "Text placeholder"
__proto__: Object