How Would You Dynamically Change Checkbox Title Based On Dropdown List

[iRadiate]

I have a UX component with a set of 12 checkboxes on it.
I want to change the title of each checkbox based on the choice made from a dropdown control. See screenshot below.

Any thoughts on the best approach to do this?
I'm thinking a Lookup/Fill in fields in the OnChange event of the dropdown list, but with so many choices it might not be very responsive.


Checkbox UX.jpg

[christappan]

So first, are you saying that each machine has 12 different checkbox labels?

Second, is this just client-side? Like, if I select machine 21F, it changes the labels for each checkbox. I check the checkboxes, I sign it and Save. The database then stores the machine and the checkbox values, but doesn't store the checkbox labels. Right?

If both of those are true, open this in a browser, right click on a checkbox label, and click "Inspect Element". You'll see the id of that label. Let's say the id is "DLG1.V.R1.EOFF1.1.L". To change that using Javascript, we just have to say:
$('DLG1.V.R1.EOFF1.1.L').innerText = 'New Label';

The portion before the first period is the same as {dialog.ComponentName}.

I did something similar on one of my components. Create a hidden list control with the Machine ID and then each label name. In the example below, the list control is called "machineLabels". I'm imagining a list with columns
machineId|label1|label2|label3

Set your return value for the list to be the machineId.

In your Javascript functions for the UX, create a function like this:

function setLabels(machineId) {
 var label1 = '';
 var label2 = '';
 var label3 = '';

 var lObj = {dialog.object}.getControl('machineLabels');
 var index = lObj.indexFromValue(machineId); // get 0-based row of list where machineId matches

 if(index >= 0) {  // a matching row was found
  label1 = {dialog.object}.listGetValue('machineLabels','label1',index); // get the value of label1 column of your list in the matching row
  label2 = {dialog.object}.listGetValue('machineLabels','label2',index);
  label3 = {dialog.object}.listGetValue('machineLabels','label3',index);
 }

 // change the ids here to whatever they are in Developer Tools Inspect Element
 $('{dialog.ComponentName}.V.R1.EOFF1.1.L').innerText = label1;
 $('{dialog.ComponentName}.V.R1.EOFF2.1.L').innerText = label2;
 $('{dialog.ComponentName}.V.R1.EOFF3.1.L').innerText = label3;
}

Then, in the machine dropdown onChange event, put:

var machineId = {dialog.object}.getValue('MACHINE');
setLabels(machineId);

[iRadiate]

Chris,

First off .. thanks very much for taking the time to respond with such a detailed explanation!

I understand what you are doing with the code and I've mocked up a test component. For some reason something isn't quite working, I may have missed some minor syntax somewhere but I don't see it.
If you have time, I've attached the mock UX component. The list is not hidden just so I can see what is in it.

[christappan]

Two things:
1) I had mentioned that the list needs to be set to return the machineId. List Builder > Return Value > Return field --> machineId.
2) I had to open it in Chrome and use "Inspect Element" on the checkbox labels. Instead of
$('{dialog.ComponentName}.V.R1.EMO_1').innerText = label1;
they need to be
$('{dialog.ComponentName}.LBL.R1.EMO_1').innerText = label1;

[christappan]

Ah I see. You had used the checkbox instead of the control label. Don't quote me on this, but I'm pretty sure all Alpha UX controls have a label with LBL in the id and the control itself is V. In HTML, checkboxes also have labels, which Alpha calls "Checkbox text" in the field properties. All that said, though, you were trying to set the innerText of a <input type="checkbox" which doesn't make any sense.

[iRadiate]

Yes, I actually noticed I wasn't returning machineId from the list (after I posted the issue). But I missed the .V.R1 versus .LBL.R1
Once that was changed, it works great !

I've actually decided to replace the checkbox labels with textboxes (labels) and I am going to bind them to the backend SQL table along with the checkbox state. So I'm back to the .V.R1 again, LOL.

Thanks again Chris for taking the time to help out, I really appreciate it. It's a pretty nice way to handle this.

[iRadiate]

Working component ...https://www.screencast.com/t/NuPOcZbzEqwm