Toggle visibility of cells within Repeater Block

Hello, I am trying to construct the UI where I have a list of items replicated by the repeater block. Then user can switch to selection mode and a checkbox will appear next to each row of item. By ticking the checkbox they are then selecting them for an action, such as to delete them.

Unfortunately I have fallen at the first hurdle, which is how to toggle the visibility of cells within a Repeater Block. Using the normal Component visibility toggle seems to generate an error “sdk.js:16 Uncaught TypeError: Cannot set properties of undefined (setting ‘display’)”

And the likely follow up question is how do I know which row has been selected? I don’t think the row itself contain that data, right?

Attached image is what I tried to do & the codeless for activating the toggle.
Screenshot 2023-08-25 at 14.33.09
Screenshot 2023-08-25 at 14.41.16

Hello @Bob_Leung

It’s hard to understand from your example.
For more precise support, create a simple example. Then provide us with the appId and the page name from this example so we can play with it.

As I understand it, you want to on click the button (which, as I understand it, is not in the repeater) checkboxes to appear in repeater item. It’s not clear if you want to show checkboxes for all rows or for a specific row?

Regards

Hi @viktor.liablin , Sorry if it was not clear before. I have taken your advice and created a simple example. On top of that I have recorded a 3min video to show precisely what I have trying to achieve (and how I’m failing :sweat_smile:)

Video: Loom | Free Screen & Video Recording Software | Loom

App ID : 15A68ED4-BF2A-4E26-FF57-2755D3C15600

App Page: It’s called “landing” (https://placidwilderness.backendless.app/api/files/ui-builder/containers/default/index.html?page=landing)

Hopefully this is clearer now.

@Bob_Leung

I’m playing with the demo now, don’t make any changes please

:ok_hand:

@Bob_Leung

I improved your demo.
This is a draft version to show the way.
Ideally, don’t use the page data. It’s better to put everything in the block component with the “Data Container” property as “true” and use “Block Data” instead of “Page Data”.

The logic that I changed:







Thank you! I will look through it in detail and come back with any questions. If we don’t speak again today, have a wonderful Friday.

@Bob_Leung

In my example logic, there is a weak point in the identifiers for repeated items. It was made on the “knee”. If you delete an item and then add it, the two items will have the same ID. The simplest option is to create a number variable “id” in the page data and take it from there. Each time you add an item, increase the ID in page data by 1.

1 Like

Just looked through your solution and explanations in detail. A great example for me to build from, thank you. @viktor.liablin