Setting Dropdown Field Options Dynamically in the Case Manager Work Details Page

To dynamically populate a dropdown field in the Work Details page of IBM Case Manager, follow these steps:

Steps to Implement

1. Add a Script Adapter Widget:

• Drag and drop a Script Adapter widget onto the Work Details page.

P8 Work Details Page

• This script adapter will handle retrieving and populating the dropdown options.

Sample code to dynamically populate Parent Country dropdown Field.

Get P8 Hub🍁’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
try {
    var responseself = this;
    var coordination = payload.coordination;
    responseself.editable = payload.workItemEditable;
    var solution = responseself.solution;
    var prefix = solution.getPrefix();

    require(["icm/base/Constants", "icm/model/properties/controller/ControllerManager"], function(Constants, ControllerManager) {

        if (coordination) {
            coordination.participate(Constants.CoordTopic.BEFORELOADWIDGET, function(context, complete, abort) {
                /* Obtain the controller binding for the editable. */

                if (!responseself.hasOwnProperty('propsController')) {
                    responseself.propsController = ControllerManager.bind(responseself.editable);
                }
                var theController = responseself.propsController;

                var parentCountry = theController.getPropertyController("PH_ParentCountry");

                //Set Parent Country Drop down
                var serverBase = window.location.protocol + "\/\/" + window.location.host;
                var feedURL = serverBase + "/P8Hub/getCountries";
                var countries = "";

                var xhrArgs = {
                    url: feedURL,
                    handleAs: "json",
                    sync: true,
                    preventCache: true,
                    headers: {
                        "Content-Type": "application/json"
                    },
                    load: function(data) {
                        countries = data;
                    },
                    error: function(error) {
                        alert("Filter query failed due to " + error);
                    }
                };
                dojo.xhrGet(xhrArgs);
                //To test without using the P8Hub getCountries web service, I am providing this sample response....
                countries = [{
                    "Country": "SL",
                    "Description": "Sri Lanka"
                }, {
                    "Country": "CA",
                    "Description": "Canada"
                }, {
                    "Country": "UK",
                    "Description": "United Kingdom"
                }, {
                    "Country": "JP",
                    "Description": "Japan"
                }, {
                    "Country": "FR",
                    "Description": "France"
                }, {
                    "Country": "US",
                    "Description": "United States"
                }, {
                    "Country": "GR",
                    "Description": "Germany"
                }, {
                    "Country": "RS",
                    "Description": "Russia"
                }, {
                    "Country": "CN",
                    "Description": "China"
                }, {
                    "Country": "SG",
                    "Description": "Singapore"
                }, {
                    "Country": "AU",
                    "Description": "Australia"
                }];

                var countriesArr = [];

                if (countries != null) {
                    console.log("Drop down List Length: " + countries.length);
                    if (countries.length > 0) {
                        for (var i = 0; i < countries.length; i++) {
                            countriesArr.push({
                                label: "(" + countries[i].Country + ") " + countries[i].Description,
                                value: countries[i].Country
                            });
                        }
                        parentCountry.set("choices", countriesArr);
                    }
                } else {
                    parentCountry.set("value", "Sri Lanka");
                }

                complete();
            });
        }
    });
    return payload;

} catch (exception) {
    alert(exception);
}

2. Configure Wiring:

• Configure the Script Adapter to execute when the Work Details page is loaded.

Wiring Events

3. Testing:

• Open the Work Details page and verify that the dropdown is populated with the data provided by your web service or API.

Work Details Page

This approach ensures a dynamic user experience, allowing dropdown options to be set based on business logic or external data sources.