Radio Field Image

Question

Hi Everyone, 
 Can anyone please help me, Is it possible to display image in radio button as shown in screenshot below:

Shubham Aware · Accepted Answer

Hello Rahul009 , Radio button does not allow this modification but you can try below code as per your requirement. a!localVariables(
 local!selection,
 a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: if(
 toboolean(local!selection) = true(),
 "✅" & "Yes",
 "&#128280;" & "Yes"
 ),
 link: a!dynamicLink(
 saveInto: a!save(local!selection, true())
 )
 ),
 ", ",
 a!richTextItem(
 text: if(
 toboolean(local!selection) = false(),
 "❌" & "No",
 "&#128280;" & "No"
 ),
 link: a!dynamicLink(
 saveInto: a!save(local!selection, false())
 )
 ),
 
 }
 )
) Let me know if that works for you.

Shubham Aware · Answer

Hello Rahul009 No, direct image display in Appian radio buttons isn't possible. Bu you can try this and let me know if that works for you. I am using unicode to display radioButton label instead of image. {
 a!radioButtonField(
 choiceLabels: {"✅", "❌"},
 choiceValues: {1, 2},
 labelPosition: "ABOVE",
 choiceLayout: "COMPACT",
 )
}

Harsh Kumar Agarwal · Answer

Try using the following code, you may replace/configure the images as per your requirements. 
 a!localVariables(
 local!choice,
 a!richTextDisplayField(
 value: {
 a!richTextIcon(
 size: "EXTRA_LARGE",
 icon: "grin-alt-o",
 link: a!dynamicLink(saveInto: { a!save(local!choice, true()) }),
 linkStyle: "STANDALONE"
 ),
 a!richTextItem(text: " "),
 a!richTextIcon(
 size: "EXTRA_LARGE",
 icon: "meh-o",
 link: a!dynamicLink(
 saveInto: { a!save(local!choice, false()) }
 ),
 linkStyle: "STANDALONE"
 )
 }
 )
)

Mike Schmitt · Answer

This works but if you're going to go with the Rich Text Display Field approach (which I am also a fan of), I would actively discourage you to also use hardcoded Unicode values for icons, as instead you can just use the Rich Text Icon library (which is much better supported by Appian in general), including the ability to conditionally resize them and use whatever colors you desire.

Radio Field Image

Top Replies