DataSets in Xibo 1.8

April 23, 2018 by steve

 

Xibo has a lot of useful features. Today I want to talk about DataSets and how to design them. By the end of this article, you will have designed a happy birthday announcement layout using DataSets as the information store. For this article to make sense, you will need to have a basic understanding of CSS.

What are datasets?

If you have never heard of DataSets in Xibo, don’t worry. DataSets seem to be Xibo’s best kept secret. Here is how the Xibo documentation describes them, “DataSets are a feature to design and store tabular data. Once designed the data can be imported from a CSV file, entered manually, as JSON via the API or synced remotely on a schedule. A DataSets provides a convenient way to import and display data from other systems in Xibo.”
Now the question you should be asking is: why are DataSets useful? DataSets are great when you want to change tabular type data in your layouts without actually modifying the layout. This allows for non-designers to easily update your signage without the possibility of changing the look of the layout. Great use cases for DataSets are menus, meeting time lists, and birthday announcements.

Getting Started with Datasets

To get started, lets first create a DataSets. This can be done by clicking “DataSets” under the “Library” section on the main menu. Then we must click “Add DataSet” on the top right of the DataSet page. This should bring up a pop up asking for information to create a new DataSet. For this exercise, we will only need to provide a name for our DataSet. We will call our DataSet “Birthdays”.

Creating a dataset

After we save our DataSet, we need to get it ready to accept our data. To accomplish this, we need to tell our DataSet what columns it needs to have. Click on the drop down menu for our “Birthdays” DataSet and select “View Columns”.

editing columns for datasets in xibo

We will need two columns for our birthday layout: name and date. We will re-purpose the existing column in the Dataset for the name field and create a new one for the date field. For both data types we will use the string data type to keep things easy. After editing and adding your columns, everything should look as it does below.

 

Dataset columns in xibo

Layouts and DataSets

Once you have your DataSet, you are ready to add it to a layout. This is done by adding the DataSet module to a region on our layout. Under the “Apperance” tab for the DataSet module, you will need to add which columns we want to show in our layout. Once you preview your layout, you will see one problem: out of the box DataSets are ugly.

xibo layout designer

Do not fear, CSS will save the day! The look of our DataSet is controlled by a few CSS classes:
Now we can add CSS to our Dataset by editing the DataSet module on the layout region. Under the “Appearance” tab of our DataSet, we can add the new CSS. We must make sure the “Override the Template” checkbox is selected.
Xibo and CSS
Below is the CSS I wrote for my DataSet.
.DataSetTable
{
width: 100%;
border-radius: 22px;
border-spacing: 0px;
font-family: roboto condensed regular;
overflow:hidden;
}
.DataSetRow
{
font-size: 34px;
color: white;
}
.DataSetColumn
{
text-align: center;
padding: 20px;
}
.DataSetRowEven
{
background: #B3CEE3;
}
.DataSetRowOdd
{
background:#4384BA;
}
See the image below to see what the CSS code creates. The other thing I did was place a background image I found on the internet on the layout. With a few minutes of work, our layout looks pretty good and the birthday data can be easily updated without touching the layout. Also, since DataSets use CSS, sky is the limit when it comes to customizing appearance of our DataSet.
datasets and xibo
If you need xibo hosting or layout creation, check us out at mysignage.rocks!