OOTB component Override AEMasCS

[Learning4me]

Hi Team,

We have a requirement to create a few components that are mostly similar to out-of-the-box (OOTB) components, but with additional fields such as text fields or extra descriptions on certain fields. We will override those components, provide a sling:resourceSuperType, and create a dialog for the new fields.

My question is whether

In the HTL, do I need to include only the new fields that I have added in the dialog?
I should also update the Sling model to accommodate these new fields.?

And also how can I implement custom styles for the fields values, since most of the values are from slingSuperType ? -Should I add complete HTL from libs then it will become overlay ?

AEMasCS

Thanks,

[MukeshYadav_ · Accepted solution]

Hi @Learning4me ,

You may have a look https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/custo...

1. In the HTL, do I need to include only the new fields that I have added in the dialog?

Yes, we have to override the required html file as well and place the new fields in HTL where ever you want to display in component.

2. I should also update the Sling model to accommodate these new fields.?

Yes, if you need  OOTB field(or methods(getters)) you can simply return the same with help of delegate and write your own getters(methods) for custom fields in extended Sling Model

Please have a look on how to extends(override) sling model https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/enhancing-image-component/...

3. And also how can I implement custom styles for the fields values, since most of the values are from slingSuperType ?

We can change the html structure and css classes as per you need in the overridden html file in our component, and need to write css/js in clientlibs (ui.frontend)

Note:- Do these changes in overridden component in apps/project/component not in OOTB core component

Below references are good to go through if you are new to this concept

https://aemgeeks.com/aem-tutorials/overlay-vs-override-in-aem-as-cloud-service/

https://aemsimplifiedbynikhil.wordpress.com/2023/02/27/extending-core-components-model-and-creating-...

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/extend-aem-ootb-core-list-...

Thanks