Storyboard - Adding Tables to your Application User Interface (UI)

Today, we are going back to basics in this Storyboard user interface (UI) tutorial. Table basics. Tables are a special control in Storyboard. While most controls are individual, tables are more like containers that organize several controls inside them. This tutorial will walk you through how to create a very simple table, add background colour, adjust basic settings, and add render extensions. Before we get started building our table, create a new application in Storyboard Designer.

Add a background colour for the application's UI

First we're going to add a background to our application.

1. Right-click on Screen1
2. Select Add
3. Select Control
4. Give your new control a name
5. In the Render Extensions list, select Fill
6. Select Finish

You will be asked to select a colour for your background. For the purposes of this tutorial, let's select white.

Resize to fill background

A trick to fill a layer with a control is to right-click the control and select Resize > Fill Container.

Add and set up a table

Now we can set up our first table. Remember, we can always return to change these settings at a later time if we want to refine the table.

1. Give your table a name. This is the name of the table control that will show up in your Application Model (the highlighted area).
2. Under Size and Position we can control the overall size of the table. This will be the overall size of the table that contains the table cells. Note that if you have cells that extend beyond the confines of this overall table size, they will not render and you'll have to scroll. Let's set ours to a width of 500 and height of 350.
3. The Table Settings section allows you to specify the number of rows and columns and the size of the table cells. Let's create a table with 5 rows and 2 columns and calls that have a width of 250 and height of 50.
4. In the Table Cell Render Extension section, we can select the first render extension for the table cells. Usually we would select text here but in order to understand things better, choose the rectangle extension. We can add more later.
5. In the Render Extensions section, you can add render extensions to the table as a whole. Note that this affects the overall table and not the individual cells. Think of this as the background of the table container. Select Fill for this one.

Select Finish, and pick a grey shade from the colour picker. You should see a table that looks like this: Pretty!

Add a new render extension

Let's add a text render extension to the cell template.

1. Select your cell template
2. Select the Properties tab
3. Click on add new in the Render Extensions box
4. Select the render extension you want to use, in this case Text
5. Select Finish

You should see an awesome table similar to this: And that's how you create a basic table! This tutorial took you through the steps to create a simple table. Go ahead and experiment with adding more extensions and organizing them in the properties panel. In the next Storyboard tutorial we will explore table variables.