Table widgets

From SpinetiX Support Wiki

Jump to: navigation, search

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

Description

Sample table icons

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:

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 Data Properties 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 Transition Properties 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 Note:
To modify general properties of the widget, click on the Document Properties 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 Elementi Icons Layer Properties.png 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 Data Properties 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 Transition Properties 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 Note:
To modify general properties of the widget, click on the Document Properties 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 Elementi Icons Layer Properties.png 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 Data Properties 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 Transition Properties 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 Note:
To modify general properties of the widget, click on the Document Properties 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 Elementi Icons Layer Properties.png 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 Data Properties 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 Note:
To modify general properties of the widget, click on the Document Properties 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 Elementi Icons Layer Properties.png 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 Data Properties 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 Note:
To modify general properties of the widget, click on the Document Properties 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 Elementi Icons Layer Properties.png button to open the "Layer Properties" dialog and edit the properties of that layer; click the "OK" button to apply the changes.

See also

This page was last modified on 8 February 2019, at 12:18.