Create Proxy Component in AEM

Core components are ooob 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 over all 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 component 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 core text component also known as rich text editor (RTE) as it is most widely and frequently used component that nearly caters all type of requirement associated with text editing and provide WYSIWYG (what you see is what you get) text-editing experience.

After completing this tutorial you will have clear understanding about:-

What are proxy components in aem:-


The best part of using core components is that, they are version-able means when new version of aem comes it will not affect your current functionality. And if you want to use latest features available in new version you have to just change 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 question is as by 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 core component just by changingĀ sling:resourceSuperType to new version. It is neat , easy to read and very clean.

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

core-component-binding-structure

Architecture of core components:-

Core components provides very flexible architecture so that it can be easily extended and further customized based on customerĀ  specific requirements.

core-component-architecture

  • The design dialog defines what content authors can or cannot do in the edit dialog or if anything needs to be available at template level.
  • The edit dialog shows authors only the options they are allowed to use and will be available only at 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 proxy component). Click on Save All.
    create-cq-component-node
  • Add following properties to this node.
    • sling:resourceSuperTypeĀ  –> String –>Ā core/wcm/components/text/v1/text
    • Ā componentGroup –> String –> We.Retail (You can add your project specific group)
    • jcr:title –> String –>Ā Ā Rich Text Editor (Your component title name)
    • jcr:description –> String –>Ā My Proxy Rich Text Editor Component (Your component Description)add-properties-proxy-component
  • You can use this component now on both editable template and static template. For using it on we retail editable template. Follow 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
    edit-policy-editable-template-aem
  • Add your component to the list of allowed components. Click save on top right corner after making your changes.
    add-allowed-component
  • Go to http://localhost:4502/editor.html/content/we-retail/ca/en/men.html and try adding your component into the parsys.

That’s it, you have successfully created a proxy component. But its not all. I want to add just 1 more point. What new has been added to Rich Text component (RTE) as a part of core components . Earlier it was the responsibility of developer to provide what features an rte should have. But if you are using core components RTE then an author can decide what all features he want to see and what not. 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 your project packages.

Modify proxy component Policy:-


Follow below steps to modify 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 Layout Container of the template.
  • Click on component policy icon which you wish to update.
    update-component-policy-aem
  • Ā You will be navigated to component configuration page.
  • You can create a new policy.
    • Enter Policy Title –Ā Enable RTE extra features (Your policy title)
    • Enter Policy Description –Ā This is RTE component policy.(Your policy description)
  • From Right side column. Expand any tab like features and just select/unselect the checkbox. This will enable or disable particular feature from your proxy component(in our case RTE).
    enable-disable-component-policy-aem
  • 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 static template also, instead of component policy just go to design dialog of rte component and you will get 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.

test-rte-proxy-component-aem

test-rte-proxy-component

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

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.