Appendix C - Template Example

<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!

Thank You For Visiting Us Today!

"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}