For our example, we want to display all of the data from our 'Breakfast' sheet from our 'Menu Example' source. Our configuration settings would look like the image below.
Click 'Customise' to be taken to the settings where you can format the data you have configured to show using the settings below:
Layout settings
Order by - You can select the order your data is shown by changing the 'Order by' and 'Order' options. To display your data in the order it is shown in your excel file then order by UI order in an ascending order.
Display style - Choose to display your data in columns or as a slideshow (the 'Timeout' and 'Animation' settings are applied to the slideshow option)
Display order - You can choose to display your data horizontally or vertically.
Item/ Row styling
Row height - Sets the height of each row which the data will be displayed within.
Row alignment - Will align the data to the option selected.
Background settings - Choose the colour for the 'Row BG or Row active BG'
Fields
Fields are the column headers from your data source, this is where you choose which fields of data you wish to show.
Add field - Choose to display another fields data by adding another field
Width & height - Select the width and height of the area you want to display this fields data in. The max height is the row height previously stated in the item/ row styling option.
Top & left - Choose how far from the top and left you want this field of data to be positioned within the row.
The dimensions and position of the data can also be changed by dragging and dropping the dotted area shown when a field is selected (green bar to the left of the field). If the data overflows these dimensions you can set how it displayed, we go through this later in the article.
Reorder fields
Use the handle to the left of the field name to reorder. The order is important as the field at the top will 'sit on top' of the others. We also recommend to move the field you are editing to the top to make it easier to customise.
Format how this data looks
You can format how this data looks in two ways. You can format how all of the data looks by using the 'Font Formatting' options and you can also pre-determine how specific data within this field looks by clicking the 'Formatting' option to the right of the field name.
Font Formatting - Here you can choose basic formatting options such as, font type, colour, size, alignment and much more. You must select the field you wish to format before editing these settings.
Formatting - Here you can pre-determine how specific data within this field looks by clicking the paint brush icon.
Remove a field - Click the cross to the right of the field to remove.
Overflowing data
Pre determine how your data is displayed if it overflows by auto resizing the data, fields or rows and select whether to allow interactive scroll to see the overflown data.
Fit zone - Auto resize row height & content to fit all rows into zone
Fit content - Auto resize row & field heights to fit the data
Fit design - Auto resize data size to fit into fields
Triggers
Here you can set what happens if there is not data to show. Simply add an action, then select the target if necessary.
Once you have completed the formatting, click 'Save Changes' to be taken back to your zones playlist. If you are happy with your playlist and its settings, click 'Finish Editing Playlist'.
You can then preview your layout with your data by clicking 'Save Changes' then choosing 'Save & preview'.
