1 REPORT STRUCTURE (SECTIONS)
2 Logic in REPORT TEMPLATES: Using TWIG engine
3 CSS STYLES
- 3.1 Default CSS
- 3.2 Custom CSS
4 Pagination
- 4.1 Pagination example
5 Predefined TWIG functions
6 Examples
- 6.1 Header of the default page
- 6.2 Body of the default page
- 6.3 Footer of the default page

A REPORT is a customized document that you can define to show information.

To generate a REPORT it is necessary to define a REPORT TEMPLATE, which is basically a HTML document in which you can place:

Standard HTML content
TWIG commands that allow you to add logic to the generation of REPORTS
OBJECT CODES that will be evaluated and passed as TWIG variables when the REPORT is generated.
Calls to some predefined functions that can help you simplify the definition of REPORTS

REPORT STRUCTURE (SECTIONS)

A REPORT has the following structure:

And each part of the report (FIRST_PAGE, HEADER, BODY…) must be defined as the <body> of a HTML document (it is not necessary to include the <html> nor <header> tags)

You can use the functions library_report_set_section ( session, report, section ) to define the contents of each section.

Logic in REPORT TEMPLATES: Using TWIG engine

You can add TWIG code to your REPORTS to add logic to the generation of the REPORT. For example, you may want to show a part of a REPORT only when a variable has certain value.

Refer to the TWIG Documentation for more information about how to use TWIG.

When writing TWIG code, you can use OBJECT CODES as variable names. The Linkcare platform detects the presence of OBJECT CODES and passes them as variables to the TWIG render engine.

Example: the following TWIG code sends to output the value of the OBJECT CODE “TASK.TITLE”

Title of the report: {{ TASK.TITLE }}

In this example, you can find the following parts:

Title of the report: Is a literal that will be sent to the output exactly as written
... Are standard HTML tags that we are using to format the text enclosed inside
The {{ and }} tags instruct TWIG to send to evaluate the expression enclosed inside (in this case: TASK.TITLE) and send its value to the output
TASK.TITLE Is an OBJECT CODE that is evaluated by the Linkcare platform and passed to the TWIG render engine as a variable. In this case

If form example, the REPORT is part of a TASK with title “Example REPORT”, the previous code would have generated the following HTML:

Title of the report: Example REPORT

Which a browser would show as:

Title of the report: Example REPORT

CSS STYLES

Default CSS

By default the Bootstrap CSS styles are included when the page is rendered so you can use then when you write your own HTML code.

Custom CSS

It is also possible to include your own style definitions: There is a special section called “STYLE” that you can use to define your own CSS styles. This allows to create HTML content in the REPORT using your own styles.

The CSS styles defined in this section are appended to the final HTML document generated when the function report_get () is invoked.

Following the previous example, we could also have generated the REPORT setting the following sections:

Section	Contents of the section

Section	Contents of the section
BODY	`Title of the report: <span class="my_style">Example REPORT</span>`
STYLE	`.my_style {` `font-weight: bold,` `font-style: oblique` `}`

Pagination

It is possible to add pagination to the REPORTS using the following predefined variables:

PAGE.CURRENT: Current page number
PAGE.TOTAL: Total pages number

To show the page numbers you must include a TWIG code snippet in the HTML code so that their value is replaced by the appropriate HTML code: {{ PAGE.CURRENT | raw }}

Note that it is important to use the | raw operator because the predefined variables contain HTML code, and otherwise some symbols like <, > would be replaced by the encoded representation (< , >) would be interpreted as text instead of HTML code.

Pagination example

{{ PAGE.CURRENT | raw }} / {{ PAGE.TOTAL | raw }}

Predefined TWIG functions

The Linkcare platform defines a set of PREDEFINED TWIG FUNCTIONS that simplify the process of designing new REPORTS. This functions can be invoked from TWIG code.

For example. the function itemAnswerRender() REPORT function can be used to generate a nice visual representation in a REPORT of the answer of an ITEM configured as a multi-options question (radio buttons)

We can use the function itemAnswerRender() to display the answer ot the question in a REPORT with this appearance:

Examples

Header of the default page

The following code renders the logo of the TEAM of the active ADMISSION and the name and birthdate of the patient:

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6">
        <!-- Render the logo of the SUBSCRIPION's TEAM -->
        <img src="data:image/jpg;base64,{{SUBSCRIPTION.OWNER.IMAGE{LOGO}.BASE64}}" style="height: 50px;"/>
        <div class="subtitle">
          <h5>{{SUBSCRIPTION.OWNER.NAME}}</h5>
        </div>
      </div>
      <div class="col-xs-6">
        <p>
          <!-- Render name and birthdate of the patient -->
          <table>
            <tbody>
              <tr>
                <td style="padding-right: 5px;">Name and surnames:</td>
                <td style="font-weight: bold; text-align: left;">{{CASE.CONTACT.FULLNAME}}</td>
              </tr>
              <tr>
                <td style="padding-right: 5px;">Birth date:</td>
                <td style="font-weight: bold; text-align: left;">{{CASE.CONTACT.BDATE}}</td>
              </tr>
            </tbody>
          </table>
        </p>
      </div>
    </div>
  </div>
</header

Body of the default page

The following code renders some empty sections, and a final one with the name of the referral of the ADMISSION.

<body>
    <page>
      <section>
        <h5>Section 1 title</h5>
        <div>
          Section 1 contents
        </div>
      </section>
      <section>
        <h5>Section 2 title</h5>
        <div>
          Data table
        </div>
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>value 1/td>
              <td>value 2</td>
              <td>value 3</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h5>Section 3 title</h5>
        <div class="signature">
          <!-- Name of the referral of the ADMISSION -->
          Referral: <b>{{ADMISSION.REFERRAL.USER.CONTACT.FULLNAME}}</b>
        </div>
      </section>
    </page>
</body>

Footer of the default page

The following code renders the footer with page numbering

<body>
  <footer>
    <p style="width: 100%;text-align: right;">{{ PAGE.CURRENT | raw }} / {{ PAGE.TOTAL | raw }}</p>
  </footer>
</body>

Linkcare Server WS API

REPORT TEMPLATE FORMAT