The Grid Widget is an Advanced Widget and is a powerful tool for turning data into beautiful looking rows and columns within an overlay. 

To learn how to add a Widget to your Composition, click here.

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.


As seen above, select the "Grid" tab in the Property Panel to update this widget's following property types:



Content Box - Area for JSON of your grid content.

Example JSON

{"content":[  { "Team":"Baltimore Ravens", "Logo":"", "W":"10", "L":"6", "T":"0"  },  {   "Team":"Pittsburgh Steelers",   "Logo":"",   "W":"9",   "L":"6",   "T":"7"  },   {   "Team":"Cleveland Browns",   "Logo":"",    "W":"7",    "L":"8",    "T":"1"  },  {   "Team":"Cincinnati Bengals",   "Logo":"",    "W":"6",    "L":"10",    "T":"0" }]}



Columns - Amount of columns in the grid

Rows - Amount of rows in the grid

Cols Spacing - Spacing (in percent) between columns

Rows Spacing - Spacing (in percent) between rows

Show Layout - Option to see the layout separately from the JSON content



Composition - The Grid Widget is an Advanced Widget. This means it requires another layer of customization. In order to build the contents of this Slideshow Widget (that will be linked to your JSON content), you have to hit this Edit button.

Update Style - Type of animation used for when the content is updated. Options are Update Animation or Timeline Animation.

Page Transition - How each grid is animated on screen when updated to a new page. Options are Top to Bottom, Bottom to Top, Left to Right, Right to Left and Random.

Transition Offset - Offset (in seconds) between each grid animation on screen. For example, the top grid could animate on and then one second later, the next grid animates on.

Edit Button - Building the Grid Widget Elements

Before getting started, set the Columns to 1 and the Rows to 4 in the Layout property box. Now, hit the "Edit" button in the Style property box to get started building the grid elements. Notice that the area provided is based off of the grid settings you have defined. We are using the example JSON so we will be creating a grid containing four NFL football teams. For this, we will need to add an Image Widget for the team logo and four text widgets for the team name, wins, losses and ties. Notice that all these categories have been defined in the example JSON.

   Adding an Image and Four Text Widgets


For these elements to work properly with the JSON, you have to create Control Nodes for the Image and Text Widgets. Add Control Nodes that are connected to the right elements by using the Node Link Browser. Make sure to name them as they are named in the JSON: call your Image Control Node "Logo" and your Text Control Nodes "Team", "W", "L" and "T". This is very important because we use this exact naming in our example JSON playlist. If you do not name the Control Nodes in this way, the Grid Widget will not work. 

Adding Control Nodes with the Node Link Browser


Go back to the root level of this Widget see the grid properly display your JSON content.



Current Page - Can set current page that is visible. You can have a large amount of pages if you have a lot of teams, for example.


Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.