What is a Governor Expression?
Governor Expressions are tags used to customize databinding in Governor templates. Through a simple @ symbol based syntax, it allows flexibility and control over Governor templates. This allows for creative and useful applications of Governor controls by template developers.
Each govtag has a default behavior that determines how the data from that tag shows up in the rendered html.
Let's take a look at a regular Governor image control tag.
<img gv-img -label="image"/>
This tag creates an image selector control in the application that allows users to edit and manage a photo.
When Governor executes this tag it gets transformed into a standard HTML element using a default behavior. The result looks like this.
<img gv-img="img" -label="image" src="link/to/src" alt="alt value from user"/>
Everything you would expect a standard <img> element to contain, with the content data inserted into the expected src and alt attributes.
Expressions allow this default behavior to be overridden and replaced with custom templating.
A common pattern on modern websites is using a large background hero image. This is usually accomplished with css or javascript and requires the images url to be stored inside a style attribute, rather than inside the src.
You might require an image url to be rendered like this. While allowing the image url to be selected using a gv-img tag.
<div class="hero" style="background-image:url(path/to/image);">
<h1> Neat-o!</h1>
</div>
If we tried to use the standard gv-img tag like this.
<div gv-img -label="Background Image" class="hero" style="background-image:url();">
<h1 gv-text -label="Hero Title"></h1>
</div>
It would end up rendering like this using the default gv-img behavior.
<div gv-img="img" -label="Background Image" src="path/to/img" alt="alt value from user" class="hero" style="background-image:url();">
<h1 gv-text="text" -label="Hero Title">Hello World!</h1>
</div>
This doesn't work because we need the images url to render inside our style tag, not inside the src as it does by default.
Instead an Expression can be used to modify the output and achieve the desired html.
<div gv-img -label="Background Image" class="hero" style="background-image:url(@src);">
<h1 gv-text -label="Hero Title"></h1>
</div>
Inserting an @src tag will override the default tag behavior and allow the images url to be rendered where we want. With the @src tag included, our rendered html will now look like this.
<div gv-img="img" -label="Background Image" class="hero" style="background-image:url(path/to/image);">
<h1 gv-text="text" -label="Hero Title">Hello World!</h1>
</div>
Once an expression is used in a tag, the default rendering behavior of the tag is disabled. This means that only the data that is explicitly referenced with an expression will show up. Notice in the above snippet the default image attribute "alt" is not rendered. This is because we didn't not explicitly declare the @alt expression in our now customized tag template.
Let's take a look at another expression.
<ul>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
(text should be here)
</li>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
(text should be here)
</li>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
(text should be here)
</li>
</ul>
In the example above we have a list of items that need an icon before each piece of user inputted content.
Without expressions, it would render to...
<ul>
<li gv-text="text" -label="List Item">
User Input
<i class="lightning-bolt"></i>
</li>
<li gv-text="text_1" -label="List Item">
User Input
<i class="lightning-bolt"></i>
</li>
<li gv-text="text_2" -label="List Item">
User Input <i class="lightning-bolt"></i>
</li>
</ul>
The icons would be rendered after the text because the default gv-text behavior appends the text data inside the element.
<element>text renders here<i class="lightning-bolt"></i></element>
To get the expected result we can use the @text expression to tell Governor to render the text data after the icons.
<ul>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
@text
</li>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
@text
</li>
<li gv-text -label="List Item">
<i class="lightning-bolt"></i>
@text
</li>
</ul>
This would render to..
<ul>
<li gv-text="text" -label="List Item">
<i class="lightning-bolt"></i>
User Input
</li>
<li gv-text="text_1" -label="List Item">
<i class="lightning-bolt"></i>
User Input
</li>
<li gv-text="text_2" -label="List Item">
<i class="lightning-bolt"></i>
User Input
</li>
</ul>
Our final example will be the link expression.
First, take a look at the default link behavior.
<a href="href/data/here">text data here</a>
Links have two associated pieces of data, the href (or url) and the text. In some cases, you may not need the link text, for example when wrapping an image, or several elements.
<a href="link/to/website">
<img class="logo" />
</a>
Using the link expression, this example can be accomplished with ease.
<a gv-link href="@href" -label="Logo Link">
<img class="logo" gv-img -label="Logo">
</a>
Which would render to..
<a gv-link="link" href="path/to/url" -label="Logo Link">
<img class="logo" gv-img="img" -label="logo" src="path/to/image" alt="user input"/>
</a>
In conclusion there are countless applications for expressions that allow for creative solutions for every day web development challenges.
Check out each individuals tags documentation page for additional information on each specific Governor Expression.