Skip to main content
shubhamy3376
Known Participant
April 29, 2024
Solved

Radio Field Image

Hi Everyone,

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

    shubhama926776
    shubhama926776Answer
    Brainy
    April 29, 2024

    Hello [mention:bb176b67c26c4e89b2173f39160c9f46:e9ed411860ed4f2ba0265705b8793d05] ,

    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(),
          "â%9DŒ" & "No",
          "🔘" & "No"
        ),
        link: a!dynamicLink(
          saveInto: a!save(local!selection, false())
        )
      ),
      
    }
  )
)


    Let me know if that works for you.

    शुभम्
    View in thread

    10 replies

    karumurua531442
    karumurua531442
    Participating Frequently
    April 29, 2024

    hi [mention:bb176b67c26c4e89b2173f39160c9f46:e9ed411860ed4f2ba0265705b8793d05]  you may need to download some external images and show them using a!richtextImage() 

    shubhama926776
    shubhama926776
    Brainy
    April 29, 2024

    Hello [mention:bb176b67c26c4e89b2173f39160c9f46:e9ed411860ed4f2ba0265705b8793d05] 

    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: {"✅", "â%9DŒ"},
    choiceValues: {1, 2},
    labelPosition: "ABOVE",
    choiceLayout: "COMPACT",
  )
}


    शुभम्
    shubhamy3376Author
    Known Participant
    April 29, 2024

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

    shubhama926776
    shubhama926776
    Brainy
    April 29, 2024

    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.

    शुभम्
    stefanhelzle0001
    stefanhelzle0001
    Brainy
    April 29, 2024

    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.

    harshk1671
    harshk1671
    Inspiring
    April 29, 2024

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

    Terms & ConditionsAccessibility statement