Need to populate certain values to dropdown on UIB on selection of certain options

[sreeshsurendran]

Hi all

I have a requirement on UIB, whenever a Complaint reason is selected, there are certain choices that needs to be populated. (Reference screenshot below)

I have tried below client script, but seems not working.

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {any} params.event
 * @Param {any} params.imports
 * @Param {ApiHelpers} params.helpers
 */
function handler({ api, event, helpers, imports }) {
    const reason = api.state.complaintReason;
api.setState('otherInfo', 'Vandalism / damaged handset');
    switch (reason) {
        case 'advertising':
            api.setState('wasThisAgreed', 'no');
            api.setState('finalResponseGiven', 'no');
            api.setState('otherInfo', 'Unauthorized advertising');
            break;

    }
}

Let me know any workaround or steps to proceed.

Thanks,

Sreesh Surendran

[VSK5451]

Try this:

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({ api, event, helpers, imports }) {
const reason = api.state.complaintReason;

// Map complaint reason -> dependent field values
const rules = {
advertising: {
wasThisAgreed: "no",
finalResponseGiven: "no",
otherInfo: "Unauthorized advertising",
},
vandalism: {
wasThisAgreed: "no",
finalResponseGiven: "no",
otherInfo: "Vandalism / damaged handset",
},
// add more reasons here...
};

const values = rules[reason];

if (values) {
api.setState("wasThisAgreed", values.wasThisAgreed);
api.setState("finalResponseGiven", values.finalResponseGiven);
api.setState("otherInfo", values.otherInfo);
} else {
// Optional: reset fields when reason doesn't match a rule
api.setState("wasThisAgreed", "");
api.setState("finalResponseGiven", "");
api.setState("otherInfo", "");
}
}

[sreeshsurendran]

Thanks @VSK5451  for sharing the solution, but on my UIB the values are not poplated.

PS: There are Dropdown choice UIB component

[Dinesh Chilaka]

Hi @sreeshsurendran ,

Yes here you have used drop-down components , in UIB the dropdown component selected Item expects the array of values not the string , so whenever you are setting value of the client state parameter which is bond to the selected item of the dropdown component , you just need to like below

 api.setState('wasThisAgreed', ['no']);

This should work perfectly for you - please mark as helpful and accept the solution.