Changing properties of cloned components (DIY Advanced Listviewer)

[domhnallohanlon]

We’re working hard to bring you the Extended Listviewer component to make developing your app even faster, but in the meantime here’s a DIY approach.

By using the “Any Component” blocks in Thunkable, you are able to clone entire rows or columns of content. But what if you then want to change some of the components within the row or column?

Design

Usually you can leave the precise details of your design until the end, but in this case you need to know what components will be going where so start off by placing everything in its final position.

Change One Label

While developing this example I started off by breaking the problem into smaller pieces. Rather than trying to have any button control any label, I started off by seeing if I could have any + button increase one label, and then have any - button decrease the value.

The ability to do this relies entirely on spotting the pattern in the repeating rows. In the case of my design, all the + buttons have odd indexes and all the - buttons have even indexes, for example:

1. IncreaseButton1
2. DecreaseButton1
3. IncreaseButton2
4. DecreaseButton2

Change Any Label

This part is a bit trickier, but again relies on the fact that if you repeat a row you are creating a pattern. Since my rows have two labels and two buttons, the “scoreLabels” will all be even and the “titleLabels” will all be odd. Your app probably won’t be identical to this one, but there will be a pattern and that’s what you’re looking for.
in the example below, if decreseButton2 i.e the 4th button in our list, is pressed then we update the 4th label. If however the third button is pressed i.e. increaseButton2, then we need to add one to the index so that we’re still updating the value in label4 and not accidentally trying to change the value of label3.

Ignore the Clone Button

Your app probably won’t have (or need) a clone button, but if it does you can ignore it by adding the test:

if component = CloneButton

like the example below:

Creating a “New” Row

Since the scoreLabel in Row1 might already have a value in it, we need a way to set the text back to 0.

Since each row has two labels we can use index x 2 to find the newest scoreLabel and set the value to 0.

A similar approach is used to set all the titleLabels to Label1, Label2, Label3 etc.

Remix

https://x.thunkable.com/copy/f6acb70f4dafd826a42c887b141ec650

[darren]

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.

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.

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.

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!

[dorissey]

Hi

These blocks don’t appear to work? I have tried live testing from the above link:

(https://x.thunkable.com/copy/f6acb70f4dafd826a42c887b141ec650)

and nothing happens!

If you delete the “when any button click” block the “when CloneButton Click” block works - it looks as though having a separate button (CloneButton) affects the cloned components and vice versa?

I’d be really grateful if anyone could help as I need a similar function in my own app!

Thanks

Marina

[actech]

Hi,

Can you clarify what does not work and on which device?

[dorissey]

I am live testing Domhnall’s app on an ios phone. I haven’t tried it on an android. This isn’t an app I have created - it is the one from the link given - if that helps - ie, it is an app Domhnall created and I haven’t changed any of the blocks.

I came across this thread a couple of days ago because I was having problems with the Any Component blocks in an app I am building.

Is it possible for you to try live testing his app to see if it works for you?

Many thanks

[actech]

On Android, this works. On iOS, I can see when it charges a little.

Are you using iOS 13 and when you click the Clone button, new Rows are not created?

On iOS 12.4 this works too.

[dorissey]

OK, so I have just downloaded his app again and it works this time! I don’t know why! Thanks for looking anyway

[actech]

But you’re right that the + and - buttons do not work on iOS in the original Row. This is a serious bug for Live.

[dorissey]

Thanks - I thought it was just me - I have tried to play around with making the first row not visible. If it helps, I created a label to show the result of the app index variable - all the buttons in the cloned rows show the correct index of 3 onwards - but the two buttons in the original row don’t appear on the label as either 1 or 2 - if that makes sense!

[actech]

Any button click block does not work in Live on iOS 12.4!

I see this for the first time, but sometimes List Viewer doesn’t click on Live on iOS

[jared]

If you were to keep expanding your counters, would there be a way to save all of that data? Say you started wtih counter 1 being sent to spreadsheet Column A in a new row each time it was saved. but then you clone and now you have 2 counters. can the app automatically start to send the second count into column b and then if you had a third count, that would go into column C and so on. does that make sense?

For example, the app i am working on currently utilizes counters but each ‘count’ is sent to a spreadsheet. would it be possible to increase the number of counters while synchronously increasing the number of items sent to the spreadsheet automatically?

[paleosteve]

OK so all is rosy until I tried this with text fields. I have a row with several components - sub-rows, sub-columns, labels, text fields and buttons. When I clone the row (and so all of it’s contained components), and try to edit the text fields in the new clone, the text does not stick. The text erases, but just the last character typed appears in the corresponding text field in the cloned original. This is hard to describe verbally, so here’s a simplified example app:

https://x.thunkable.com/copy/e61209a18004c9f7a3b89c238917375f

Please let me know your experience with this, and if there’s a way to alleviate this I would love to hear it!

Thanks!!
SteveO

[actech]

This is a well-known and long-standing bug. Because of it, Switch, Slider will also not work

[tatiang]

Seems like a bug to me. I can change the original row’s text input fields and then clone them successfully but if I try to edit a cloned text input field, I can’t erase what is shown and I can only add a single letter to the end.

[jacob1]

Hi All,

I’m running into problems while cloning - hopefully you guys may be able to help.

1 - I’m cloning rows in a column called “Feed”
2 - Each “row” has 11 rows inside it and 4 buttons
3 - When I press button 1 I need Row 1 to be hidden
4 - I need this to occur when I press button 5,9 and so on

Any ideas?

[jared]

I just wanted to share my extended list viewer here! Thanks to @domhnallohanlon and @darren and @actech for all of the guidance with this!

I use this to display private notes left by my app users. these notes are so they can review any notes they took on any given day

the screen

the code I use to populate the extended dynamic list viewer

[domhnallohanlon]

This looks awesome - nice work @jared!

Tiny bit of UI feedback though - you could probably get away with having “X” instead of “Delete Entry”

Other wise looks really good!

[jared]

Thank you @domhnallohanlon ! That is the kind of FB I am looking for. I feel like all of my friends/colleagues I share this app with want to spare my feelings! I say tear it apart!

Update: thanks for the FB. Implemented with padding do the user can’t miss!

[Claus_Holbech1]

I have made this, and it wprks fine.

But I would like to have a static heading above the list. How can I do that?.
I have tried putting it inside scrollable rows or colums, but that dont work.
I can only get it to scroll right by setting the screen to scrollable.

[jared]

Make the screen, not scrollable

Put your column to be cloned, inside another column. Make that column scrollable

Place a row on the screen

Set position to absolute

Set top edge offset to 0

Set width to 100%

Set your desired row height

Place your static label in that row.

Like this?