This application provides some examples on how the Table block can be used to separate content form form in Blocks. The table block was added in Blocks 8, and requires a license option purchased separately.

You need a computer with a running blocks server and a web browser to use this application note.

Here's the PIXILAB-blocks-root for this application note. Download it, unpack it, then follow the instructions in the general general setup section.

Once you've restarted Blocks and is able to open the editor window to see the content, you can try each one of the examples therein one by one. Each example is in its own block group, allowing you to focus on them one by one by selecting the name onf the Group menu.

NOTE: These examples are described in more detail in the Table chapter of the Blocks manual.

Child Replication is a method by which you can create multiple slides, pages or other items based on a single child block and a data source. The single child block describes the structure of what to appear, while the actual content come from the data source. This is useful when you want to show many items that are structurally identical, differing only in the specific text, images, video or other content to appear in each item. The data can come from an external database, or – in this case – from a Table block. Separating the form from the content in this way makes it easier to maintain those aspects separately, or even to re-use content in different scenarios.

Set up a display spot (either using PIXILAB Player or a separate browser window, as suggested in the general setup section), and connect it to the Spot name Lobby.. Then drag the block named Slideshow from the "Child Replication" group onto the Lobby spot. A slideshow will now play, showing some images, video and text. The content shown in this slideshow all comes from the Data Table block. Changes made to the Data Table block directly affect the running slideshow. The Slideshow block itself is entirely based on Child Replication, and contains no content of its own.

Next, drag the Book block to the Lobby spot. This also uses Child Replication, and takes its data from the same Data Table. However, this offers manual navigation, language selection (English and Spanish) and a button for showing additional details. This example shows how the same Table source data can be used in more than one context. Notice how language selection directly updates the corresponding content, such as the subtitles shown in the video.

A table can be used to hold text, images and other content used in multiple other places, allowing that content to be maintained in one central location rather than spread out across numerous blocks. The table named "Symbols" in the "Constants" group below contains a number of symbols, text and other commonly used data. Drag the block named Panel in the Constants group to the Lobby spot. It shows a number of buttons with symbols and colors, and two language selection buttons. The buttons with symbols have no function, but merely act as examples on how to use content from the Symbols table in other blocks.

Open the Symbols block to view the content. Any changes made there are immediately reflected on the display spot, since the spot’s “Auto-update on Block Change” setting is active. Open the Panel block to see how the table data is used by specifying the Symbols block as the “Constants Table” of the Panel block (note that you don’t have to specify the group name if the table is in the same group as the block using it). The various symbols are rendered using Media URL blocks with the URL pointed to the desired row and column in the table using a binding like this:

Local.constant.Happy.Icon

For control labels, such as buttons, a simplified syntax is used, such as:

{Happy.Text}

Referring to the row and column names in the associated Constants Table.

This example uses a Table to manage different videos, images and texts appearing on a number of Display Spots. Each Spot plays a video followed by an image with a lower-third text, in a loop. It would be quite straightforward, and more flexible, to build this using a separate block for each Spot. However, using a Table to manage the content provides a single place from where all displays and their content can be managed, making it easier for a less skilled operator to maintain and update.

To try this out, make sure both the Lobby and Restaurant spots are connected (indicated by the circular reload button or a green Connected indicator), then drag the Slideshow block from the PerSpot group to both these spots. Notice how they work in a similar way, but displaying different content. Here, the content comes from different rows in the Content table block – one row per spot. Which row to render is specified by a Spot Parameter configured separately for each Spot. To see this, double-click the Spot then choose the Parameters tab. Both spots have a TableRow parameter, but with with different values specifying the desired table row. This parameter is then used in the bindings in the Slideshow block. For instance, the Video block is a Media URL bound to this property:

Local.constant[TableRow].Video

Notice how the TableRow parameter is used to tailor the path based on the value of the TableRow spot parameter.