Listview App Template for Cloudstitch/Spreadsheets and Airtable

[Red_Panda]

With this template you can create you own listview application. You can choose between Airtable and Cloudstitch with the constant USE_AIRTABLE

	Cloudstitch (documentation)	Airtable (documentation)
1	Create a new Cloudstitch project and open the connected spreadsheet	Create a new table or upload a csv file
2	Delete all demo data (don’t forget those on Sheet2)	Get your API key and Base ID
3	Add your column names in the first row	Edit the column names
4	Insert your username and project name into the constants on top of the project	Insert your API key, Base ID and view name into the constants on top of the project

You have to insert the keys in these textboxes

Your column names (in Cloudstitch it is the first row) for this recipes demo should be

Image	Title	Subtitle	Ingredients	Description	Time	Link

After you add your data, the app will show all items in a list (thanks to @ColinTree’s ListView extension). When you click an item, a new screen with more details opens. If you don’t specify an image url (or one from your assets), the item is displayed with its first letter. The link field is optional and adds a button which opens the link when you click it. You can refresh the list thanks to @ColinTree’s amazing SwipeRefresh extension

Note: This app is just a template, feel free to customize it as you want. If you add columns, you can select the content with the lookup in pairs block on the element screen.The description label is HTML enabled, so you can style the text. As an example, I made a list of my favourite recipes

Be creative! You could also make an app with characteristics of your favourite game, movie, drinks, etc.
listview.aia (71.0 KB)

Changelog

2018-10-09: Initial release
2019-02-28: v2 now supports Airtable and SwipeRefresh

See below for a newer version

Listview App Template for Cloudstitch/Spreadsheets and Airtable

Version 2 The new version uses the AirtableClassic extension by @jerinjacob and has more neutral column names. You can also use a publicly available spreadsheet instead of Cloudstitch. The project was made with App Inventor, so you don’t rely on Thunkable Classic [grafik] Switch this to true if you want to use Airtable [grafik] Enter your spreadsheet id if you want to use Google spreadsheets. Link sharing must be activated. If you want to use Airtable, enter your API key, Base ID and view na…

[domhnallohanlon]

Great project, thanks for sharing @Red_Panda!

[Atul7688]

unable to download the given aia file

[bto]

Thanks for the project. I do not know how the Api connects. You can help me?

[domhnallohanlon]

Hi @bto,

You should be able to get a good idea from the sample aia, but here’s a tutorial on working with APIs just to get you started:

http://community.thunkable.com/t/introduction-to-apis/12067?u=domhnall

[bto]

Thank you very much Domhnall. It has helped me a lot, although I can not see url images. I upload images to Dashboard, like this: https://res.cloudinary.com/dwuvko1jj/image/upload/v1547832002/Venta/plaza_reducido.jpg and I paste them in the Cloudstitch spreadsheet, but they do not appear and the text does. I do not know what to do. Can you help? Thank you.-

[Goldking]

Great job.

[aya_samra]

I could not register in cloudstisch what is the problem ?? You can just sign in but u dont have the ability to sign up on the site why ? I do not find any way or buttun to sign up and build any component

[Red_Panda]

Here is a tutorial on how to use Cloudstitch with Thunkable
http://community.thunkable.com/t/solved-cloudstitch-502-bad-gateway-now-get-cloudstitch-spreadsheet-api-endpoint-easily/45861
However, Cloudstitch seems to unresponsive and obviously stopped their development. You could try to get this example running with Airtable

[domhnallohanlon]

+1 for Airtable, just to add to this, Cloudstitch has been deprecated in the most recent release of Classic so I would advise against using it in new projects.

[aya_samra]

how i can display airtable component in to web page as u made in this template u display cloudstitch in web???

[aya_samra]

@Red_Panda

Get your API key and Base ID

what is the difference between api key and base id

@Red_Panda

view name into the constants on top of the project

what do you mean by view name ??? do you mean the project name or the table name ???

Is this table is true ???

[aya_samra]

@Red_Panda

the constants on top of the project

what is the top of the project ?? on the designer page or on to blocks ???

we have to change the places which it marked in yellow ?? am i true ???

[Red_Panda]

I updated the post to make it more clear where to insert the keys etc. Please take a look at the documentations I linked in the original post on where to find all information

[Red_Panda]

@aya_samra No, I updated the post to make it more clear. Please take a look at the documentation on where to find the keys. “Table 1” would be the view name in your case

[aya_samra]

I am really do not know how i can thank you
Thank you soooooooooo much for ur great work

Everything is ok

[aya_samra]

Can we make sharing to the component of listview ?? I just want to ask before trying to do it .

[Landowski]

Yes. On blocks, when listview Picked event, call sharing block.

[Landowski]

I’m using online JSON as database (hosted at my host website) for my status phrases app, it’s fast and simple to use (decoding the JSON text is easy after you understand the way it works). It’s simple to add more data too.

[Choske]

In my scenario, I have a list around 100 itens and photos, but the app just freezes to load all the itens.
It tooks more than a minute to load the listview.

Also when going to page 2 and returning to page 1, a freeze again to load all the itens…

Maybe a way to store all the url links in the memory to avoid loading it every moment?
Or is there another way to improve the performance?

I am using Airtable DB, any ideas how can I improve?