AEM CQ:Listeners Node Tutorial

The purpose of this tutorial is to show you how to add the "cq:listeners" node to a component so when the component is modified the page will automatically refresh. You can read more about "cq:listeners" from a previous post I made here: cq:listeners node

For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

In order to follow along with this tutorial, you will need to have complete the following tutorial:

ShareThis Component Tutorial

If you have not completed the tutorial listed above, you can download a package from GitHub that has the completed component from here: ShareThis-AEM-Component. Just follow the instructions in the "readme" file to install the package into your instance of AEM.

If you have completed the previous steps, we can get started.

1. Once your instance of AEM is up and running, navigate to crxde lite. Navigate to the "shareThis" component in your projects "components" folder.

2. Right click on the component and choose "Create Node". Enter the following information:

• Name: cq:editConfig
• Type: cq:EditConfig

3. On the node you just created, right click and choose "Create Node". Enter the following information:

• Name: cq:listeners
• Type: cq:EditListenersConfig

4. On the "cq:listeners" node that you just created, add the following property:

• Name: afteredit
• Type: String
• Value: REFRESH_PAGE

5. Now, open the web page the has the "ShareThis Component" on it. If you click on the component to open the dialog box, and click the "OK" button, you will see that the page will automatically refresh.

Summary: This tutorial showed you how to add the "cq:listeners" node to a component and how to use the "afteredit" property to refresh the page when the component is modified.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: ShareThis Component 1.1

AEM ShareThis Component Tutorial

The purpose of this tutorial is to create an AEM Component that uses the ShareThis plugin that will allow users to share your content easily. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

ShareThis is a tool that makes it easy to share your content across many social media websites. ShareThis also allows you to track when your content is shared. This is all accomplished by using their simple to use plugin. You can find more information here:

http://www.sharethis.com/

In order to follow along with this tutorial, you will need an account with ShareThis. The reason you need an account is because they will assign you a publisher id, which you will need in order to use their plugin. If you do not have an account, click on the link above and then sign up for their site. Registering is free and only takes a few seconds.

Now that you have an account with ShareThis, we can get started.

1. Once you have your local instance of AEM running, navigate to crxde lite. In your project folder, go to the "components" folder, right click and choose "Create Component". An example is posted below:

Just keep clicking "Next" until the component is created.

2. Open the JSP file that was just created for your component and replace the content with the following code:


3. Next, right click on the component you just created, and choose "Create Dialog". An example is posted below:

4. Navigate to the "tab1" node under the dialog you just created. Right click on the node and choose "Create Node". Enter the following information:

• Name: items
• Type: cq:WidgetCollection

5. On the "items" node that you just created, right click and choose "Create Node". Enter the following information:

• Name: pubID
• Type: cq:Widget

6. Your dialog node for the component should look similar to this:

7. On the "pubID" node that you created, add the following properties:

8. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 13. 

9. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

10. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

11. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

12. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

13. Now, open the web page and add the ShareThis component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "Share This Component". Then switch back to edit mode, and add the component to your page.

Now click on the component to go into the dialog and enter your developer ID. Once the page is refreshed, the component will display the ShareThis buttons.

Summary: This tutorial showed you how to create a component that uses the ShareThis plugin, how to add a custom dialog to the component for the publisher ID, and how to add this component to a page.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: GitHub AEM Component

AEM CQ:Listeners Node For A Component

There are many times when an author is modifying a component on a page, and they will have to manually refresh the page in order to see the changes that were made to it. Now, this does not take up a lot of time, but if it happens often it can add up significantly.

There is a way to have the page automatically refresh when a change is made to the component. This can be accomplished by using the "cq:listeners" node that is the following type: "cq:EditListenersConfig". This node type is used when you want the page to refresh whenever a certain action is done to the component.

Some of the properties that the node can have are:

• beforeedit
• beforecopy
• afteredit
• aftermove
• afterdelete

You can find more properties that the node can have here: cq:listeners

In order to use this node you need to create a "cq:editConfig" node under your component, and then add the "cq:EditListenersConfig" node as a child of the "cq:editConfig" node.

You can find an example here: Refresh Page When Component Is Modified

AEM Component To Send An Email Tutorial

The purpose of this tutorial is create a component for AEM that will send an email and then display a confirmation message. This is accomplished by using the ACS AEM Commons Email API. The ACS AEM Commons package adds a lot of features to the out of the box AEM implementation. For the purpose of this tutorial we will be creating the component in crxde lite. This tutorial does not go into full detail, but does provide all of the code that was used in the creation of this component for learning purposes.

This tutorial uses the following website: ACS AEM Commons

Lets get started -

1. The first thing you need to do is download and install ACS AEM Commons package into your instance of AEM. There are a few ways to do this. For this project we will be installing it as a package using the package manager in crxde lite. You can download the package from github here: ACS Commons Github

2. The second thing you need to do is have an email account that you want to use with this service. For the purpose of this tutorial, we will be using a Gmail account. If you do not already have one, you can set one up quickly here: Gmail

For the Gmail account you might have to update your settings to allow AEM to send emails with this account. Go to the following site: https://www.google.com/settings/security/lesssecureapps. Once you do this, turn on access for less secure apps. If this is turned off, there is a possibility that the emails will not send, and you will receive an email that Gmail blocked access to your account.

3. After you upload and install the package you will be able to use the ACS AEM Commons features. In order to send emails through AEM you need to configure the Day CQ Mail Service component. There are a few ways to do this. For this project we will be configuring the OSGI through crxde lite.

4. Go to your project folder under apps and create a "config" folder if you do not have one. Inside this folder is where we will put your OSGI configuration.

5. Right click on your config folder and create a node. An example is posted below:

6. Add the following properties to the node you just created:

7. You will want to replace the "youremail@gmail.com" with your Gmail email address, and "smtp.password" with your password to your Gmail account.

8. The next step is to create an email template that will be sent with your email service. Email templates are kept under "etc/notification/email". Navigate here and create a new file called "en.html". This file can be a text file or an html file. The main difference is that you can use html code in the template if you choose to make it an html file.

9. Inside the file you just created put in the following code:

The code that is like this "${example}", will be updated dynamically by the component that we will create in the next few steps. You can replace the code with normal text, however it will be the same in every email that gets sent out.

10. Now it is time to create a component that will be able to use this email service and email template. Inside your component folder create a new component. An example is posted below:

11. On the component you just created add a dialog to it so it will show up in the sidekick.

12. Open the jsp file that was created for your component and put in the following code:

13. In the jsp file you will want to update the recipient address with your email address so you can test out the email service.

14. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 19. 

15. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

16. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

17. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

18. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

19. Now, open the web page and add the email component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "Simple Email Component". Then switch back to edit mode, and add the component to your page.

If everything works correctly you should see a message on your page that the email was sent successfully.  Every time this page is visited, or refreshed, the code will be called and will send out a new email.

Now this is a very simple component that you can build upon. One example of building upon this component is that you could add in a html form where a user would put in their their name and email address, and then take that information and send that user an email.

I hope you enjoyed this tutorial. If you have any questions or comments please feel free to post them below.

Note: On the ACS AEM Commons website there is a tutorial on how to use their email API, however it did not work right out the box for me. That is why I created this tutorial on how I was able to get this feature to work.

You can download a package of the component on GitHub from here:

AEM-Email-Example.

You will have to update the OSGI settings and the email template with you email information.

AEM Component To Dispaly X3D File Tutorial

The purpose of this tutorial is to develop a component for AEM, which will allow you to display 3D models. This is accomplished by loading in an X3D file and then displaying it on your webpage. For this tutorial we will be creating the component in crxde lite. This tutorial does not go into full detail, but does provide all of the code that was used in the creation of this component for learning purposes.

This tutorial uses the following website: http://www.x3dom.org/

Lets get started -

1. Once you have your version of AEM up and running, head over to crxde and create a component. An example is posted below.

2. Add the following node to the component you just created:

On the clientlibs node add the following property - Name: categories, Value: 3dmodel

3. Add the following files to your clientlibs folder:

• css.txt
• js.txt
• x3dom.css
• x3dom.js

4. Open the css.txt file and add the following line - x3dom.css

5. Open the js.txt file and add the following line - x3dom.js

6. Open the following link and copy the content into the x3dom.css file:

x3dom.css

7. Open the following link and copy the content into the x3dom.js file:

x3dom.js

8. Add a dialog to the component that you created. Once this is created, navigate to the tab1 node and add the following node - Name: items, Value: cq:WidgetCollection

9. On the items node you just created add the following node - Name: linkURL, Value: cq:Widget

10. Your dialog should look like the following:

11. Add the following properties to the linkURL node:

12. Open your jsp file that was created with your component and add the following code to it:

13. Upload a X3D file to your assets folder. Here is a link to a sample x3d file: Deer X3D File

14. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 19. 

15. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

16. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

17. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

18. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

19. Now, open the web page and add the 3D component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "3D Model Component". Then switch back to edit mode, and add the component to your page.

Now click on the component to go into the dialog and choose a X3D file. Once the page is refreshed, the component will display that file.

I hope you enjoyed this tutorial. If you have any questions or comments please feel free to post them below.

You can download a package of the component on GitHub from here:
3D-Model-Component-AEM