Put a limit to description field of a custom component | Community
Skip to main content
G
goyalkritika
Level 4
April 20, 2023
Solved

Put a limit to description field of a custom component

  • April 20, 2023
  • 4 replies
  • 2740 views

I have created a custom component where a description field is there of resourceType 

I need to put in a character limit on the description field. But the ootb property 'maxlength' is not valid as description resourceType is richtext. How can this be achieved?

This is the sightly file of the component.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

you need to write a javascript to implement maxlength logic.

OOTB maxlength logic does not supported for RTE:

4 replies

krishna_sai
Community Advisor
krishna_saiCommunity Advisor
Community Advisor
April 20, 2023

Hi @goyalkritika We should write our own validation.
https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation
you could refer to above blog for the same.

Hope this helps,
Krishna

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    April 20, 2023

    Please check https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation 

    Arun Patidar
      G
      goyalkritikaAuthor
      Level 4
      April 21, 2023

      @arunpatidar I did not get step 2 mentioned in this article. Is this an OOTB configuration that I need to modify? If this is the component dialog xml, then I added the maxlength property to it but it did not work for me. Can you please elaborate a bit.

        arunpatidar
        Community Advisor
        arunpatidarCommunity AdvisorAccepted solution
        Community Advisor
        April 21, 2023

        you need to write a javascript to implement maxlength logic.

        OOTB maxlength logic does not supported for RTE:

        Arun Patidar
          krishna_sai
          Community Advisor
          krishna_saiCommunity Advisor
          Community Advisor
          April 21, 2023

          @goyalkritika  you can add maxlength to your dialog.xml and did you check if the clientlibs are getting loaded.

          If not can you add them to dialog or load them in author clientlibs.

            G
            goyalkritikaAuthor
            Level 4
            April 21, 2023

            @krishna_sai I did add the maxlength property to description field. But clientlibs are not getting loaded. I added the categories and dependencies in the same manner it is mentioned in the article. Still it did not work.

              tushaar_srivastava
              tushaar_srivastava
              Level 6
              April 21, 2023

              Hi @goyalkritika ,

              You can write a custom js, for clientlib cq.authoring.dialog and create a file like richtextvalidation.js and use the below code :

               

              $(document).ready(function() { var richTextdescField = $('[name="./description"]'); // Replace 500 with your desired character limit var charLimit = 500; richTextdescField.closest('.richtext-container').data('richtext').validation = function() { var value = this.getValue(); var charCount = value ? value.replace(/<\/?[^>]+(>|$)/g, '').length : 0; // Strip HTML tags from the value if (charCount > charLimit) { return 'Description cannot exceed ' + charLimit + ' characters'; } }; });

               


              Hope this will help.

                G
                goyalkritikaAuthor
                Level 4
                April 21, 2023

                @tushaar_srivastava this did not work. Let me explain what I did - 

                1. We have a common clientlib folder instead of component specific.

                2. Added the js file in js folder and added the file name in js.txt

                3. Ideally, now once I open the dialog of my custom component, I should not be able to put in more than 350 characters. But I was able to do so.

                 

                Can you see where am I going wrong? I even added granite:class property to desciption field of the component.

                  tushaar_srivastava
                  tushaar_srivastava
                  Level 6
                  April 21, 2023

                  This can be loaded through a new clientlib which will do validation of dialog while editing component and you can provide a category name for this clientlib as "cq.authoring.dialog".

                   

                  for more understanding while loading the js file for dialog validation. Please refer to below link for the same.

                  https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat...

                   


                  Also refer these youTube video for more clarity and use above code this will work in your case :
                  https://www.youtube.com/watch?v=MaCb_2XhEUQ&list=PLEaEQSM_Y4tmJjQICTFDm2lU5mNmd_Oar&index=17 

                  https://www.youtube.com/watch?v=wYSRtJXJshk 

                    Terms & ConditionsAccessibility statement

                    Loading footer...