Skip to content

Toro Cloud Dev Center


Invoke template step

Websites usually share common page components like headers, footers, or a menu. Martini allows you to create a Web Page template for each of these components, and reuse them in dependent templates through an invoke Web Page template step. Using this type of step, you can inject content generated by one Web Page template to another.

Reusing CSS/JS import statements

The web pages of a website typically use more or less the same assets. This means statements like the following will be present in most, if not all HTML documents:

1
2
3
4
5
<head>
    <link rel="stylesheet" type="text/css" href="/todo-app/bootstrap.min.css">
    <link rel="stylesheet" type="text/javascript" href="/todo-app/bootstrap.min.js">
    <!-- ... -->
</head>

In Gloop, you can create a template that declares the import statements above. And then templates that need these declarations may just call the component template with the import statements.

Breaking down pages into smaller, reusable parts is a standard practice followed by many web developers. You can create a web page with just one Gloop template; but as your HTML structure gets more complex, your code will be harder to read and maintain. This is why TORO recommends you follow the same practice when writing Web Page templates, so you can avoid duplication in your code.

Using an invoke template step

Like an invoke step, an invoke template step can be added to a Web Page template using content-assist, or by dragging and dropping a template from the Navigator to the dependent template's step tree.

Adding an invoke template step via dragging and dropping

Adding an invoke template step via dragging and dropping

If you need to pass data or use the data produced by an invoked template, select the invoke template step and go to the Mapper view. In the Mapper view, you can create map lines and add set expressions for the invoke template's input and/or output properties.

The location of your invoke template step is important, as this would define where the HTML code from the invoked template would be injected. Consider the following example:

A template with invoke template steps

If Index.gtpl is run, the expected HTML document would be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/todo-app/bootstrap.min.css">
        <link rel="stylesheet" type="text/javascript" href="/todo-app/bootstrap.min.js">
    </head>
    <body>
        <div class="alert alert-success" role="alert">
            Congratulations, you have successfully read this message.
        </div>
    </body>
</html>

Injecting additional tags to an invoked template

In some cases, you may want to reference another Web Page template but also nest extra elements inside of it. To do this, the referenced Web Page template must have a tag step labeled $gloopTemplateView. A template can only have one tag with this label. This makes the labeled step act as a wrapper or decorator for the to-be-injected element(s).

Consider the following example:

Injecting tags inside an invoked template

Lorem invokes Quisque in line three, and injects two additional li elements by placing them under the invoke template step. Since Quisque's ul tag is labeled $gloopTemplateView, injected elements will be placed under it. The expected HTML document is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Quisque aliquet mattis est, sit amet placerat justo dignissim sit amet.</p>
    <ul>
        <li>dui</li>
        <li>gravida</li>
        <li>diam</li>
        <li>tempor</li>
    </ul>
    <p>Quisque sit amet sapien velit.</p>
    <p>In pellentesque fermentum lacus vel maximus.</p>
</body>