Digital Signage Addon Appendix C - Template Example

Below is a typical Digital Signage Screen Template example using HTML. If you're not familiar with HTML, please see our KB article: What is HTML and how do I use it within my MIDAS templates?
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!

The following is a graphic representation of how the above example template may render on your display device:

Example Screen Output
Today's Bookings
Wednesday, April 15, 2020
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 of the Example Template
The example template and rendered screen above starts by displaying 3 headings in decreasing size (using the HTML tags <h1>, <h2>, and <h3>).

"Today's Bookings" is the first static heading (<h1>).

The other two smaller headings (<h2> and <h3>) use global "placeholder" variables in the template code. These placeholders are substituted with corresponding live data when displayed on your display device(s).

The %TODAY% placeholder is substituted with the current date. The %DATABASE% placeholder is substituted for the name of your current database.

The next section of the template is a standard HTML table, contained between the <table> and </table> tags.

The first row of the table (contained between the first set of <tr> and </tr> (Table Row) tags) contains columns names for "Times", "Venue", "Booking Type", and "Client". Each column in a row is surrounded by <td> and </td> tags, denoting Table Data.

Notice that the second row of the table is surrounded by <booking></booking> tags (indicated in blue) - this indicates to MIDAS that this section of template code should be repeated for each individual booking displayed.

In this example, because the second table row is enclosed within <booking></booking> tags, a new row will be inserted into the table for each booking. (Note: <booking></booking> tags will be automatically stripped from the final output display in order to generate valid HTML)

The field placeholder variables in this row are substituted for real booking data when displayed on your display device(s). For example, %VENUE% will be substituted for the name of the room (venue) a booking takes place in.

Note the presence of the %ONGOING% variable in the template code (indicated in green) - this tells MIDAS that if the booking is currently ongoing ("in progress") to apply a special "ongoing" CSS style class to the element. This allows ongoing bookings to be distinguished on screen.

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 being 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 yellow.

You can define the color/style of the special "ongoing" class the "Custom CSS Styling" field below the screen template editor.

In the "Custom CSS Styling" field, you can change the styling of this special "ongoing" class, as follows:

.ongoing{color:yellow}

Similarly, you can "style" other visual screen elements in this way. For example, to change the "Today's Booking" text (contained within <h1></h1>) to be red, you could enter:

h1{color:red}