Readers are required to have basic knowledge of raw HTML and CSS.


HTML letter template is a HTML document with mustaches for data substitutions and optional stylesheets for styling.

Styling


Please keep in mind that CSS linked may impact on the style of the whole SPA since both the HTML letter and the SPA sit on the same HTML DOM. For example, if you link a Bootstrap CSS in the template, the HTML letter generated will look funny, since Bootstrap has different default values for Z-order than Angular, and Bootstrap has a lot blanket styling for HTML tags.

Therefore, it is recommended that you craft CSS conservatively:

  1. Not to have blanket stylings upon HTML elements.
  2. Do use distinctive class names or ids for styling. For example, use “mlt_” as a prefix of class names for letter template specific styling, so to avoid collisions with the styling of the application.
  3. Prefer embedded CSS over linked CSS.

Hints:

If you use an external CSS tools to craft CSS, you may be seeing that the visual become different in the application, since the application has its own styling, and both the letter and the SPA sit in the same HTML DOM.

There are plenty of CSS authoring tools and HTML editors around, desktop base or Web base. It is recommended to use those tools, then copy and paste the template to the application.

Remarks:

For multiple line address data with EOL, things are tricky in HTML. There could be 2 approaches:

  1. Use <pre>
  2. Use some JavaScript to substitute the EOL in data with some think like <br> or <div>

Another approach is to use address segments, rather than all in 1 chunk of data.


Drafting

Only admin or manager are allowed to define templates, who are required to have skills of writing raw HTML and CSS.




The app provides a list of mustaches allowed in the dropdown list, so you may draft a template like the examples below.


Examples


HTML Letter Template


<html>
<head>
    <title></title>
  <meta charset="utf-8" />

<style>dt {
    font-weight: 600;
}
 
dd {
    color: rosybrown;
}

pre {
            overflow-x: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
         }
</style>
</head>
<body>
<h1>Demo</h1>

  <dl>    
    <dt>Today</dt><dd>{{Today}}</dd>
    <dt>Now</dt><dd>{{Now}}</dd>
    <dt>PatientTitle</dt><dd>{{PatientTitle}}</dd>
    <dt>PatientGivenName</dt><dd>{{PatientGivenName}}</dd>
    <dt>PatientSurname</dt><dd>{{PatientSurname}}</dd>
    <dt>PatientKnownAs</dt><dd>{{PatientKnownAs }}</dd>
    <dt>PatientName</dt><dd>{{PatientName }}</dd>
    <dt>PatientStreet1</dt><dd>{{PatientStreet1}}</dd>
    <dt>PatientStreet2</dt><dd>{{PatientStreet2}}</dd>
    <dt>PatientCity</dt><dd>{{PatientCity}}</dd>
    <dt>PatientState</dt><dd>{{PatientState}}</dd>
    <dt>PatientPostcode</dt><dd>{{PatientPostcode }}</dd>
    <dt>PatientDOB</dt><dd>{{PatientDOB}}</dd>
    <dt>PatientSex</dt><dd>{{PatientSex}}</dd>
    <dt>PatientPhone</dt><dd>{{PatientPhone}}</dd>
    <dt>PatientHomePhone</dt><dd>{{PatientHomePhone}}</dd>
    <dt>PatientWorkPhone</dt><dd>{{PatientWorkPhone }}</dd>
    <dt>PatientMobilePhone</dt><dd>{{PatientMobilePhone }}</dd>
    <dt>PatientEmail</dt><dd>{{PatientEmail}}</dd>
    <dt>PatientMedicareNumber</dt><dd>{{PatientMedicareNumber }}</dd>
    <dt>PatientDVANumber</dt><dd>{{PatientDVANumber}}</dd>
    <dt>PatientHealthFund</dt><dd>{{PatientHealthFund }}</dd>
    <dt>PatientHealthFundNumber</dt><dd>{{PatientHealthFundNumber}}</dd>

    <dt>PatientMedicareExpiry</dt><dd>{{PatientMedicareExpiry }}</dd>
    <dt>PatientAge</dt><dd>{{PatientAge}}</dd>
    <dt>PatientMultilineAddress</dt><dd><pre> {{PatientMultilineAddress}}</pre></dd>
    <dt>PatientSinglelineAddress</dt><dd>{{PatientSinglelineAddress }}</dd>

    <dt>ProviderNumber</dt><dd>{{ProviderNumber}}</dd>
    <dt>ProviderTitle</dt><dd>{{ProviderTitle}}</dd>
    <dt>ProviderFirstname</dt><dd>{{ProviderFirstname}}</dd>
    <dt>ProviderSurname</dt><dd>{{ProviderSurname }}</dd>
    <dt>ProviderName</dt><dd>{{ProviderName}}</dd>

    <dt>ReferringProviderProviderNumber</dt><dd>{{ReferringProviderProviderNumber}}</dd>
    <dt>ReferringProviderTitle</dt><dd>{{ReferringProviderTitle }}</dd>
    <dt>ReferringProviderGivenname</dt><dd>{{ReferringProviderGivenname }}</dd>
    <dt>ReferringProviderSurname</dt><dd>{{ReferringProviderSurname}}</dd>
    <dt>ReferringProviderName</dt><dd>{{ReferringProviderName}}</dd>
    <dt>ReferringProviderStreet1</dt><dd>{{ReferringProviderStreet1}}</dd>
    <dt>ReferringProviderStreet2</dt><dd>{{ReferringProviderStreet2}}</dd>
    <dt>ReferringProviderCity</dt><dd>{{ReferringProviderCity}}</dd>
    <dt>ReferringProviderState</dt><dd>{{ReferringProviderState}}</dd>
    <dt>ReferringProviderPostcode</dt><dd>{{ReferringProviderPostcode}}</dd>
    <dt>ReferringProviderPhone</dt><dd>{{ReferringProviderPhone}}</dd>
    <dt>ReferringProviderFax</dt><dd>{{ReferringProviderFax }}</dd>
    <dt>ReferringProviderMultilineAddress</dt><dd><pre> {{ReferringProviderMultilineAddress}} </pre></dd>
    <dt>ReferringProviderSinglelineAddress</dt><dd>{{ReferringProviderSinglelineAddress }}</dd>

<dt>ConsultationDate</dt><dd>{{ConsultationDate}}</dd>
<dt>ConsultationDateTime</dt><dd>{{ConsultationDateTime}}</dd>
<dt>ConsultationHistory</dt><dd><pre>{{ConsultationHistory}}</pre></dd>
<dt>ConsultationExamination</dt><dd><pre>{{ConsultationExamination}}</pre></dd>
<dt>ConsultationDiagnosis</dt><dd><pre>{{ConsultationDiagnosis}}</pre></dd>
<dt>ConsultationTreatment</dt><dd><pre>{{ConsultationTreatment}}</pre></dd>


</dl>

<p>ConsultationHistory HTML rendered</p>{{{ConsultationHistory}}}

</body>
</html>

Booking Confirmation Subject


Confirm booking for {{PatientName}} with {{PractitionerName}} about {{AppointmentSummary}}


Booking Confirmation Body


Something to say about the booking
<p>patientName: {{PatientName}}</p>
<p>PractitionerName: {{PractitionerName}}</p>
<p>Address: {{Address}}</p>
<p>Replyto: {{ReplyTo}}</p>
<p>AppointmentDescription: {{AppointmentDescription}}</p>
<p>AppointmentSummary: {{AppointmentSummary}}</p>
<p>Start: {{StartTime}}</p>
<p>End: {{EndTime}}</p>

Please ring someone