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
In line 10, you are still using the local variable. Could that be the reason?
I have tried both ways, with local! and ri!. Neither work to update the array when clicking on the card button.
It feels like this is not all the code you have.
What value does that local!itemNum have?
Stefan Helzle said:In line 10, you are still using the local variable
I'd go one step further here, and point out that line 10 is irrelevant and not necessary. When the dynamic link only does manual a!save() statements, the "value" parameter is not needed or used for anything, and (for clarity/readability/sanity) should be removed.
Note: i'm not claiming this is causing the issue at play here, but (as we can see here) isn't making anything any *less* confusing.
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.
the "link:" parameter expects a link, not an array of link.
Fixing this issue seems to fix the issue I assume you're having, at least when I try it.
Yeah I initially tried it without line 10. That was just one of my later attempts.
Always something so simple. That was it. Now I just need to update the logic for deselecting as it's just removing the first item in the list not the one I'm actually clicking on. Thanks!
Also your WhereContains is backwards - I forget this all the time, too.
Figured that out as well. Order of parameters is opposite in contains, and whereContains.
Flipped those and it's all working as expected now. Thanks!
-- Posted before I saw your update. But that was it.