Changing properties of cloned components (DIY Advanced Listviewer)

Here is an example of how to display a list of data using custom rows and how to delete one of the list items.

The data we want to display

How to Design a Custom List Viewer

Inside a Column, there is a single Row that will be Cloned and Populated in later steps.
16%20PM
33%20PM

Note: We will now clone the rows for each item in our list, populate the labels, and allow the button to delete the rows.

How to Display a List of Data in a Custom List Viewer (by Cloning)

The credit for this algorithm goes to @domhnallohanlon in the post above. :star_struck:

  1. Clone the Row in the Column for Each Item in the List
  2. Remove the Original Row
  3. Find the Labels to Update for Each Item in the List

Here is what the list looks like after cloning.

IMG_5201

How to Delete a Clone Row (and the corresponding item from a list)

I developed this algorithm to allow you to remove a list item after a button in a cloned list is pressed.

  1. Check for when Any Button is Clicked
  2. If it’s Now another Button on the Screen, It’s a Button that was Cloned
  3. Loop through all the Buttons in the Column of Cloned Rows
  4. If the Loop Button is not the Button that was Clicked, Add one to a counter
  5. If the Loop Button is the Button that was Clicked, Break out of the loop
  6. In the List of All Rows in the Column of Cloned Rows, Remove the Row at the number found in the Loop
  7. In the original list that was displayed, remove the item that was just deleted.
  8. Save the new List


I hope this helps someone else make a custom list viewer!

Happy Coding!

4 Likes