Last Updated:
September 27, 2021
by
Muskan Purohit
| Version: 7
| 2,327 views
| 0 followers
members are following updates on this item.
This article shows developers how to create and access configuration options for the custom Igloo widgets they create.
The following data types are supported for custom userConfig options inside a widget:
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"
}
]
}
]
}
(Fig. 3.1) Example integration.json showing the full suite of userConfig options.
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();
}
}
}
Tip: The above code block can be included in content.html by use of the SCRIPT tag.
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
(Fig. 4.1) Console logging off the widgetConfig JavaScript object array.