Templates App - List View

Overview

The Templates List View allows you to insert custom-defined lists or tables into your Template. This works differently than other Templates features.

Instead of creating a new page or sign for each piece of data linked in your dynamic template, the List View allows you to link multiple lines of data to your template to view on a single sign. 

This guide will walk you through setting up a List View and provide an example of the List View in action on a bar menu. 

 

Contents of guide

Add List View to Canvas

Add Data Source

Edit List View Layout

Link Data Source to List View

Edit the List View on the Canvas

 

Add List View to Canvas

1. From your canvas, select "List View" to add it to your template
2. Select "Continue" when you receive the warning: You are adding the List View element. Navigating between previews with the “Preview Row” arrow is not supported by templates using List View.
3. Next, you will be prompted to link your Data Source and then edit the layout for your List View template. Select the "Data Source" option to connect your data. This will take you to the Data tab, where you can follow the steps below to link your data source.

 

Add Data Source

To connect data to your List View, start by uploading an existing spreadsheet, linking an API data source, or creating a new spreadsheet from scratch. The steps for each of these methods is below:

1. Connect Existing Data:

• • • Select "Connect Data".
    • Select "Upload Spreadsheet".
    • Browse to upload the file from your computer.
    • Supported file types are .xlsx, .xls, or .csv.
    • Click "Done" to finish importing the file.
    • Edit spreadsheet content as needed.

2. Check out this guide if you wish to connect an API data source to your template to use with List View.

3. Create a new spreadsheet:

• • Select "Start With Empty Spreadsheet".
  • A blank spreadsheet will generate.
  • Add columns by clicking the button in the far right column.
  • Remove columns by hovering over the column name and clicking the icon.
  • Add rows by clicking the  button in the bottom row.
  • Remove rows by clicking the  icon in the far right column.
  • Edit spreadsheet content as needed.

Now that you have added data to your Template, return to the Canvas to edit the List View layout.

 

Edit List View Layout

The layout is a view of how your data will appear on the screen. You can customize text, shapes, images, and more to use in the layout. 

1. Return to your canvas by clicking the Canvas tab at the top of the Templates app.
2. On the List View added to your canvas, select "Edit Layout".
3. The Edit Layout menu will open where you can apply and customize elements to your layout, such as text or shapes.

a. Add a heading and content to the layout

• • • • Click to select the type of element to add to your layout and drag it into the header or content section.
      • After placing the element, click on the tag in the top left corner to name it. This name will be used to link columns from your data source later so we recommend using something that correlates with that data.
      • Click to highlight the name.
      • Type the new name.
      • Hit "Enter" on your keyboard to apply.
      • After you have added and named all of your assets, you can format the rest of the layout.

b.  Format the Layout

• • • • There are many options you can customize on your layout.
      • Change the font or color for your text or shapes. Select the element and the edit options will appear at the top of the window.
      • Change background by inserting an image or shape. Keep in mind that the header and content are separate fields so the images/or shapes shouldn't span both sections of the layout.
      • Change the size of the header or content section by dragging the sides bigger or smaller. The size of the cells on the layout will correspond to the content size on the template.
      • Adjust the slider between the header or content sections to make them larger or smaller.
      • Choose to disable or enable the header. When disabled, it will not appear on your template.
      • Enable the dark background guide to manage the content easier when working with light-colored fonts.

Once the formatting is complete, you're ready to link the elements on the layout to your data source.

 

Link Data Source to List View

You are now ready to link your data source to the elements on your List View.

1. Select the button.

2. In the new window, you will link the List View element on the left with the data source header on the right. Select each item on your List View (Header and Content) and then select the corresponding data source link to the element.

3. You can filter your data source that is linked to each header or content element in the List View. This is especially helpful if you have a large data source but only want to show a few items on your List View.

• • Select "Filter".
  • Select an item to filter by in the Data Source.
  • Click in the Filter by text field and a column of data options will populate.
  • Select the filter value from the list.

4. After all elements have been linked to your data source, select "Confirm".

5. You will see your Edit Layout view update and show a sample piece of data from your data source.

6. To see all of the linked data, return to the canvas by selecting the "Back to Canvas" button.

 

Edit the List View on the Canvas

Your List View is almost complete! Now, you can edit how it appears on the canvas. 

1. If only part of your data is showing, drag the List View corners larger to view all content.

2. Change the layout strategy of your data rows or columns by selecting the directional arrows at the top of the screen.

Tip: If you don't see the List View tools, click to select your List View, then they should appear.

3. Adjust the spacing between the columns or cells of content by increasing or decreasing the spacing interval.

4. If you need to return to the layout to edit, click the "Edit Layout" button.

5. Select "Save" once all changes are made.

6. Select the Display Group(s) to which you want to add the Template and select "Save Changes"

 

Congratulations! Your Templates List View setup is complete!