How to create custom component in AEM

Posted in AEM Tutorials By Prince Shivhare On August 15, 2017

 

In the article, I am going to explain to you, how to create a custom component in AEM, I am going to use CRXDE light to create a component, which is a development tool for AEM. If you are a more experienced person and having a good knowledge of XML structure then you can create a new component by copy and paste existing component, the problem here is, if some thing goes wrong you need to spend lot of time on debugging which I don’t like so, instead of that I prefer to use CRXDE lite

What is Component?

A component is a reusable unit and it can be used to solve specific use case, when it comes to WCM, the component helps us to present content about particular functionality and it can be reused across the application.

The AEM also provides OOTB components which we can use to build a page but it does not meet all client requirements so, we need to build our own custom components 

Type of Components

  1. Custom component
  2. OOTB Component

Custom Component

We can create custom components under /apps folder of CRXDE. but, the recommended approach is every project must have its own folder structure something like “/apps/keysandstrokes/components” for better maintainability here, the “keysandstorkes” is your project folder so, I recommend you always create your components under your project folder

Steps to create a AEM custom component

  1. Login to AEM and open localhost:4502/crx/de/index.jsp.
  2. Under /apps/keysandstrokes/components folder create a new component by using context menu option using right click or by using navigation bar.

untitled

The new component dialog will appear, what you need to do is just provide a component label and title, the description and super type are optional fields, if you want to inherit from another component then you can use superType option otherwise you can just leave it blank , the component group helps you to logically organize you components, every project will have more than one group ex : general, forms, global etc…

aem-component

 

Once you click on next button, you will see advanced screen something like below, you don’t need to fill all these things to create a basic component, you can just click on ok button to create component

You can refer properties of component table to get idea on these advanced properties

comp-advanced

*Component label and title should not be same.

Creating Touch UI dialog

Once the component is created the next step is you must create dialog, for this what you can do is just right click and open the context menu and then click on “Create Node” option

widget

You should see something like below, enter label as “cq:dialog” because we are creating touch dialog here, so we must enter label option as “cq:dialog”

cq-dialog

Once the dialog node is created then remove the nodes which are under cq:dialog node, because those are all related to classic dialog

Now, create node structure something like below, the primary type for all nodes are “nt:unstructured”, you need to create a dialog structure something like below after creating node you must have a  sling:resourceType property which is mentioned in the fig

If you are looking more for TouchUi controls then I suggest you refer below-mentioned article’s

touch-ui

If you want to create tab based dialog then you need to create a dialog structure something like below

dialog-tabs

Once you completed all above steps then your component structure should look like this, you need to rename democomponent.jsp to democomponent.html and add ${properties.text} to display authored value

aem-component-1

Include the Component in page

To include the component into the page, we should have parsys (paragraph system component) included in our page so that we can drag and drop the component.

in JSP: <cq:include path=”par” resourceType=”foundation/components/parsys” />

in HTL: wcm/foundation/components/parsys’}” />

parsys

  1. Go to design mode of the page.
  2. click on the parsys 
  3. pop-up opens with number of component group.
  4. select the Component group you mentioned while creating a component.
  5. then click on ok. from left bar, we can select a component.

* you should have a component dialog to show the component in component group.

Once the component is visible in component Group then you can drag and drop it to parsys component. and you can start authoring of content.

Some additional useful informaiton 

Properties of Component

DescriptionProperty & Type
Node type of the ComponentType : cq:Component
Path of the component that is allowed to be a parentallowedParents , Type : String[]
Path of the component that is allowed to be childallowedChildren, Type : String[]
Title of the Componentjcr:title, Type : String
Description of the Componentjcr:description, Type: String
To inherit the other Componentsling:resourceSuperType, Type: String
 Group under component is when inserting in page componentGroup, Type: String
if this component is a container component.cq:isContainer, Type : Boolean
Path to a dialog in case that the component does not have a dialog node.dialogPath, Type : String
Date of creation of the component.jcr:created, Type : Date
Description of the component. jcr:description, Type :  String
Title of the component. jcr:title, Type : String

Child Nodes of Component

DescriptionNode name & Type
 Definition of the design dialog. design_dialog, Type: cq:dialog
 When the component is a container cq:childEditConfig, Type:  cq:EditConfig
 Edit configuration of the component. cq:editConfig, Type:  cq:EditConfig
 If found, this node will be used as a content template when the component is added from Sidekick. cq:template, Type: nt:unstructured
 Definition of the edit dialog.  dialog, Type: nt:unstructured
 Touch Ui Dialog of the Component cq:dialog, Type: nt:unstructured
 Icon of the component, appears next to the Title in Sidekick. icon.png, Type: nt:file
 Optional thumbnail that is shown while the component is dragged into place from Sidekick. thumbnail.png, Type: nt:file

OOTB Component

OOTB Component is available when you start a AEM. we can directly use them and also customize it as per requirement. OOTB component is available under the /libs folder of the CRXDE. We can refer /libs/foundation/components for JSP based Components and /libs/wcm/foundation/components for Sightly based Components.

We can inherit the OOTB Component from our custom Component using the sling:resourceSuperType.

sling:resourceSuperType