Disable button.

Hi, you would need to save values on click of each button, you can use local variables to save your values. And the use this local variables to configure disable parameter of each button.

The way you use the logic for the disabled parameter seems to be OK. Where and how do you modify the two locals? This should be part of the saveInto of the dropdown.

a!localVariables(
  local!btnSelected,
  {
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          icon: "check",
          size: "LARGE",
          style: "DESTRUCTIVE",
          saveInto: { a!save(local!btnSelected, 1) },
          disabled: contains({ 2, 3 }, tointeger(local!btnSelected))
        ),
        a!buttonWidget(
          icon: "check",
          size: "LARGE",
          style: "DESTRUCTIVE",
          saveInto: { a!save(local!btnSelected, 2) },
          disabled: contains({ 1, 3 }, tointeger(local!btnSelected))
        ),
        a!buttonWidget(
          icon: "check",
          size: "LARGE",
          style: "DESTRUCTIVE",
          saveInto: { a!save(local!btnSelected, 3) },
          disabled: contains({ 2, 1 }, tointeger(local!btnSelected))
        )
      },
      align: "CENTER"
    )
  }
)

Please try this code. I save the value for each button as 1,2 and 3 and according to these values i set the disability logic for the buttons.

It works, but just disabled the button number one and it doesn't let me choose another one.

The 3 buttons must be enabled.

a!localVariables(
  local!buttonVal:0,
  local!btnSelected: true,
  {
    a!boxLayout(
      label: "Tu Escudo",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!cardLayout(
                  contents: {
                    a!cardLayout(
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextHeader(
                              text: {
                                "Enfermedades Frecuentes"
                              }
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      height: "AUTO",
                      style: "NONE",
                      marginBelow: "STANDARD",
                      showBorder: false
                    )
                  },
                  height: "AUTO",
                  style: "NONE",
                  marginBelow: "STANDARD",
                  showBorder: false
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!sectionLayout(),
                a!dropdownField(
                  label: "Plan Dental",
                  labelPosition: "COLLAPSED",
                  placeholder: "$10,000.00",
                  choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                  "Option 5", "Option 6", "Option 7", "Option 8",
                  "Option 9", "Option 10", "Option 11", "Option 12"},
                  choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
                  saveInto: {},
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!cardLayout(
                  contents: {
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!buttonArrayLayout(
                              buttons: {
                                a!buttonWidget(
                                  icon: "check",
                                  size: "LARGE",
                                  style: "DESTRUCTIVE",
                                  saveInto: { a!save(local!btnSelected, 1) },
                                  disabled: contains({ 2, 3 }, tointeger(local!btnSelected))
                                )
                              },
                              align: "CENTER"
                            )

I made a few changes on the code, I created 7 local variables because I have 24 buttons and every row is different

Thank you a lot,

Yes, Based on the requirement we can change the disable condition.

You can also use a!map instead of so many local variables. That would also give you control on which index of map you want to work on if you are building this grid dynamically.