Cards as Buttons Pattern: Add / Remove from array

I'm following the cards as a button layout.  I have a series of "buttons" that are generated dynamically.  

What I'm trying to achieve is that my component tracks which buttons are currently selected.

There is a rule input which is a list of integers of the selected buttons. I would like when the button is clicked for the id of the button to be added or removed from the list and the button card will change colors from selected to not selected and back.

Currently the coloring works when setting the selected values by default but I cannot get the values to update when clicking on the "button".

a!cardLayout(
                                    contents: {
                                      a!richTextDisplayField(
                                        value: { a!richTextItem(text: local!itemNum) },
                                        align: "CENTER"
                                      )
                                    },
                                    link: {
                                      a!dynamicLink(
                                        value: local!selectedPeriods,
                                        saveInto: a!save(ri!selectedPeriods,
                                          if(
                                            contains(ri!selectedPeriods, local!itemNum),
                                            remove(
                                              ri!selectedPeriods,
                                              whereContains(ri!selectedPeriods, local!itemNum)
                                            ),
                                            append(ri!selectedPeriods, local!itemNum)
                                          )
                                          )
                                      )
                                    },
                                    height: "AUTO",
                                    style: if(
                                      contains(ri!selectedPeriods, local!itemNum),
                                      "ACCENT",
                                      "STANDARD"
                                    ),
                                    shape: "ROUNDED",
                                    padding: "NONE",
                                    marginAbove: "NONE",
                                    marginBelow: "EVEN_LESS",
                                    showBorder: false,
                                    borderColor: "ACCENT",
                                    showShadow: true
                                  )

  Discussion posts and replies are publicly visible

Parents Reply Children
  • No it's not all the code I have. This is inside a a!foreach() loop.  local!itemNum is a calculated value based on the loop the number of columns in my layout etc to generate a grid of buttons.  This is all working as expected.

    Layout is similar to below where each indivdual number is the a!cardLayout Component with the number as the text.

    | 1 | 2 | 3 |

    | 4 | 5 | 6 |

    | 7 |

    If I set ri!selectedPeriods = {3, 5, 7 } manually then those corresponding "buttons" are highlighted correctly using the style parameter.

    What I want now is that if I click on 3 then the index is removed from ri!selectedPeriods list and the button will change colors as a result.

    If I were to click on 6 then it will add the index to the selectedPeriods input and that now would change colors to the selected color.

    Whatever, I'm doing in 

    link: a!dynamicLink(...) is not working and I'm trying to understand what might be happening or a better way to accomplish this.