🎉 Latest Thunkable ✕ Release; NEW COMPONENTS Data Viewer List and Data Viewer Grid! 2020-05-05

[domhnallohanlon]

Transform Data into Native Mobile Apps - no code needed.

We’ve been making a lot of updates to the platform recently, and we have a lot more planned, but it’s great to officially announce two amazing new no-code, User Interface components for you today.

Data Viewer List & Data Viewer Grid

You can find these new Data Viewers in your UI components right now.

Thank you beta testers!

To begin, we have to say a big “Thank You” to the 100 or so community members who helped with testing these components, we really appreciate your enthusiasm, your support and of course your fantastic feedback.

Data Viewer List Demo

In this first demo, we’ve take some free images (thanks Icons8) and Wikipedia data about Futurama characters…

… and turned it in to a fully functional native app using the Data Viewer List component. This is what it looks like on an Android device, but it runs on iOS too.

The image, title and subtitle required no cloning and no advanced blocks - all you need is data in a table and you’re good to go.

To add in the call functionality requires just 4 blocks:

Again, there was no need to loop through any lists, or to try and do some sort of awkward lookup to see which team member has what phone number. Just pass the row id to the get value from Data Sources block and that’s it.

Try it out

Since all the information is stored locally, you can edit this starter project and try it out for yourself without any setup.

https://x.thunkable.com/projectPage/5ea1744cb8de1849436151db

Data Viewer Grid Demo

In this second demo, we use the Data Viewer Grid component to display a simple drinks menu. Clicking on each drink brings up some additional information (price, calories etc.) and can then be added to and order.

The raw data are stored in a very simple table:

Displaying the images and overlaying the names is all done directly in the designer, no blocks needed and there’s no delay loading the grid items when the app loads.

To display the price in the label we just join the drink Name and the drink Price using the row id of the grid item that was clicked.

Try it out

This is another open-source template that we’d encourage you to experiment with:
https://x.thunkable.com/projectPage/5ea6ed029ce3d64d1d3a27dc

Other Data Sources?

What if you want to have use data in the cloud instead of locally stored data?

The new Data Viewer components allow you to connect directly to your Airtable Bases and your Google Sheets. This allows you to create truly dynamic, data-driven apps.

Imagine sending your users a Google Form, collecting those responses in a Google Sheet and displaying the results in a Data Viewer. (You could do the exact same thing with Airtable forms and bases too!)

Docs

These are completely new components so we strongly recommend you check out the Data Viewer List docs and the Data Viewer Grid docs to get started.

The Data Viewers also give you access to an additional drawer of Data Sources blocks which have their own dedicated docs. You should definitely check these out if you want to use the Data Viewers to their fullest.

Feature Requests

We feedback. While we might not be able to build every single feature you want we still want to hear from you.

Let us know what you’re going to build with the Data Viewer components and how we can make this an even better component in the future.

[kartik14]

Nice feature indeed

I was experimenting with this for some weeks now (sounds like MKBHD ), and I am happy with the results…

I think I would surely come-up with an idea on this component and would have a tutorial on it; Who knows?

Thanks!

[bymaho]

Its beautiful. is it max 100 rows for airtable? (I checked. in browser only 100 rows can be seen, but in app it fetch every row.)

[ashwani.mathur3difzz]

This is the exact feature i needed! Congratulations on getting this rolled out!

[ashwani.mathur3difzz]

I was experimenting with it to connect it to an Airtable base. Seamless connection to airtable bases and tables. I was able to bind the columns too.

When Live testing I am not able to see the images in the row . In Airtable I have the field type for the column from where I am getting the images set to “Attachments”. Do you think this has to be something else?

[jane]

Hi @ashwani.mathur3difzz,

We have a tutorial for how to retrieve an image from an Airtable DB.
Check it out here!

[jared]

Yes!

check out my post on this here!

[Solved] Spreadsheet query

Hi @Michael_Rogulla, I accomplished this task today using the Airtable API. using the URL located in teh CURL, [Screen Shot 2020-04-10 at 3.43.45 PM] [Screen Shot 2020-04-10 at 3.43.41 PM] i add those into the property designer [image] i use the URL up the question mark I add a parameter of filterByFormula and use the quickchart formula to filter by an email then for the header put Authorization as the property and the value is “Bearer YOURKEYHERE” i checked the response with this [Sc…

[darren]

Very excited for this update! Good work Thunkable team.

As I do, I created a project / tutorial to test out the Data List Viewer. You can check that out here:

How to Create a To Do List with the New Data Viewer List

In response to the announcement of the new Data Viewer List I wanted a project to try it out. So I thought I would redo my original To Do App tutorial. Here is how it turned out. Tutorial Watch the Tutorial Here [How to Use the Data Viewer List in Thunkable X - 2020 To Do App] Timecodes for every step 00:50 TO DO LIST - Demo 03:00 TO DO LIST - Design 04:00 Data Viewer List - Intro 05:20 data source - Intro 06:30 data source - Edit 07:40 Data Viewer List - Data Bindings 08:55 T…

My initial feedback from the project:

1. Deleting from a Data Source is currently not support. Would love it to be
2. I would love a block to refresh the Data List Viewer from the Data Source. The current workaround is going to another screen and coming back (see tutorial). And you can also swipe down to update, but that is not super intuitive for all users.
3. I couldn’t figure out how to make the Data Viewer List span the full width of the WebViewer. Currently, it only Fits Contents.

Those would be my votes for the next updates. But again very satisfied and I’m excited to play around with the data grid and the other List Item Layouts.

[maxb]

After all the work I’ve done to create a list of items with cloning blocks, you create a component that does the same.

Great. I almost wanna cry.

[domhnallohanlon]

Tears of joy, right @maxb

We’re always trying to make app creation as simple as possible so hopefully this will save you (and lots of others) huge amounts of time in the future!

[kartik14]

I can understand your pain. @maxb ()

[jared]

This will still be valuable if you want more than a few pieces of information nicely displayed. Dont give it up. save it for more complex tasks. The programatically created components can be reallly cool and complex! But this premade out of the box solution is great!

I plan to put out a sample use case soon as a data viz tool!

[maxb]

Sure, that’s why I wrote “almost”

My solution looks good and is versatile and surely has been a lot of experience.

[dns.prado.s3vy]

Hi @maxb, same here! But as you probably experienced, cloning buttons and stuff is very time-demanding, this was one of the major drawbacks of my app. I was expecting this solution to solve my problems hehehehe.

Thanks, Thunkable Team, I am very grateful. Let us try this.

[domhnallohanlon]

Thanks @dns.prado.s3vy - it’s available for you to try now!

There are two samples in the first post and another open-source example that you can use here:
https://x.thunkable.com/projectPage/5eac6d095fb9efbcef77b94d

[jared]

Are there any plans to allow for the data binding to occur via app variables? I was playing with a news delivery api and want to use the beautiful list viewer cards. I’m working on integrating Integromat to complete the task.

I can download and prose the api data. I can even send it to airtable to bring the data back to the app in a human friendly version.

The issue I am running into eith this setup is not being able to overwrite old rows and deleting extra easily or timely fashion. So I can only ever add more rows or it takes way to long to do all operations.

Ideally I could plug the variables in as the data source. Any thoughts here

This is how I accomplish deleting old data and replacing it automatically (once daily) to be able to use this neat api.

Maybe if I can learn to write a script for it?

[kartik14]

I might have missed any topic/post regarding to this, please help -

Can I display data from blocks right now? Like I call a column from Airtable, and display it?

Thanks!

[jared]

You can if you are crafty I’ll post an example later today I think of how I’m accomplishing this