Radio Field Image

RE: Radio Field Image

Mike Schmitt — Mon, 29 Apr 2024 17:20:45 GMT

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.

RE: Radio Field Image

Shubham Aware — Mon, 29 Apr 2024 12:30:30 GMT

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.

RE: Radio Field Image

Rahul009 — Mon, 29 Apr 2024 12:15:25 GMT

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

RE: Radio Field Image

Harsh Kumar Agarwal — Mon, 29 Apr 2024 10:58:04 GMT

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

RE: Radio Field Image

Shubham Aware — Mon, 29 Apr 2024 10:31:08 GMT

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

Let me know if that works for you.

RE: Radio Field Image

Shubham Aware — Mon, 29 Apr 2024 10:20:35 GMT

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.

RE: Radio Field Image

Rahul009 — Mon, 29 Apr 2024 10:04:27 GMT

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

RE: Radio Field Image

Stefan Helzle — Mon, 29 Apr 2024 09:13:37 GMT

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.

RE: Radio Field Image

Shubham Aware — Mon, 29 Apr 2024 08:38:07 GMT

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

RE: Radio Field Image

Karumuru Abhishek — Mon, 29 Apr 2024 08:31:48 GMT

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