Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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,