Table Data Source Mapping

Tables are generally used to represent dynamic content whose visual presentation is uniform and repetitive. Contact lists and phone call logs are two examples of tables you might find on your own personal smart device.

Tables use template controls to organize the visual presentation and individual table cell content is customized by setting cell variable values. At design time, the process of setting these individual variables for a list manually can be tedious. Storyboard offers a mechanism by which table cell variables can be automatically created and populated from an external data file or data source. This can be found on under the table properties panel:


Once you have created a table and customized a few of the properties with cell template variables those variables will appear under List Variables. In the above example we have only created a single variable for some dynamic per-cell text.

To generate a template data source text file that you can customize, select the Export New Data Source button. This will prompt you for a location where you can save a data source file that contains the current content shown in Designer. This is a JSON formatted file and contains an array of key/value fields something like the following:

[   {     "text": "1"   },   {     "text": "2"   }  ]

You can edit this text file to add new fields or expand the content to contain more entries:

[ { "text": "1", "name": "One" }, { "text": "2", "name": "Two" }, { "text": "3", "name": "Three" } ]

This text file content can now be synchronized with the display by selecting the Import button and selecting the text file. Once imported the number of entries identified (3) will be indicated and the fields of the data source and the variables of the table will automatically be paired up. You can adjust this pairing by choosing different values from the Data Source Labels.


With the mappings in place, you can select to synchronize the table from the data source. This will re-assign all of the table cell variables to the values from the data source file and expand the table to match the size of the data source content. If you prefer to use the names from the data source instead of the Storyboard variable names, select the Match variable names when synchronizing option and a new set of variables will be created.

If you would like runtime support for automatically populating the table with content from the selected data source, then choose the Create Lua Data Source. This will add in a new Lua file, ListDataSources.lua, to your project along with the require Lua support files to dynamically read the data source at start-up, resize the table and set the corresponding table cell variables to the values taken from the imported data source file.

Was this article helpful?
0 out of 0 found this helpful