Radio Field Image

hi Rahul009  you may need to download some external images and show them using a!richtextImage() 

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",
  )
}

The built in radio buttons and check boxes do not support that. With the exception of Unicode character visuals.

But, you can easily build your own component that uses any images you want.

Hi Shubham Aware , I need to display icon along with label. When tick icon is there then circle should not be displayed and vice versa.

My question here is why you are using radioButton field for this requirement? You can use richtextDisplayField and put show when condition to achieve this using dynamicLink.

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",
          "🔘" & "Yes"
        ),
        link: a!dynamicLink(
          saveInto: a!save(local!selection, true())
        )
      ),
      ", ",
      a!richTextItem(
        text: if(
          toboolean(local!selection) = false(),
          "❌" & "No",
          "🔘" & "No"
        ),
        link: a!dynamicLink(
          saveInto: a!save(local!selection, false())
        )
      ),
      
    }
  )
)

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"
      )
    }
  )
)

Thank you Shubham Aware , could you please share me the link for unicode values.

https://www.compart.com/en/unicode/U+2705#:~:text=Unicode%20Character%20%E2%80%9C%E2%9C%85%E2%80%9D%20(U%2B2705)


https://www.compart.com/en/unicode/U+274C

I shared link for Unicode's which I used.

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.