Options Function - Dynamically Populating Options

The checkbox group, drop-down list, list box, and radio button group fields each have an options function property that can be used to dynamically generate the options that appear in them.

That means you can get the options from calls to other services, for example an End Point, or another element on your form, like a form variable, and manipulate what's shown based on other choices the user has made.

The function should return an array of arrays, like this:

[["value1", "display1", "group1"],["value2", "display2", "group1"],["value3", "display3", "group1"]]

Note that the "group" element is only relevant to drop-downs and list boxes.

The Options Function

This example calls a server-side End Point, which uses the iCM API to look up some article headings from this site.

Here's what the End Point returns:

"result": [{
    "_ItemClass": "CSArticle",
    "ArticleHeading": "Forms"
}, {
    "_ItemClass": "CSArticle",
    "ArticleHeading": "Form Data Browser"
}, {
    "_ItemClass": "CSArticle",
    "ArticleHeading": "Workflow Processes"
}, {
    "_ItemClass": "CSArticle",
    "ArticleHeading": "Handlebars Templates"
}]

This is the options function in the checkbox group field. It calls the End Point, then pushes the article headings into the value and display positions for each option.

Or (including alphabetical sorting with localeCompare):

function(helper, optionData) {
    let articleData = helper.utilServerAPIServerCall('serverlibrary', 'formstraining.articles.articleHeadings', {}, {});
    articleData.forEach(element => {
        optionData.push([element.ArticleHeading, element.ArticleHeading]);
    });
    //lets make it alphabetical
    optionData.sort((a, b) => {
        return a[1].localeCompare(b[1], 'en', {
            sensitivity: 'base'
        });
    });
    return optionData;
}