Issue with RadioButtonGroup/CheckboxGroup and Name Value Pair binding

Juan Machado

February 22, 2019 at 10:07 am #5407

Dear team, how are you?

I’m currently working on a project to migrate a deprecated Process App to Spark UI’s new components and add mobile support, through several releases, meaning we are updating a fixed number of UI’s per release so that our production environment doesn’t face major risks. I’ve had some issues along the way but haven’t really faced any unsolvable problem so far. My BPM version is 8.6 CF2018.03

The first issue I had was that the Name and Value data seemed to be getting switched in Spark Components, this was easily fixed by matching name and value with the Display And Value properties in Configuration Options>Item Selection Data.

 

My problem right now relies on the way Name Value Pair bindings seem to bee handled by the new UI Toolkit.

I am using an Ajax service to populate a RadioButtonGroup with a NvP list, this RadioButtonGroup has a NvP binding as well, I configured it to show the correct values using Display/Value properties as I explained above and it worked, however the NvP binding isn’t changing at all, when the user selects an item, it stays null, it seems the RadioButtonGroup’s binding is behaving like a String and not a NvP.

I tried to use the OnChange event to do something like this:
me.getData().name=me.getItemText(me.getSelectedItem());
me.getData().value=me.getSelectedItem();

I tried other similar things combining setData() and all the different methods the API offers, I even tried to use me.setData(new Object()): which resulted in a “Too much recursion” exception, making me feel a bit naughty haha!

I also have a CheckBoxGroup, which is populated by an Ajax service with a NvP List, and has a NvP list as binding, I configured it the same exact way, and to my surprise, the binding isn’t updated as well, it seems to behave like a list of String and not NvP.

Feeling hopeless I expected to have this same issue with the Single Select component, however I was astonished to find that this component has a Configuration Option called Output Business Data, this option does exactly what I need, by simply writing name and value in the Display and Value properties my problem was fixed.

 

My questions, dear team, are: How can I achieve the behavior shown in the Single Select component with the RadioButtonGroup and CheckBoxGroup components? Why isn’t the configuration option for Output Business Data present in this components?

Sadly we have many UI’s that mix this components, this represents a major issue for our update, since we cannot change the way bindings work until all screens have been updated, for we could break things that are working well in production. My last hope relies in adding Data components with the right bindings and using the onChange events of RadioButtonGroup and CheckBoxGroup to update my NvP’s and NvP lists. But I pray I don’t have to do something like this.

 

Thank you so much for your time, I look forward to hearing from you soon.

Juan Machado

February 25, 2019 at 5:11 am #5408

Hello Spark team!

I managed to solve the issue, I’m not really sure if its the best approach but it seems to be working so far. I noticed the RadioButtonGroup actually thinks it has a String Binding, so I copied the RadioButtonGroup from UI’s Toolkit to my Process App then I added an extra line to the beginning of the inline JS like this:

this.cambio=this.change;
var path = (dojoConfig.isDebug === true) ?
com_ibm_bpm_coach.getManagedAssetUrl('BPMExt-Control-RadioButtonGroup.js', com_ibm_bpm_coach.assetType_WEB, 'SYSBPMUI', false) :
com_ibm_bpm_coach.getManagedAssetUrl('BPMExt-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSBPMUI', false);
var _this = this;
require({async:false},[path], function() {
bpmext_control_InitRadioButtonGroup.call(_this, bpmext, utilities, domClass, domAttr, domConstruct, dom, json);
});

I then edited the change Script like this:

var valor=this.context.binding.get("value");
if(typeof this.context.binding.boundObject[this.context.binding.property] === "string")
this.context.binding.boundObject[this.context.binding.property]={name:event, value:valor};

 

Then i added this line to the OnChange event of the RadioButtonGroup component from the UI.

me.cambio(me.getItemText(me.getSelectedItem()));

 

I’ve only done this to the RadioButtonGroup but it looks like it wont be so difficult to use the same logic with CheckBoxGroups, all my tests have passed so far but I would appreciate some feedback and, hopefully, a better way to achieve the expected result.

Thank you for your time!

Juan Machado

February 25, 2019 at 12:57 pm #5409

I found that what I described above can be made simple by just adding this line to the OnChange Event of the regular component without making changes:

if(typeof me.context.binding.boundObject[me.context.binding.property] === "string")
me.context.binding.boundObject[me.context.binding.property]={name:me.getItemText(me.getSelectedItem()), value:me.getSelectedItem()};

However I’ve yet to find a way to make the CheckBoxGroup work.

Juan Machado

February 26, 2019 at 6:27 am #5411

I made it work for the CheckBoxGroup by adding the following code to the OnChange event.

me.context.binding.boundObject[me.context.binding.property].items=[];
for (var i=0; i<me.getSelectedItems().length; i++) {
me.context.binding.boundObject[me.context.binding.property].items[i]={value:me.getSelectedItems()[i], name:me.getItemText(me.getSelectedItems()[i])};
}
me.getData().items=me.context.binding.boundObject[me.context.binding.property].items;

I noticed that updating me.getData().items only is not enough since Client Side Validations seem to use me.context.binding.boundObject[] to work, so both objects should be updated. I laso noticed there are other arrays in the me.getData() object that could be updated too, however it doesn’t seem to be necessary.

I’ll probably work on making it a bit more efficient when I have time, I’m still looking forward to hearing from you guys 🙂

Thank you for your time.

SPARK Support

February 28, 2019 at 10:28 am #5412

Hi Juan,

You are correct.  Checkbox and Radio Button groups set the binding as a String.

While your work around looks good, you may want to submit a Request for Enhancement with IBM to include the feature to bind to Complex types for these controls: https://www.ibm.com/developerworks/rfe/

Regards,

Stephen P.