Custom Data Viewer Layout
Design a custom layout for displaying your data in a Data Viewer
Last updated
Was this helpful?
Design a custom layout for displaying your data in a Data Viewer
Last updated
Was this helpful?
While the and have different layout options, you may want to design a custom layout for your data. This can be achieved with and components.
Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.
When you click Save as Data Viewer Layout, you will see the following dialog:
To save a basic Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Let Advanced Binding be set to false
Click OK
To save an advanced Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Set Advanced Binding to true
You can now select which properties of the components in your Parents Row/Column you want to bind to the values in your Data Source.
Once you have selected all of the properties that you want bound to the values in your Data Source, click OK to save your custom Data Viewer layout.
With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.
With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:
Use a or to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc.
This layout is a Row that contains two Columns. The first Column contains 3 : TitleLabel, DescriptionLabel, and PriceLabel. The second Column contains an , ProductImage, and a Rating, called ProductRating. These components will be referenced in subsequent screenshots in this document.
Once you have saved your custom layout, you can select it as a layout for your Data Viewer. If your layout was saved with the Layout Type List, it can be used with the . If it was saved with the Layout Type Grid, it can be used with the .
You can bind the properties of your data to a .
You can manage your custom data layouts by going to your Thunkable homepage at and clicking on the Data Viewer Layouts tab at the left of the page. From here, you can edit and delete your custom data layouts.
