Skip to content

Toro Cloud Dev Center


Tag step

A Web Page template describes the structure and content of a web page through Gloop steps. Steps come in many different types; each with a unique purpose. The tag step is a special type of step only available for use in templates. Each instance of this step represents an HTML element. Together, they specify which HTML elements to include in the HTML DOM when building a Web Page template.

A tag step has a name, a list of attributes, and content. The name of a tag step refers to the name of an HTML tag. For a <div> tag, the tag step name would be div. Tag step attributes, on the other hand, are used to define an HTML element's attributes. These are key-value pairs that provide additional information about an element. In <div class="bold">, there would be a tag step attribute named class whose value is set to bold. Lastly, a tag step's content defines an HTML element's content. This is typically the text visible in the browser. In <p>Hello, workd!</p>, the tag step content would be Hello, world!.

A tag step can also nest other steps. You can nest any number of steps you like. Through nesting, you can define the structure of your HTML document. Whether a tag step can contain tag step children or not depends on the assigned name of the tag step. As with HTML, not all elements can contain children.

Usage with other Gloop steps

A static web page can easily be created through tag steps only. But for dynamic web pages, chances are you would have to use service steps in your template. Service steps allow you to conditionally or repetitively include tag steps.

Conditional inclusion

You can conditionally include a tag step using a fork step. Consider the following example:

Conditional tag step

If the value of language is en, then the following HTML is generated:

1
2
3
<div>
    <p>Hello, world!</p>
</div>

If the value of language is fr, then the following HTML is generated instead:

1
2
3
<div>
    <p>Bonjour le monde !</p>
</div>

Repetitive inclusion

You can 'programmatically' generate multiple tags with a while or iterate step. Consider the following example:

Repetitively including a tag step

With these steps, the following HTML would be generated:

1
2
3
4
5
6
<ul>
    <li>Hello, world!</li>
    <li>Hello, world!</li>
    <li>Hello, world!</li>
    <li>Hello, world!</li>
</ul>

Random inclusion

You can randomly include a tag step using a random step. Consider the following example:

Random tag step

The following HTML might be generated:

1
2
3
<div class="blockquote">
    <p>It's not a bug, it's a feature.</p>
</ul>

Dynamically setting the value of a tag's content

You can also use map lines and set expressions to set the value of a tag step's content.

To map a value from a property to a tag step's content, go to the Mapper view and add a line from the desired property to $tagContent. $tagContent is a reserved property for tag steps; whichever value is assigned to this property will be set as the tag step's content.

There are two ways you could set a tag's content via set expression. The first way is through the Content step property, while Evaluate Content is set to true. With this configuration, the value of Content will be treated as a Groovy expression; and its resulting value would be used as the tag step's content. The second way is by adding a set expression to the $tagContent property.

Consider the following example:

Setting the content of a tag via `$tagContent`

If the value of name is world, then the tag step's content would be set to Hello, world!. If the value of name is John, then the following HTML would be generated instead:

1
2
3
<div>
  <p>Hello, John!</p>
</div>

Dynamically setting the value of a tag's attributes

Like the content, a tag step's attributes can also be set using a map line or set expression. The attribute must be declared first in the tag step, so its value can be set dynamically in the Mapper. Consider this example:

Setting the attribute of a tag via a set expression

If message was set to Congratulations, you have successfully read this message. and messageType was set to success, the resulting HTML document for this template would be:

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