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:
If the value of language
is en
, then the following HTML is generated:
1 2 3 |
|
If the value of language
is fr
, then the following HTML is generated instead:
1 2 3 |
|
Repetitive inclusion
You can 'programmatically' generate multiple tags with a while or iterate step. Consider the following example:
With these steps, the following HTML would be generated:
1 2 3 4 5 6 |
|
Random inclusion
You can randomly include a tag step using a random step. Consider the following example:
The following HTML might be generated:
1 2 3 |
|
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:
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 |
|
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:
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 |
|