Contents x
    Simple table WIZARD
    • 27 Sep 2023
    • 2 Minutes to read
    • Print
    • PDF
    Contents

    Simple table WIZARD

    • Updated on 27 Sep 2023
    • 2 Minutes to read
    • Print
    • PDF
    Article summary

    The Simple table wizard lets template creators define the content of table to be displayed as a data list that iterates through the table data created in the Tables tab. 


    In this tutorial we will show you how to create a food menu composed of 4 items. 


    Topics covered:
    • Templates tab - Designer - Simple table wizard 
    • Data source editor

    Sample screen:

    TUTORIAL STEPS: 


    A) Create a table on the Tables tab - see how to do this in the previous     Create and manage your tables tutorial.

    B) Create a template

    1. Open the Templates tab. 
    2. Click the New template button.

    C) Add a Simple table to your canvas.


    1. Click the Wizards icon and choose the Simple table option.
    2. Place the element on the canvas. A new Tables sub-window will open.
    3. Select the table from the list that contains the necessary data for your template.  
    D) Popup window for table setup appears.
    1. Select the table columns you want to use in your template by ticking the corresponding checkboxes to the left of the column names. 
    2. Configure the Page settings. 
    3. Configure the Row settings.
    4. Select an existing data source for your table or select the "Create New" option to automatically create a new data source for the selected table.
    5. Click the Insert and open to row editor button. 
    Note: After inserting the table into the designer, you will be able to adjust these settings in the table data list sidebar in the Format mode.
    E) At this point, your designer window will switch into row template design mode.  This is a special mode of Designer used to design the contents and style of a single row of a table data list. You can leave this mode at any point in time by clicking Save or Back button.
    The row you will design here will be used as a template to render every row of your table. 
     
    1. Click the Canvas icon on the top right-hand menu.
    2. Adjust the size of the row template to match your visual requirements.

    F) Click on the Elements icon on the top right-hand menu and select a table element.









    G) Modify template element

    1. Adjust the position, size, font style and alignment of your template element to match your visual requirements using the sidebar. 
    2. Click the Save button to save your changes and exit the row template design mode. 
    H) Table data list settings 
    1. Reposition the table.
    2. Set the number of rows if necessary.
    3. Set the paging properties of the list and the page order if necessary.

    Note 1: The size adjustment is only available in the row template mode.

    Note 2: Paging will start automatically when your input data has more rows than your number of rows configured on your table data list.
    I) Optional: If you want to edit the row template again:

    1. Click the blue button with the name of your table. A new window opens with a list of row templates.
    2. Click the three-dot button on the row template item and select Edit. You will be again in the Row template designer where you can edit the row, follow steps E, F and G of this tutorial. 

    J) Further design ideas for your food menu display content:

        • Add your logo or other media from the Media library,
        • Add headers using static text,
        • Add a rectangle to highlight the column names,
        • Change background color.

    K) Click on the Save & Publish button in the lower right-hand corner when your template is final. Now it is ready to be assigned and shown on your display.


    Was this article helpful?
    What's Next