Skip to main content
A
abduss0004
January 27, 2025
Question

Editable Grid with Conditional Button Activation Based on Radio Button Selection

  • January 27, 2025
  • 4 replies
  • 0 views

Hi Appian Community,

I’m working on an Editable Grid and need some help with the following requirements:

  • I have 4 fields in each row: 3 of them should be read-only, and 1 should be editable (this will be a Radio Button field).
  • The Radio Button field should allow users to select one of several options.
  • The button (located outside the grid) should only be clickable when at least one option is selected in the Radio Button field for each row.

Could you please help me with:

  1. The configuration for the Editable Grid where three fields are read-only, and the Radio Button field is editable.
  2. A way to ensure that the button is only enabled when the Radio Button field is selected for all rows in the grid.

Thanks in advance for your assistance!

4 replies

stefanhelzle0001
stefanhelzle0001
January 27, 2025

Do you already have some code you can share?

A
abduss0004Author
January 27, 2025

No !

stefanhelzle0001
stefanhelzle0001
January 27, 2025

You could start with this recipe.

https://docs.appian.com/suite/help/24.4/recipe-add-edit-and-remove-data-in-an-inline-editable-grid.html

konduruc733182
konduruc733182
January 27, 2025

Hello [mention:2fdbb523a00f4f2ca0160e12dc479059:e9ed411860ed4f2ba0265705b8793d05] ,

Here's something that you can start with. 

a!localVariables(
  local!gridData: {
    {
      value1: "Alex",
      value2: "20",
      value3: "Europe",
      radioOption: null
    },
    {
      value1: "Jake",
      value2: "22",
      value3: "Australia",
      radioOption: null
    }
  },
  a!formLayout(
    contents: {
      a!gridLayout(
        label: "My Grid",
        headerCells: {
          a!gridLayoutHeaderCell(label: "Name"),
          a!gridLayoutHeaderCell(label: "Age"),
          a!gridLayoutHeaderCell(label: "Country"),
          a!gridLayoutHeaderCell(label: "Choice")
        },
        columnConfigs: {},
        rows: a!forEach(
          items: local!gridData,
          expression: a!gridRowLayout(
            contents: {
              a!textfield(
                label: "Field 1",
                value: fv!item.value1,
                readOnly: true
              ),
              a!textfield(
                label: "Field 2",
                value: fv!item.value2,
                readOnly: true
              ),
              a!textfield(
                label: "Field 3",
                value: fv!item.value3,
                readOnly: true
              ),
              a!radioButtonField(
                label: "Select Option",
                value: fv!item.radioOption,
                saveInto: fv!item.radioOption,
                choiceLayout: "COMPACT",
                choiceLabels: { "1", "2", "3" },
                choiceValues: { 1, 2, 3 }
              )
            }
          )
        )
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        disabled: contains(
          touniformstring(local!gridData.radioOption),
          null()
        )
      )
    )
  )
)

Terms & ConditionsAccessibility statement