Standard

Posted by

Posted on

January 9, 2017

Posted under

AEM / CQ5

Comments

Leave a comment

How does Sightly template work?

In one of the earlier post, I explained how to create a multifield component in sightly and using sling models. In this post, I’ll talk about how to create and use “sightly templates” in your component. Templating is a powerful feature introduced in Sightly, which helps in keeping your code clean and makes it more reusable. Identify the repetitive code blocks in your markup, create a template and reuse it wherever it is required.

Let’s see how to create a template and how to call it:

  1. A basic template can be created by below snippet. Each template requires an identifier. For Instance, in the below snippet I have created a template in a file “message.html” with the name “message1”. 
     <template data-sly-template.message1>
<h2> This is template 1</h2>
</template>

    Now that the template is created, we can call using the data-sly-call and data-sly-use it as follows and use it in our code.

    <div data-sly-use.messageRenderer="message.html">
<sly data-sly-call="${messageRenderer.message1}"/>
</div>
  2. We have seen the example to create a basic template, now we’ll see how to pass parameters to our template. 
    <template data-sly-template.message2="${@ message}">
Message is
<h2> ${message}</h2>
</template>

    To call this template in our code, we’ll have to use the below snippet.

    <sly data-sly-test="${properties.text}"
data-sly-call="${messageRenderer.message2 @ message=properties.text}"/>

    The entire HTML will look like:template1If there are multiple parameters, pass it as comma separated values.

    <sly data-sly-call="${messageRenderer.message2 @ param1=param1,param2=param2 }"/>

Find the complete code in the Github repository.

Hope it helps !! 🙂

Advertisement
Standard

Posted by

Posted on

August 5, 2016

Posted under

AEM / CQ5

Comments

2 Comments

Multifield Component in Sightly with Sling Models

Starting AEM 6.0, new templating language Sightly now known as HTL is introduced. It offers highly productive enterprise-level web framework that increases security and allows HTML developers without Java knowledge to better participate in AEM projects.

Adobe recommends any new components to be developed using Sightly. Speaking of components, one of the vital components of any AEM application is a multifield component. More often than not, you will come across a requirement where you would have to create a multifield component, be it a social link component or a custom carousel component etc.  This post will talk about creating a multifield component in Sightly using Sling Models.

Infrastructure Used:

  • AEM Instance : 6.2
  • OS: Windows 10

Follow the below Steps to create the multifield component:

  1. Firstly Create a sample AEM project using the maven archetype 10.
  2. Create a new Sightly component. You can take reference from this article. Create the structure like below for multifield componentmultifield (I would be sharing the complete code, don’t worry).
  3. The links get saved in the below format.links
  4. Write a Sling Model to parse these links. Read my earlier post about the issue with sling models in 6.2.
</pre>
<pre>@Model(adaptables = Resource.class)
public class DemoMultiFieldModel {

    Logger logger = LoggerFactory.getLogger(DemoMultiFieldModel.class);

    @Inject
    @Named("links")
    private String[] links;

    private List<Link> list;

    @PostConstruct
    protected void init() throws JSONException {
        logger.info("links" + links);
        this.list = new ArrayList<Link>();
        for (String linkString : links) {
            JSONObject jsonObject = new JSONObject(linkString);
            logger.info("json object is " + jsonObject);
            list.add(new Link(jsonObject.getString("linktext"), jsonObject.getString("linkURL")));
        }
        logger.info("linkList is" + list);
    }

    public List<Link> getList() {
        return list;
    }
}</pre>
<pre>
  1.  Now, invoke this model in your Sightly file.
Demo MultifieldPanel component
<p data-sly-test="${properties.heading}"> ${properties.heading}</p>
<p data-sly-test="${properties.desc}"> ${properties.desc}</p>

<div data-sly-use.linkModel="aem.bootstrap.core.models.DemoMultiFieldModel">
${linkModel.message}
<div data-sly-test="${linkModel.list}" data-sly-list.list="${linkModel.list}">
<b>page:</b> ${list.linktext}
<b>path:</b> ${list.linkURL}
</div>
</div>
  1. You also have to add the nested-multifield.js since nested multifield is not supported OOTB. You can find it in the code repository below.

If everything is fine, your sightly component should look like below:

sightly page

You can clone the code from here.

References :

https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html

https://sling.apache.org/documentation/bundles/models.html

https://helpx.adobe.com/experience-manager/using/domparser.html

Hope it helps !! 🙂

Standard

Posted by

Posted on

July 28, 2016

Posted under

AEM / CQ5

Comments

Leave a comment

Managing Community Users in AEM | Tunnel Service

The trend of having the interactive websites is more common these days. Users can interact through forums, by posting comments, by participating in quizzes etc. AEM Communities provides a rich framework to have such interactive websites. Users can either come from LDAP/AEM or you can allow Social logins as well. But, with this increases the need of managing such users in a highly interactive website.

Recently, we encountered a serious issue in one of our projects.

Problem/Use Case: 

Usually, the logins happen on a Publish instance which makes the users being created on the Publish instance itself. Now, in an interactive community site, users are added to Community Groups so that they can interact. Now, there are two options to add these users to the groups:

  1. Have some trusted users who can use the useradmin console and assign the users to the particular Community groups.Users who gets assigned to such community groups are called members on the publish instance.
  2. Have the same users on author instance, add them to appropriate Community groups and activate it.

Now, the first option imposes some of the security risks, so we were using the 2nd option. But lately, we realized that as the number of users increases the performance of author instance starts degrading.

Solution:

Adobe has provided a way to have these users in the publish instance and yet manage it from the author instance. You can use the tunnel service to have the publish users available in the author instance. Follow the below steps:

  1. Go to Configuration Manager on author instance and look for the AEM Communities Publish Tunnel Service  and click on enable. This service needs to be enabled on the author instance only.tunnel service
  2. Now, Go to the members console on author instance. You should be able to see all the users now. members console
  3. Clicking on create button will allow you to add a new member into the publish instance and assign it to particular Community Site and Community Groups.
  4. Similarly, Groups console will allow you to manage the Community Groups.

Troubleshooting:

  1. Make sure both the author and publish instance will have the same configuration i.e. Both should be on AEM 6.1 (SP1+FP4) or above. In FP3, tunnel service does not allow the management of members from author instance. This feature was added in FP4.
  2. Make sure the bundles are up and running in both the instances. Otherwise,you will not be able to see any users in the members console.
  3. If you are not able to see the default users, make sure you are not running on nosamplecontent runmode.

References:

https://docs.adobe.com/docs/en/aem/6-1/administer/communities/users.html

https://docs.adobe.com/docs/en/aem/6-1/administer/communities/consoles/members.html

Hope it helps !! 🙂

Standard

Posted by

Posted on

July 22, 2016

Posted under

AEM

Comments

1 Comment

Issue using Sling Models in AEM 6.2 | Dependency Not found

Sling Models is a way to create model objects which are automatically mapped from Sling objects, typically resources but also request objects.

This article explains how to use sling models in AEM. But, If you want to use Sling models with AEM 6.2, you might encounter some dependency issues.

Recently I faced a problem when my AEM project stopped working. The project was created using Maven archetype 10. It was working fine until I was on AEM 6.1. When I tried deploying it to AEM 6.2, the bundle was not coming to Active state. Later while debugging, I found out that it was not able to find a particular dependency. I was seeing something like below in the console.

javax.inject,version=[0.0,1) -- Cannot be resolved

After some debugging, I was able to resolve the issue. If you are facing the similar issue, you need to add the below dependency to your pom file.

<dependency>
<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-atinject_1.0_spec</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>

 

This is it. Sling Models code should work on AEM 6.2 now.

Hope it helps !!  🙂