Learn about Edit Config nodes

We have learned about dialogs and design dialogs. In this post, I want to familiarize you with another node, called editConfig.

Let us take a look at the image component.

  1. Drag and drop an image component to the page.
  2. Drag and drop an image to the component.
    The action you performed is drag and drop.

To enable this action in the component, you use a different node.
Let us take a look at the Image component using CRXDE Lite.

  1. Navigate to /libs/wcm/foundation/components/image.
  2. See a node named cq:editConfig.

It has another node named cq:dropTargets which provides this functionality. There is a similar node, cq:inplaceEditing, which allows you to update a text in the component without opening the dialog. You should be aware of editConfig nodes to use it appropriately.

In short, node cq:editConfig provides functionalities, such as drag and drop, in place editing, and so on.

Create a design dialog (for the YouTube component)

In this session, I will introduce you to design dialogs.

Use YouTubeComponent-1.0.5.zip from my GitHub account.

We have seen the dialogs associated with components. They can be Touch-Optimized dialogs or Classic dialogs.

Let us quickly take a look at the page we created. You can see three instances of the same YouTube component. We have entered three different URLs in the dialogs and each of them displays a unique video. Means, whatever you enter for a component’s dialog is specific to that instance of the component. This value is not preserved when you use the same component in the web page again.

In certain situations, you may want to use the same value across all the instances of the component. A classic example would be the company icon of your website. You don’t want it to get changed in all the instances. Wherever you use it, the icon is the same. Let us build something similar to it in our YouTube component. Assume that you want to add a copyright information, which is going to be the same in all instance of the component. You would have guessed it, you need to use design dialogs.

Let us start.

  1. Go to the aem-company folder in CRXDE Lite.
  2. Select youtube.
  3. Copy dialog and paste it at the same place.
    It gets pasted as copy of dialog.
  4. Now rename it as design_dialog.
  5. Expand and select the title node, and rename as copyright.
  6. Similarly, change the name value to copyright.
  7. To access this dialog, go to the web page.
  8. Go to the Classic mode.
  9. Select Design and select Edit.
  10. Now, enter the copyright information: Copyrighted by AEM Company
  11. Click OK.

Nothing happens as expected, because we have not written the logic to capture the data entered and display it on the page. Before we do that, let us first see, where this data is written. We have seen that for dialogs, the data is written within the dialog node itself.

  1. Go to /etc/designs/aem-company/jcr:content/homepage/content/youtube.
    Note that the data from design_dialog is written inside the /etc/designs/aem-company. That’s,it can have only one value.
  2. Open the url.js.
  3. Update the code as follows. (I have commented out the update – we had a discussion on the same code earlier. I am not going to do it again.)
use(function () {
 var CONST = {
 PROP_TITLE: "jcr:title",
 PROP_COPYRIGHT: "jcr:copyright"
 var url = {};
 url.text = granite.resource.properties[CONST.PROP_TITLE]
//Capture value from design_dialog
 url.copyright = currentStyle.get(CONST.PROP_COPYRIGHT, "");
 if (url.text ==null)
 url.text = "https://www.youtube.com/embed/dI1yi2mmNuo";
 // Adding the constants to the exposed API
 return url;
  1. Open youtube.html and update.
    <div data-sly-use.url="url.js" style="overflow: hidden;">
     <iframe width="600" height="510" src="${url.text}" frameborder="0" allowfullscreen></iframe>
  2. Refresh the page.
  3. Note that all videos have been updated with the copyright information.

That’s it. Here is the summary: Design_dialog is used to capture information that should be unique across components. It’s stored in /etc/designs/.

Add a touch-optimized dialog (for the YouTube component)

In this short session, you will learn how to add a touch-optimized dialog for the YouTube component. As I mentioned earlier, a touch-optimized GUI is designed for using in hand-held devices, such as iPad, tablets, and so on.

(I have uploaded the package in GitHub. You should use: YouTubeComponent-1.0.3.zip)

Double-click the component that we developed. The dialog you see is called the Classic dialog. It should ideally come up only if you are in the Classic mode. Right now, you are on Touch-Optimized mode; the Classic dialog comes up here, because we have not created a Touch-Optimized dialog.

Let us start working by logging into CRXDE Lite. We will follow the same strategy we used before. Copy and paste a dialog that is already created, and then customize it.

  1. Go to /libs/wcm/foundation/components/title/.
  2. Copy cq:dialog node from there.
  3. Paste the node under the YouTube component.
  4. Expand the node.
    We need only title node here. (We want users to enter only one property; that’s the url.)
  5. Delete the other node.
  6. Change the following properties to match them with what we entered for Classic dialog:
    FieldDescription: Enter YouTube URL
    FieldLabel: YouTube URL
  7. Now refresh the page.
  8. Select the component and select Edit.
    Note that the dialog has changed.
  9. Now, go to the Classic view and see the dialog.
    You see the classic dialog.

To summarize, cq:dialog is used for Touch-Optimized dialogs. You add various fields to it depending on the requirement. Fields are inherited from granite/ui/components/foundation/form/textfield.

That’s about this session. See you soon.

Get data from a dialog using Sightly (Get a custom URL for the YouTube component)

In this session, you will see how to update the YouTube component to capture the URL entered by an author in the dialog. (I have uploaded the sample code in GitHub.)

We have accomplished the following so far.

  1. Created a YouTube component that will add a specific YouTube video to the page.
  2. Created a dialog where the author can enter a different URL.

The requirement was to update the video using the URL entered by the author.

Let us start. We will create a JavaScript file named url.js to write our logic.

  1. Create a js file url.js.
  2. Copy and paste the following code:
use(function () {
var CONST = {
PROP_TITLE: "jcr:title",}
var url = {};
// The url entered in the dialog
url.text = granite.resource.properties[CONST.PROP_TITLE]
if (url.text ==null)
 url.text = "https://www.youtube.com/embed/dI1yi2mmNuo";
// Adding the constants to the exposed API
return url;

Let us go through the code line-by-line. It creates a JavaScript function. It creates a constant PROP_TITLE and assigns jcr:title to it. It is a very important property. Let us take a look at the JCR properties after you add a value to the component’s dialog.

Go to content > aem-company > jcr: content > content > youtube_1.

Note that jcr:title property captures the URL entered in the dialog. We have entered the name of the dialog as ./title and that’s the reason its value is captured as jcr:title. The code creates a variable url. Added a text property to the URL and it captures granite.resource.properties[CONST.PROP_TITLE], basically the URL entered by the authors. Then the code checks if the url.text property is null. It’s null when there is no value entered in the dialog. In that case, we are assigning a default value. We are returning url as a constant.

Now let us change the code that we wrote in the YouTube.html to use the script.  Copy and paste the following code to YouTube.html.

<div data-sly-use.url="url.js" style="overflow: hidden;">
     <iframe width="600" height="510" src="${url.text}" frameborder="0" allowfullscreen></iframe>

The data-sly-use attribute assigns the return value of url.js to the url variable. We extract the url from the url property using ${url.text}. See how simple it is.

Now let me give you another URL to test: https://www.youtube.com/embed/kl3Hz-4x4L0 (This is another YouTube video that I shared some time back. It has a title, AEM Authors, Templates, Components.)

  1. Drag and drop the YouTube component to the web page.
  2. Select it and select Edit.
  3. Enter the URL that I gave above.
  4. Select OK.

Note that the video is updated.

There are lots of pitfalls in the component. At the first place, it does not check if the entered string is a URL or not. Also, no need to display a video at the first instance, and so on. The intention was to show you how to capture a user input from the dialog; and we have succeeded.
See you in the next session.

Create Adobe Experience Manager dialogs (Add a dialog to the YouTube component)

In this short session, we will see how to create AEM dialogs. This is primarily an overview session about AEM dialogs.
I have shared the package in GitHub.

AEM dialogs are used to enter information to a component. For example, if you open a page that I showed here and double-click the Title element, a dialog appear. You can enter certain information, such as Title, Link, and so on. Just to demo, let me change the title to my name, Sunil, and see. You could see that the title of the page is changed.

Dialog you just saw is a touch-optimized dialog – it means this dialog is optimized to view in various devices, such as phones and tablets. AEM used to have a different dialog. Let us see it. Go to the Classic view. Double-click the title page. I hope you noticed the difference. This dialog is used in Desktops. Most of your users may want to use touch-optimized dialogs that enable them to work on hand-held devices. And of course, that’s the future.

I will first introduce you to the latter – the dialog that’s not touch-optimized – the Classic dialog. We will see how to create a dialog for the YouTube component. We have seen the component adds a YouTube video to the page. Author wants to change the URL of the YouTube video. So, the requirement is to provide them with a dialog that allows them to enter a URL.

Delete the dialog that you created earlier. Let us copy a dialog from an existing component. Then, we will refine it based on our requirement. This is always a good strategy, because we are starting with something tried and tested. We can use the dialog of a component named, title.

  1. Delete the dialog you already created.
  2. Copy the dialog from /libs/wcm/foundation/components/title/dialog.
  3. Paste dialog underneath youtube.
  4. Remove /youtube/dialog/items/title/type.
  5. Select title and update it.
    Field Label: YouTube URL
    Field Description: Enter YouTube URL.
    (This is an instruction for authors.)
  6. Don’t change the name.
    xtype defines what exactly the field is. It’s a text field.

Now let us see how the dialog appears in the web page.

  1. Open the web page.
  2. Double-click.
  3. See that the dialog appears.

Let us wind up the session here. Remember, we need to add the logic to capture URL entered here to update the web page. We will see how to accomplish that in the next session.

See you all soon!!

Create your first Sightly component (YouTube component !!!)

In this session, you will learn how to create an AEM component. You have learned that an AEM component is used to display an information in a certain way. You will use Sightly to create the component.

We will call the component as YouTube component. When you drag and drop the component to a web page, it will display a YouTube video – specifically, a YouTube video I uploaded as a part of this learning series.

So, let us start:

  1. Login to CRXDELite.
  2. Navigate to the directory stucure we have created earlier.
  3. Go inside the Component folder.
  4. Right-click and select Create Component.
  5. Enter the following:
    Label: youtube
    Title: DisplayYouTube
    Description: This component is used to display the YouTube video
    Group: AEM Company
  6. Click Next and Next.
  7. Enter Allowed Parent as */parsys
  8. Click Next and Click OK.
  9. Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
  10. Add the following code:
    <div style="overflow: hidden;">
            <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe>

    (I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)

  11. Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
  12. Right click YouTube, select Create > Create Dialog.
  13. Enter title as YouTube and select OK.

The component is created now. Let us enable it.

  1. Open the web page you created.
  2. Go to the Design View.
  3. Enable the Component Group; that is, AEM Company.
  4. Go to the Edit view.
  5. From the component group, drag and drop the component to your page.
  6. See the way YouTube video appears.

That’s it. We will see how to customize component shortly.

As usual, I have uploaded the code to my GitHib. Please feel free to use it.


Summary: Your first Sightly template

This post provides a summary of what you learnt in the previous posts.

Before going to the next step, creating components, let us first take a quick recap of all that we learned so far.

AEM users generally belong to one of the following roles:

  • Authors: create web pages. They use templates which provides the layout of the pages; they use components to add information to be displayed on the pages.
  • Developers: create templates and components based on the various requirements of the organization.

We then learned the following web consoles:

  • SiteAdmin: http://localhost:4502/siteadmin : Used by authors to create web pages.
  • CRXDELite: http://localhost:4502/crx/de : Used by developers to explore CRX repository (Oak repository).  Used to create template and components.
  • Package Manager: http://localhost:4502/crx/packmgr/ : Used by developers to share the codes they develop.

Following are the default folders we should be aware of:

  • content  : All pages authors create go here.
  • app : Developers create their company pages here.
  • etc/design : Developers store the design pages.

Inside the app folder, developers can create their company folder. Inside the company folder, the folder for components and templates are placed.

Create template inside the templates folder. A template has the resourceType property which points to a component inside the components folder.  This component is called a page component, because it’s used to create the layout of the page. It has a resourceSuperType property which points to a page component inside libs/foundation/components/page. You inherit this page component, while overriding only the body.html. This is an important concept. I suggest you revisit my blog post on it.

We create the body.html in HTML format, because we want to use Sightly, which is much simpler than JSP. We pasted the HTML content; We added the data-sly-resource tag to include parsys component to a web page. The Parsys component helps to drag and drop components while authoring the web page. We placed the css and inside the etc/design folder. We added the design using the page property.

Authors need to go to the Design mode and add the required components to drag and drop to the web pages.

We are ready to go to the next phase – Creating components. If you have not yet downloaded and installed the packages, please do so. See you soon.

Apply a design to the AEM Sightly template

In this session, you will learn about adding a design to the template. You will use Sightly, because it’s HTML5 and very easy to use.

This is in continuation of my previous blog posts. As usual, I have provided the video and transcripts below. Video can be watched in the Full screen mode. The sample design and package are in my GitHub repository. Let me know what you think.

Let us take a sample design. Assume that following is what your designer came up with.


Now, we need to update the AEM template, so that authors will be able to create pages that look similar to this. You can see some sample texts in the design. The sample text is what authors add in their pages.

For creating any design, you should have a CSS file. Let us see the CSS file first. It’s there in the assets/css location.

First step is to get this CSS in CRX repository (Oak repository). In this case, we have only one file to upload. We can upload it using the CRXDELite itself. In real-time, you may have lots of files to upload to CRX repository. There are many ways to do it. We will see them later.

  1. Go to http://localhost:4502/miscadmin.
    This is a new web console for you. You generally use it for creating pages for designs.
  2. Now go to Designs.
  3. Create a page AEM Company.
  4. Go to CRXDE Lite.
    The page you created is available under the designs folder.
  5. Go to designs > aem-company.
  6. Create an empty file static.css.
    Note that the css name should be static.css.
  7. Expand the file node that you created.
  8. Double-click jcr:data property.
  9. Browse to the CSS location and select it.
  10. Click OK.
    Note that static.css is updated with the css that your designer prepared.
  11. Go to the template we created earlier.
  12. Open body.html.
  13. Update it with the html pages with the html page that your designer provided.
  14. Remove the CSS link. (Assigning the CSS to a page is done at a later stage.)

This is the beauty of Sightly. In earlier versions of AEM, you had to convert the design into JSP, which could be time consuming. Adobe also provides a Brackets extension – a tool for designers. This tool allows designers to work directly with AEM templates. We will explore it later.

  1. Now open the Site Admin.
  2. Under AEM Company, create a new page with name home.
  3. Open the page, the page appears with the sample texts.
    Ideally, that should be removed from the sample page. It’s for authors to fill.
    We have seen how to do it earlier. You need to provide the parsys component for author to add component.
  4. Let us do it in the template.
  5. Remove the sample texts by adding the parsys component.
    <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>
  6. Remove the sample text for the side content using iparsys.
    <div data-sly-resource="${'side-content' @ resourceType='wcm/foundation/components/iparsys'}"></div>
  7. Note that I changed the name to side-content. This is a mistake that I made in the video.
    The iparsys will not appear propery if you don’t change the name.
  8. Now open the page.

Enable components in the Components tab

In the last session, we have added a space in the template that allows us to drag and drop a component to the web page. One of the shortcomings in the template was that it didn’t
have any components in the Components tab. In this session, we will add components to the Components tab.

  1. Open the web page we created.
  2. Click the Page Information icon and select Classic UI.
    The same page appears with a different look and feel.
    It’s called Classic UI. Classic UI is specifically designed for viewing in Desktops.
    (The UI you were using is designed for Touch Optimized devices.)
  3. From the sidekick, click the Design tab.
  4. Click Edit from the Design of Content.
    You can see various categories of components.
  5. Select a category or go inside the category and select specific components.
  6. Open the page again and go to the Components tab.
    You will see all the components listed.
  7. Drag and drop the component to the web page and start editing.

Happy editing.

In the next session, we will update the template with a design.

Add the Parsys component to template

In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components.

Let us once again see how a page created using this template looks like.

  1. Log into to SiteAdmin. (http://localhost:4502/siteadmin)
  2. Double-click AEM Company page that you created. (If you have not created it, download the package that I provided in the previous session. And, then install it.)

The page appears with the text we entered in the template. There are three issues associated with this page:

  •  There is no place where you can drag and drop a component. (If you are not really able to make out that, I suggest you to visit my previous post. You could also open one of the pages from the sample websites to compare.)
  • The Component tab doesn’t display any components.
  • The template is not associated with any design. (Our page is really blank. It doesn’t have anything like header, footer, and so on.)

Let us solve these issues one-by-one. First, we will provide a place in the web page to add components.

  1. Go to CRXDE Lite. (http://localhost:4504/crx/de)
  2. Open the template’s rendering script. (/apps/aem-company/components/homepage/body.html)
  3. Add the following code:
    <div data-sly-resource=”${‘content’ @ resourceType=’wcm/foundation/components/parsys’}”></div>

This is a Sightly code. data-sly-resource is a tag to specify the component that you need to add to the page. It has a resourceType parameter that points to a parsys component. You would had noticed it points to a location where we saw a page component, which we inherited while creating a template. Note that this is the standard procedure to provide a location to add components in a template.

Now refresh the web page. Notice that now it provides you with a space where you can add components.


I have provided a new package in GitHub. (TemplateWithParsys.zip) Download and use it if you want to.

Summary: Use the parsys component to add space for addition or deletion of components in a web page. You don’t need to create a parsys component. Always reuse the component that exists.