Creating components using blocks


#1

I have a list of vehicles supplied via API. I want to show this list as as gallery of rows/columns in my app. How can i create the components w/o knowing how many components to create? I was thinking of looping through the data but I cannot see a way to create the components within the blocks. The list viewer does not seem to be an option because its limited in what it can show.

I am a new Thunkable user and I am sure this question has been asked before (within Thunkable X)

Thank you!


#2

What is the maximum number of entries you will have?
Can it be pegged, or can it be literally unlimited?

Because if you have an upper limit, you can create that many components, and those are unused (because in reality, you have less than the maximum) you set the “from component set Visible to false”.

An alternative is to use paging. That is, you have say 10 component sets, and you provide page up/page down buttons. At the top, you display vehicle #1 to #10, and when clicking the page down, you add 10 to the index in the list to associate component to vehicle, so end up displaying #11 to #20.
Page up would subtract 10 to the page index offset.
Of course you’d have to pad the unused components with pace holders if the last page is not a full page.


#3

Hi,

Thanks for the fast reply. The list won’t be infinite definitely but there is no maximum number of entries. I am required to display all available vehicles. I had thought about paging but I thought I could do it via a horizontal scrolling list of “row” containers. I was able to create the scrolling list but only with a finite number of elements.

I used to work with Ionic so I thought it would be possible to query a webapi and then create the containers based on the number of vehicles returned.

Perhaps the scrolling list is not the way.

Thanks,

VJC


#4

A vary basic way obviously would be to have a listviewer but id imagine you want it snazzier than that. @CBVG idea is probably the best way to give a more custom feel. If you had a list that you can call via a web API you technically could use a webviewer to display it.


#5

For the current version of Thunkable ✕ I think that @CBVG has the best approach: i.e. use a fixed number of components displayed however you like and use page-up and page-down buttons to populate those components with different subsets of your vehicles.

Sometime in the near future (hopefully in our next release, though it might be a little later) we will be releasing a set of advanced features that will allow you to dynamically create and place components. That will allow you to get closer to the kind of UI experience that you want. I’ll provide a warning, though, that these advanced blocks will be a bit harder to understand and use for developers that are not familiar with programming concepts.

In the longer term, we are working on an advanced data viewer component which will allow you to fairly simply map columns/fields in data sources (e.g. spreadsheets and eventually Web APIs) to properties of the component and give you very simple way to do the kind of thing that you want to do here.

We are also working on ways in which Thunkable ✕ users can themselves create components like the advanced data viewer component (using the advanced blocks mentioned earlier) and use these components in their own projects as well as share them with other users for use in their projects.

Hope this helps.

-Mark