Changing the ICON and Background on a repeated list item

I am looking for suggestions how to proceed. I have a repeated list of items. When the user taps an item, the phone scans a barcode. If the barcode that was scanned has the same value as the primary label in the repeated list, then I would like to change the icon to a check mark, and set the background to green. If the scanned value does not match the primary label in the repeated list, then I would set the icon to an X.

Currently the logic works and I can tell if the scanned value matches the primary label, but I cannot seem to do anything once that’s detected. My condition in the flow is:
RIGHT_STRIP(pageVars.componentScan, LENGTH(pageVars.componentScan) - 8) == repeated.current.document.fields.MATNR_COMPONENT.stringValue

I put up a toast, but how can I change the repeated item?

You could in fact use the same formula with which you check the similarity for the styling as well.

For icon at the properties where you select the icon, instead of selecting it from the dropdown, click on the binding and use a formula.

IF(RIGHT_STRIP(pageVars.componentScan, LENGTH(pageVars.componentScan) - 8) == repeated.current.document.fields.MATNR_COMPONENT.stringValue, "check", "times")

This will show the checkbox if the evaluation is true, and a times icon if it is false.

Use this formula for the background as well. But that is a bit trickier. Go into the style editor of the component and at the background color selection in the bottom find “Create new palette”. There you have an option for a formula. Again use the same formula as above, just replace the icon names with color hex codes.

Find more details on the background edit here:

1 Like

Hi Mihaly,

Your solution works well!

Perhaps you can help further. Currently I count how many scans are good and increment a counter which is displayed at the top of the repeating list, bound to a page variable. This works OK if the user scans the items he should. However, if he scans items that he has already scanned, the counter increments (incorrectly). In the image the counter shows 2 of 9 scanned correctly, but in fact there is only one item scanned correctly. Can you suggest a formula that would iterate through the items in the repeated list and count the ‘green check marks’?

Or better yet, can the tap event on a specific repeated list item be disabled?

The tap event cannot be disabled, but I considered wrapping the list item in a container with another empty container that is invisible before the first scan, then if the scan is true and successfull would be made visible and placed on top of the list item with the help of Z-Index. Thus it would prevent from clicking on it again.
Container outer

  • container disabler
    • visibility false
    • width and height: custom: grow to width, grow to height
    • position absolute, aligned center, Z-index is set to number: anything should work, but go for big, like 99
  • list item:
    • as was, just set the Z-index to a number, significantly lower then the above.
      On the logic canvas, when you scan, and it is evaluated to true add a “Set component property” flow function and add the “container disabler” visibility to true.

As for the page variable way, I would have a page variable that is a list of numbers and has as many items as the repeated list. So when you build the list in logic there add a set page variable flow function to the MAP(dataforrepeat, 0) So it will build a list full of zeros. Then when you scan an item and it is true just set the page variable again, but this time: SET_ITEM(pageVars.counterList, index==repeatedinfo.index, 1) This should change the 0 to 1. And in the display of the counter just use: COUNT(pageVars.counterList)
Please check what is the correct syntax of the repeatedinfo, I wrote this just top of my head.

Hope it helps. :smiley:

1 Like

Your ideas are quite valuable. I think I will have to make a new page variable with the same number as the list. In the current incarnation, there is only one item that has a check. Using something like pageVars.counterList would be helpful to manage all the functionality (check mark, background and sum). I’ll let you know how it goes.

1 Like