Radio button -- choose title and value from options input object

[chTim]

For the select component you can choose which element of an object is used for the title and which is used for the value. For the radio component it seems you have to use “title” and “value” as the keys in the object.

I did use map() to build this from my already built array so not the biggest deal but had to think about it for a minute.

ALSO I would like my value to actually be an object but I cannot seem to make that work the way it currently is. The value I get in the incoming value field of the component is a json string. I set “value” in the options array to equal the same json string for one option but it would not set the component to that value.

[Max]

Hi @chTim,

Just so we are all on the same page, you are asking for the radio button component to let you choose the title and value of the options from an array of objects, just like the select component does, right?

Regarding the value being an object, that is possible to do. If an option has an object as the value like this

If you then select the ‘Radio 3’ radio button and check the value, it’s the object.

[chTim]

@Max. Thanks for the response. I was able to do that but the issue I ran into was multi faceted.

1. I wanted options to be built from a pre-existing array of objects that havce other attributes than “title” and “value”.

2. I wanted the output value of the selected option to be the object that was chosen from the options array in step 1.
   .
   I was able to do BOTH of these (just not as “simple” as you can do in the select component). I used the following code but actually reference an array hosted in a state variable for the options array.
   

   

3. The part I have not solved is → setting the initial value of the component OR setting the value through an action. If I select “One” the component value correctly becomes the object:
   

   
   
   If I put this in handlebars in the “value” field of the component it does NOT set the component to “One”.
   
   
   
   Side note: the value of the component when referenced through ui.componentName.value would be correct BUT it is not visually set/selected in the component.
   .
   I tried running an action to set the value also and got the same results. If I do just a value instead of an object for the values of the options I can set the value of the component just fine. Like this…
   
   
   
   

[Max]

Sorry for the late reply.

This happens very likely because of the implementation of the radio component, which probably expects the value to be a string. So, when you programmatically set the value of the component, UI Bakery checks if it can find an option with that string as value and sets that radio button active. The value of the component might be set to the object, but since it couldn’t find any string value matching the object passed in setValue it doesn’t set any radio button active.

The only solution that comes to mind right now, would be to set the value to a CSV like format.
So instead of

[
   {
      title: "One",
      value: {
         title: "One",
         uibName: 1,
         knackName: 1,
         displayName: "One"
      }
   },
   { ... }
]

set the value to something like

[
   {
      title: "One",
      value: "One;1;1;One"
   }
]

This way, when you need the specific props, you can just value.split(";").
This can get pretty ugly, though, when setting the value directly like

{{ ui.radio.setValue("One;1;1;One") }}

and also unmanageable when there are many more props than that.

One solution to that might be to have the options in an action, so that when you want to set a value programmatically you can do something like

const options = {{ actions.options.data }};
const desiredOption = options.find(o => o.title === "One");
{{ ui.radio.setValue(desiredOption.value) }};

Hope that works for you. If it doesn’t, just say the word and we might find a different solution that works for you.