Digital Signage AddonDigital Signage

Appendix C - Template Example

Below is a typical Screen Template example, how it may appear on your display device, and a detailed explanation of how the template translates to what your visitors will see on screen...
Example Screen Template
<h1>Today's Bookings</h1>
<h2>%TODAY%</h2>
<h3>%DATABASE%</h3>
<table>
 <tr>
  <td>Times</td>
  <td>Venue</td>
  <td>Booking Type</td>
  <td>Client</td>
 </tr>
 <bookings>
  <tr%ONGOING%>
   <td>%START% - %FINISH%</td>
   <td>%VENUE%</td>
   <td>%TYPE%</td>
   <td>%CLIENT%</td>
  </tr>
 </bookings>
</table>
<br>Thank You For Visiting Us Today!
Example Screen Output
Today's Bookings
Friday, April 15, 2016
My Company
TimesVenueBooking TypeClient
08.00 - 09.00Room 1MeetingJoe Bloggs
09.00 - 11.30Room 4TrainingJane Doe
09.15 - 10.45Room 2ExamJoe Bloggs

Thank You For Visiting Us Today!

Powered by https://mid.as
Explanation
This simple screen starts by displaying 3 headings (<h1>, <h2>, and <h3>).
"Today's Bookings" is the first "static" heading.
The other two headings use global variables in the template, which are substituted with corresponding values when displayed on your display device(s).

The next section of the template is a standard HTML table.
The first row contains columns names for "Times", "Venue", "Booking Type", and "Client"
Notice that the second row of the table is surrounded by <booking></booking> tags (indicated in orange) - this indicates to MIDAS that this section of code should be repeated for each booking displayed.
In this example, because the second table row is enclosed within <booking></booking> tags, a new row will be inserted for each booking. (Note: <booking></booking> tags will be automatically stripped from the final output display in order to generate valid HTML)

The field variables in this row are substituted for real booking data when displayed on your display device(s)

Note the presence of the %ONGOING% variable (indicated in green) - this tells MIDAS that if the booking is currently ongoing ("in progress") to apply an "ongoing" class to the element.

So, for ongoing bookings <tr%ONGOING%> would be substituted with <tr class=ongoing>

For all other bookings, <tr%ONGOING%> would be substituted with <tr>

If we assume that the Example Screen Output shown above was what was displayed on the screen at 08.15 in the morning - at that point in time, one booking is "ongoing" - the one highlighted on the screen in red.

You could define the color/style of our "ongoing" class in an external style sheet and then include it using the "Custom .css Stylesheet" option.

In your external style sheet, you can change the styling of this special "ongoing" class, as follows:

.ongoing{color:yellow}