How to connect data

Aug 6, 2018 | Tutorials

The advances in Digital Signage have meant that a signage display now has to show up to the minute information. The time the next bus is arriving, the current temperature, current pricing and stock availability are just a few examples of information that needs to be current and updated. How do we do this without having to manually edit the content all the time? We need to connect the displays to data source that have this information already. Then, when this data changes in the sources it automatically changes the information on the screen. Databinding is an integral part of modern digital signage solutions and iScreen has this type of functionality built in.

The initial adding of an external data source is a role performed by super administrators. On a cloud system, this will be performed by us. Once the source is added then the data source can be used.

How to use data and data binding.

Once you have a data source added the data is available to use. If we say that the source is an xml feed of burger prices and images then we can include these into our display. We add a text element and an image element and connect these to our data. Once this is achieved if we change the price of the burger in the external data it will be updated to the screen.

So how do we achieve this? The easiest way to create your own data for this page is to use Google Sheets. Google Sheets acts as a spreadsheet but outputs data as an xml. To use google sheets you need a google account if you don’t have one. Create a sheet – make sure you use row 1 as column headers and then add the data. See below

Click to enlarge

Click to enlarge

Click to enlarge

Create the sheet and then make sure you publish to the file to the web. You can then share the file with us and we can add the data source for you.

Building the page

With your data now available we can start building the page.

  • Drag or click the image element and place on the workspace.
  • Size the image to the size you want by using the Size and Position tool in the left sidebar or drag the bottom right corner of the image element.
  • Click datapicker.

Click to enlarge

  • Select the datasource ( TIP if you add the datasource to the page properties Base Data setting then the datasource will become the default selection for all elements on the page )
  • Keep selecting till you get to the imageurl. This will place the image into the image element. Please note that the first row of data is labelled 0 the second 1 and so on. So the first image should be set 0.
  • If at any time you want to change the image you simply change the url in the Google sheet.

Click to enlarge

  • You can now select and place the text and price elements and proceed with the datapicker as for the image. selecting price and text data from row 0. This should result in the page being built from your data source. To change the content you only need to edit the Google Sheet. You do not need to access the system at all to render changes to the page. You want the price to be $15.95 – simply edit the sheet

Click to enlarge

Click to enlarge

The principle is the same if you are using xml data from third party data sources. The data source needs to be added to the system by the super administrator and then you can connect the relevant elements to the data in the same way. This means that whenever the data in the third part data changes so your screen will automatically update to display the new data.

Pin It on Pinterest

Share This

Share this post and Spread The Word about iScreen. Thanks!