Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to override core component clientlib to have enable constraintMessage for form text component

Avatar

Level 1

According to [1], Constraint Message is not displayed for text and text area. While I have the task to display it, I did research and found that the constraint message display is controlled by text.js in "/apps/core/wcm/components/form/text/v1/text/clientlibs/editor/js".

 

As it is not suggested to update text.js directly in the above folder, I copied this file to the clientlib of my proxy component, however, the copied file is ignored. So far, I have tried these methods:

1. copy text.js to proxy component's clientlib folder and update it, when I click the wrench in edit mode, only the old js was loaded

2. create js.txt to refer to the above js file in addition, I got same result

3. create ".content.xml" and make the editor folder a cq:ClientLibraryFolder, whether the category is same or different from the super component client lib, it is still ignored.

 

 

[1] https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/forms/fo...

Screen Shot 2022-03-26 at 12.51.13 pm.png

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @BlueBear3 

 

You were almost close with the 3rd option.

  1. Create a clientlib with a different catergories name in your proxy component.dev_aem_0-1648279551705.png

     

  2. Add the js files from your core component clientlib to your proxy component clientlib. Now make necessary changes that are required in this proxy component clientlib.
  3. Create a nt:unstructured node with name cq:dialog and add property extraClientLibs. The value of this property should the proxy component clientLib category. Basically now your are overriding core component clientLib with your custom clientlib.
    dev_aem_1-1648279612567.png

Now I can see the custom clientlib taking effect over core clientlib. I have enabled constraint message field for both text and textarea.

dev_aem_2-1648279803883.png

 

Thanks,

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 6

Hi @BlueBear3 

 

You were almost close with the 3rd option.

  1. Create a clientlib with a different catergories name in your proxy component.dev_aem_0-1648279551705.png

     

  2. Add the js files from your core component clientlib to your proxy component clientlib. Now make necessary changes that are required in this proxy component clientlib.
  3. Create a nt:unstructured node with name cq:dialog and add property extraClientLibs. The value of this property should the proxy component clientLib category. Basically now your are overriding core component clientLib with your custom clientlib.
    dev_aem_1-1648279612567.png

Now I can see the custom clientlib taking effect over core clientlib. I have enabled constraint message field for both text and textarea.

dev_aem_2-1648279803883.png

 

Thanks,