How to create proxy component in AEM

Core components are OOTB components that are shipped with AEM and it is highly recommended to use them either as it is or by overlaying or extending them to speed up the overall component development process. To use core components, we need to create proxy components in AEM. In this tutorial, I will show you how to create proxy components in AEM and override core components by following all the best practices that adobe recommends for extending core components in AEM.

In this tutorial, I am going to extend the core text component also known as a rich text editor (RTE) as it is the most widely and frequently used component that nearly caters to all type of requirements associated with text editing and provide WYSIWYG (what you see is what you get) text-editing experience.

What are proxy components?
Proxy Components are site-specific components which are inherited from core components, which define the desired component name and group to display for page authoring.

Proxy Components refer to a Core Component as their super-type.
Proxy Components follow the path: /apps/my-site/components (Where core components path: core/wcm/components)These site-specific components are called proxy components, for the reason they don't need to contain anything; they just serve mostly to define the version of a component to use for the site. In fact, when customizing the Core Components, these proxy components play an essential role in markup and logic customization.

 

Advantages of creating Proxy Components:
Proxy components help the categorization of components in a reusable way.
Better segregation: It is a good practice to have 'sling:resourceType' property pointing to site-specific components, instead of pointing to components that are shared by multiple sites.
This provides more flexibility and avoids content refactoring if one site needs a different behavior for a component.
Customization can then be achieved on the site-specific component and won't affect the other sites.
Proxy components can be entirely empty if they fully inherit the functionality, or they can redefine some aspects of the component.

After completing this tutorial, you will have a clear understanding of:

• What are proxy components in AEM?
• How to create proxy components in AEM.
• Modify proxy component Policy.
• Test Proxy Component.

What are proxy components in AEM:
The best part of using core components is that they are version-able means when a new version of AEM comes it will not affect your current functionality. And if you want to use the latest features available in the new version you have to just change the reference from old to new version of core components in your custom component. We will see all of this in detail in this tutorial.

The first question that comes in mind is what are proxy components or proxy patterns? Why I should use them? can’t I directly use components like I used to use foundation components earlier?

The answer to all of these questions is as core components are hidden by default, you cannot use them directly. Core components are designed in such a way that it should be accessed using proxy components only. The advantage of adding one more layer of proxy components is that your core components will be as it is and you can refer to any version of the core component just by changing sling:resourceSuperType to the new version. It is neat, easy to read, and very clean.

Below screenshot will provide you a better understanding about how the component implementation process is broken down in AEM: -

 
The architecture of core components:
Core components provide very flexible architecture so that it can be easily extended and further customized based on customer-specific requirements.

• The design dialog defines what content authors can or cannot do in the edit dialog or if anything needs to be available at the template level.
• The edit dialog shows authors only the options they are allowed to use and will be available only at the page level.
• The Sling model verifies and prepares the content for the view (template).
• The result of the Sling model can be serialized to JSON for SPA use-cases.
• The HTL renders the HTML server-side for traditional server-side rendering.
• The HTML output is semantic, accessible, search-engine-optimized, and easy to style.

Now let’s see how to create proxy components.

Create proxy components in AEM:
For this tutorial, I am going to use we retail website. You can create a proxy component under your project (/apps/<your project>/components).

• Navigate to /apps/weretail/components/content/.

 

• Create a new node of type cq: Component. (This component is known as a proxy component). Click on Save All.
• Add the following properties to this node.

1. sling:resourceSuperType –> String –> core/wcm/components/text/v1/text
2. componentGroup –> String –> We.Retail (You can add your project-specific group)
3. jcr:title –> String –> Rich Text Editor (Your component title name)
4. jcr: description –> String –> My Proxy Rich Text Editor Component (Your component Description)

 

• You can use this component now on both the editable template and a static template. For using it on we retail editable template. Follow the below steps.
• Edit the template in http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/hero-page/structure.html

 
Edit the policy for the Layout Container
 

 

That’s it, you have successfully created a proxy component. But it's not all. I want to add just 1 more point. What new has been added to the Rich Text component (RTE) as a part of core components? Earlier it was the responsibility of the developer to provide what features a rte should have. But if you are using core components RTE then an author can decide what all features he wants to see and whatnot. Let’s see how an author can do all of this.

Note: The Core Components are not part of the AEM 6.3 installation, but you might find them installed since they are part of the We.Retail packages. If you use the production-ready “nosamplecontent” runmode they will not be installed. I recommend deploying them along with your project packages.

Modify proxy component Policy:
Follow the below steps to modify the proxy component policy. Using this feature an author can add or remove extra features from a component-based on his/her needs.

• Navigate to your editable template http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/hero-page/structure.html.
• Select the Layout Container of the template.

 

• Click on the component policy icon which you wish to update.
• You will be navigated to the component configuration page.
• You can create a new policy.

1. Enter Policy Title – Enable RTE extra features (Your policy title)
2. Enter Policy Description – This is an RTE component policy. (Your policy description)

 

• From the Right side column. Expand any tab like features and just select/unselect the checkbox. This will enable or disable the particular feature from your proxy component(in our case RTE).
• Click Save on top right corner and that’s it you are done.

See how easy it is now to enable or disable a particular feature for authors. If you are using core components in aem 6.3. You can achieve this using a static template also, instead of component policy just go to design dialog of RTE component and you will get the same dialog to enable/disable the feature. But you have used foundation text component either from /libs/wcm/foundation/components/text or /libs/foundation/components/text, then author will not have this flexibility to enable to disable RTE features.

Test Proxy Component:
Let’s test how our Rich Text editor(RTE) component looks.

• Go to http://localhost:4502/editor.html/content/we-retail/ca/en/men.html
• Drag and drop your RTE component into parsys.

 

 

I hope you get a fair understanding of what proxy components are, why they are used, and how to create/modify them. If you still face any issue just drop me a comment.

Click Here to download the Package