How does the # option operator work in AEM HTL templates - syntax

Question

I spen a bit of time trying to read the official documentation on the AEM # operator and the official syntax specification, but I do not understand the logic behind.
Let's take this example presented in the documentation:
${myVar # optOne, optTwo=bar}
How will this expression be evaluated? What is the effect of the assignment optTwo=bar?.
Or this example in the syntax specification:
${myVar # optOne, optTwo=myVar, optThree='string', optFour=[myVar, 'string']}
How each assignment in the list (optTwo=myVar, optThree='string', optFour=[myVar, 'string']) will affect the final value to which the expression will be evaluated to?

Answer 1

In my project we are using this # operator to pass values to the Java backend logic. I have created a sample use-case to demonstrate the usage of the # operator.
I have created a simple info component with a textfield, a numberfield and a checkbox. The corresponding cq:dialog's .content.xml is as below -
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Info"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<tab
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
class="field-whitespace"
fieldDescription="Enter full name of the user"
fieldLabel="Full Name"
name="./fullName"/>
<age
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
class="field-whitespace"
fieldDescription="Enter the age of the user"
fieldLabel="Age"
name="./age"/>
<married
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
class="field-whitespace"
fieldDescription="Check if the user is married"
name="./married"
text="Married?"
value="true"/>
</items>
</columns>
</items>
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
</tab>
</items>
</content>
</jcr:root>
The corresponding HTL file is as below -
<div data-sly-test="${wcmmode.edit || wcmmode.design}">
Info Component
</div>
<sly
data-sly-use.info="${'org.redquark.aem.learning.core.cq.text.InfoComponent' #
fullName=properties.fullName,
age=properties.age,
married=properties.married
}" />
<sly data-sly-test="${info}">
<h1>${info.details}</h1>
</sly>
Here, you can see that in the tag, we are passing values from the JCR in the variables fullName, age and married.
The java code that will read these values is as below -
package org.redquark.aem.learning.core.cq.text;
import com.adobe.cq.sightly.WCMUsePojo;
public class InfoComponent extends WCMUsePojo {
private String details;
#Override
public void activate() throws Exception {
String fullName = get("fullName", String.class);
Integer age = Integer.parseInt(get("age", String.class));
Boolean isMarried = Boolean.parseBoolean(get("married", String.class));
details = fullName + " is " + age + " years old and is " + (isMarried ? "married" : " not married");
}
/**
* #return the details
*/
public String getDetails() {
return details;
}
}
Or if you are using SlingModels instead of Java Use API then you can access those values in a typical Sling Model way.
package org.redquark.aem.learning.core.models.text;
import javax.annotation.PostConstruct;
import javax.inject.Inject;
import javax.inject.Named;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional;
#Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class InfoModel {
#Inject
#Optional
#Default(values = "Test")
private String fullName;
#Inject
#Optional
#Default(values = "0")
private String age;
#Inject
#Optional
#Named("married")
#Default(values = "false")
private String isMarried;
// Variable that will be read in the HTL file
private String details;
#PostConstruct
protected void init() {
details = fullName + " is " + Integer.parseInt(age) + " years old and is "
+ (Boolean.parseBoolean(isMarried) ? "married" : " not married");
}
/**
* #return the details
*/
public String getDetails() {
return this.details;
}
}
Of course, then you have to call your InfoModel class in the HTL code as
<sly data-sly-use.info="${'org.redquark.aem.learning.core.models.text.InfoModel' #
fullName=properties.fullName,
age=properties.age,
married=properties.married
}" />
You see, here we are reading the same values which were passed in the HTL code. We can then perform any business logic on them.
I hope this helps. Cheers!