Table widgets

This page is related to Data-driven widgets and was updated for Elementi 2018 - the information below might not apply for older versions.

Description

There are five types of table widgets: Table, Horizontal Table, Vertical Table, Grouped Table and Daily Events. The last four have been added in Elementi 2016.

The table widgets display slides composed of multiple cells of text & media layers, which are automatically filled out with data retrieved from a data source (e.g., RSS feed, CSV file, calendar etc.). Depending on the widget configuration, multiple cells (thus multiple sets of data) can be displayed on the same slide. The slides are displayed one after another, with or without a transition effect in between, similarly to a playlist.

The cell layout is composed of text & media layers, that should contain one or more data placeholders (e.g., [[title]], [[description]] etc.), which are automatically filled out with data retrieved from the data source when the widget is running.

Table widgets can be found in several folders accessible from "Widgets" / "Library" tab within the Browse panel:

• RSS, Spreadsheets, Calendars, and Data Feeds starting with Elementi 2015
• Media, Twitter, Flickr starting with Elementi 2016
• Facebook and Instagram, starting with Elementi 2017
• Yammer starting with Elementi 2018
• Feed widgets in Elementi 3.x

Table

The "Table" widget displays each set of data retrieved from the data source using a cell layout, which is controlled by the user from the Preview panel (mostly for design changes) and / or from the "Layers" tab in Edit panel (gives access to all the layer properties).

Configuration

Table widget properties

The widget parameters are listed on the "Properties" tab in Edit panel:

• Data

  Click the button to edit the properties related to the data source from where the items are retrieved.

• Locale

  Select the locale used for displaying dates and numbers.

• Slide duration

  Enter the number of seconds each slide is displayed on the screen.

• Transition

  Click on the button to select a transition effect and its properties.

• Looping

  Select whether the widget ends after the last slide or loops to the first one.

• Number of rows

  Enter the number of rows of data to display on a single slide.

• Number of columns

  Enter the number of columns of data to display on a single slide.

• Delay per cell

  Enter the number of seconds to wait before displaying the next cell / row / column of data.

Note:

To modify general properties of the widget, click on the icon from the toolbar to open the "Document Properties" dialog.

Cell layout

Editing the table cell layout

To edit the slide layout within the Preview panel, follow these steps:

1. Click once within the Preview panel to enter into "Edit mode". The widget is paused and the actual data are replaced by the fallback values (if any were defined) or the layer predefined content.
2. Click on a layer to select it. The layer predefined content is displayed - usually that contains only the data placeholder.
3. It is now possible to add, remove, modify the position / size of the selected layer. If it's a text layer, it can also be edited.
4. Click the play button to resume the playback and display the actual content of the data feed.

To edit the slide layout within the Edit panel, follow these steps:

1. Click the "Layers" tab to list all the layers composing the slide.
2. Click the button (it opens the "Layer Properties" dialog) and edit that layer properties. Click the "OK" button to apply the changes.

Horizontal Table

Added in Elementi 2016.

The "Horizontal Table" widget displays one or more columns of data (as specified on the "Properties" tab), where each column can be made of one or more rows (as configured under the "Rows" tab in Edit panel).

Configuration

Horizontal Table widget properties

The widget parameters are listed on the "Properties" tab in Edit panel:

• Data

  Click the button to edit the properties related to the data source from where the items are retrieved.

• Locale

  Select the locale used for displaying dates and numbers.

• Slide duration

  Enter the number of seconds each slide is displayed on the screen.

• Transition

  Click on the button to select a transition effect and its properties.

• Looping

  Select whether the widget ends after the last slide or loops to the first one.

• Number of columns

  Enter the number of columns of data to display on a single slide.

• Delay per column

  Enter the number of seconds to wait before displaying the next column of data.

• Column padding, Row padding

  Enter the padding to add between columns / rows, either as an absolute number of pixels or as a percentage from the column width / row height.

Note:

To modify general properties of the widget, click on the icon from the toolbar to open the "Document Properties" dialog.

Cell layout

Editing the row layout

To edit the widget layout, follow these steps:

1. Click on the "Rows" tab within the Edit panel)
2. For each row composing the table you can specify:
   • the row height as an absolute number of pixels or as a percentage from the table height,
   • the row content as text or media layers, with references to data placeholders.
3. For each layer, click the button to open the "Layer Properties" dialog and edit the properties of that layer; click the "OK" button to apply the changes.

Vertical Table

Added in Elementi 2016.

The "Vertical Table" widget displays one or more rows of data (as specified on the "Properties" tab), where each row can be made of one or more columns (as configured under the "Columns" tab in Edit panel).

Configuration

The widget parameters are listed on the "Properties" tab in Edit panel:

• Data

  Click the button to edit the properties related to the data source from where the items are retrieved.

• Locale

  Select the locale used for displaying dates and numbers.

• Slide duration

  Enter the number of seconds each slide is displayed on the screen.

• Transition

  Click on the button to select a transition effect and its properties.

• Looping

  Select whether the widget ends after the last slide or loops to the first one.

• Number of rows

  Enter the number of rows of data to display on a single slide.

• Delay per row

  Enter the number of seconds to wait before displaying the next row of data.

• Column padding, Row padding

  Enter the padding to add between columns / rows, either as an absolute number of pixels or as a percentage from the column width / row height.

Note:

To modify general properties of the widget, click on the icon from the toolbar to open the "Document Properties" dialog.

Cell layout

Editing the column layout

To edit the widget layout, follow these steps:

1. Click on the "Columns" tab within the Edit panel)
2. For each column composing the table you can specify:
   • the column width as an absolute number of pixels or as a percentage from the table width,
   • the column content as text or media layers, with references to data placeholders.
3. For each layer, click the button to open the "Layer Properties" dialog and edit the properties of that layer; click the "OK" button to apply the changes.

Grouped Table

Added in Elementi 2016.

The "Grouped Table" widget displays one or more rows or columns of data (depending on the "Orientation" and "Items per group" properties), where each row / column contains only data from a certain data group, and optionally an extra row / column having the group header.

The "Grouped Table" widget can be found only in Spreadsheets and Data Feeds folders under "Widgets" tab within the Browse panel.

Configuration

Grouped Table widget properties

The widget parameters are listed on the "Properties" tab in Edit panel:

• Data / Data source

  Click the button to edit the properties related to the data source from where the items are retrieved.

• Locale

  Select the locale used for displaying dates and numbers.

• Orientation

  Select between "Horizontal" and "Vertical".

• Grouped by

  Enter the name of the column which values are to be used to form groups of data.

• Specify groups

  Enter the groups to keep from the result set, separated by comma; leave it empty to keep all groups.

• Items per group

  Enter the number of items of data to display on a single slide.

• Content

  Set the layout for displaying the grouped data.

• Group delay

  Enter the number of seconds to wait before displaying the next group of data.

• Item delay

  Enter the number of seconds to wait before displaying the next item in a group of data.

• Column padding, Row padding

  Enter the padding to add between columns / rows, either as an absolute number of pixels or as a percentage from the column width / row height.

• Headers
  • Show headers

    Select whether to show the group headers.

  • Size

    Enter the size of the header layer as a number or percentage of the table height (for vertical) or width (for horizontal).

  • Header

    Set the layout for displaying the group headers.

Note:

To modify general properties of the widget, click on the icon from the toolbar to open the "Document Properties" dialog.

Cell layout

The layout of each data cell is controlled with a text or media layer under the "Content" property, while for the group header layout, there is another layer under "Headers" > "Header". These layer should contain one or more data placeholders.

To edit any of these layers, click the button to open the "Layer Properties" dialog and edit the properties of that layer; click the "OK" button to apply the changes.

Daily Events

Added in Elementi 2016.

The "Daily Events" widget, a variant of the Grouped Table, displays a limited number of events, grouped by weekday of up to maximum 10 consecutive days - by default, up to three events for the next three days, including today, are shown.

The "Daily Events" widget can be found only in Calendars folder under "Widgets" tab within the Browse panel.

Configuration

Daily Events widget properties

The widget parameters are listed on the "Properties" tab in Edit panel:

• Data / Data source

  Click the button to edit the properties related to the data source from where the items are retrieved. By default, the events for the next three days, including today, are shown.

• Locale

  Select the locale used for displaying dates and numbers.

• Orientation

  Select between "Horizontal" and "Vertical".

• Start time, End time

  Enter the start / end time (hh:mm) - events outside this interval are not shown.

• Events per day

  Enter the maximum number of events to display for any weekday.

• Content

  Set the layout for displaying the each event.

• Day delay

  Enter the number of seconds to wait before displaying the next day.

• Event delay

  Enter the number of seconds to wait before displaying the next item in a group of data.

• Column padding, Row padding

  Enter the padding to add between columns / rows, either as an absolute number of pixels or as a percentage from the column width / row height.

• Headers
  • Show headers

    Select whether to show the group headers.

  • Size

    Enter the size of the header layer as a number or percentage of the table height (for vertical) or width (for horizontal).

  • Header

    Set the layout for displaying the group headers.

Note:

To modify general properties of the widget, click on the icon from the toolbar to open the "Document Properties" dialog.

Cell layout

The layout of each data cell is controlled with a text or media layer under the "Content" property, while for the group header layout, there is another layer under "Headers" > "Header". These layer should contain one or more data placeholders.

To edit any of these layers, click the button to open the "Layer Properties" dialog and edit the properties of that layer; click the "OK" button to apply the changes.

See also

• Tutorial on Displaying calendar events using the Table widgets
• Slideshow widgets for displaying slides composed of text & media layers, one after another as a playlist.
• Media playlist widgets for displaying media items one after another as a playlist.
• Media crawler widgets for displaying media items using a continuous scrolling effect.
• Text bar widgets, Text ticker widgets, and Text roll widgets for displaying text-only content.
• HTML table widget for displaying the data from a table included into an HTML page.
• Project:Data feeds for sample projects using the table widgets.