Need help: Update a Read-only variable with approvers data on variables value change in catalog item

[MHimabindu]

Hello Community,

I am working on catalog item and need some help with a development requirement.

Use case: I have around 32 variables in my catalog item. Each of these variable is user-selectable(list collector). Based on variable value empty/filled, I want to dynamically update a read-only variable depending on the non-empty variables. This update needs to happen in real-time on the client side before form submission.

I have tried the classic approach with  onChange catalog client scripts on each variable, but this might cause performance issue and is inefficient.

I am looking for a better and single script to listen for changes on any variable and updates the read-only variable accordingly.

Any help or suggestions are greatly appreciated!!

Thanks in advance!!

[pavani_paluri]

Hi @MHimabindu ,

We can write a onload client script and attach a listener to all 32 list collector variables and update the read-only variable dynamically. Please use attached script.

Mark it helpful if this helps you to understand. Accept solution if this give you the answer you're looking for

Kind Regards,

Pavani P

[Ankur Bawiskar]

@MHimabindu 

you will have to use those many onChange client scripts but you can use single onLoad client script and attach listener but it might require DOM manipulation

DOM manipulation is not recommended.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Its_Azar]

Hi @MHimabindu ,

great question! Instead of using 32 individual onChange scripts, you can go with a single onLoad catalog client script that uses a global change listener like g_form.onChange(...) to watch all user variables. Loop through your 32 variable names in a list, attach a change listener to each, and inside that listener, count how many of them have values. Then, update your read-only variable accordingly. guess tgis way you can avoid perfomance issues too.

If this helps kindly accpet the solution thanks.

[Rafael Batistot]

Hi @MHimabindu 

Here the step-by-Step Solution

1. Create a 

Catalog Client Script

• Type: Catalog Client Script
• Applies to: your Catalog Item
• UI Type: Desktop
• Script Type: onLoad

2. Use this script:

function onLoad() {
// List all variable names or sys_ids of the List Collectors
var variableNames = [
'var1', 'var2', 'var3', 'var4', 'var5', 'var6',
'var7', 'var8', 'var9', 'var10', 'var11', 'var12',
'var13', 'var14', 'var15', 'var16', 'var17', 'var18',
'var19', 'var20', 'var21', 'var22', 'var23', 'var24',
'var25', 'var26', 'var27', 'var28', 'var29', 'var30',
'var31', 'var32'
];

// Function to update the summary variable
function updateSummary() {
var filledCount = 0;
var filledList = [];

variableNames.forEach(function(name) {
var val = g_form.getValue(name);
if (val) {
filledCount++;
filledList.push(name);
}
});

// Example: update a read-only variable with the count
g_form.setValue('summary_variable', 'Filled: ' + filledCount + ' of ' + variableNames.length);
}

// Attach a single event listener to each variable dynamically
variableNames.forEach(function(name) {
g_form.setMandatory(name, false); // Just in case
g_form.attachChangeHandler(name, function() {
updateSummary();
});
});

// Initial update on load
updateSummary();
}

**** Replace 'var1' to 'var32' with the actual variable names (not labels), and also 'summary_variable' with your actual read-only variable name.