Expand my Community achievements bar.

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
Community Advisor

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
Community Advisor

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,