In AEM forms is there any way to make the 'Short description' appear under the field label instead of beneath the field? | Community
Skip to main content
C
CR17506599
Level 4
August 10, 2023

In AEM forms is there any way to make the 'Short description' appear under the field label instead of beneath the field?

  • August 10, 2023
  • 1 reply
  • 1433 views

In AEM forms, we'd like the 'Short description' field to be displayed below the field's label, instead of below the input box itself.  Is there a way to do this with the out-of-the-box fields in AEM?  I looked around for a setting in the form and theme but didn't see anything.  

 

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

1 reply

SivakumarKanoori
Community Advisor
SivakumarKanooriCommunity Advisor
Community Advisor
August 11, 2023

@cr17506599 : Yes , it is possible to show short description exact under the field label. 

 

You can overlay the below jsp file and change the order of the shortdescription to below the label 

/libs/fd/af/layouts/field/defaultFieldLayout/defaultFieldLayout.jsp

 

<sling:include path="${guideField.path}" resourceType="${guideField.resourceType}" replaceSelectors="<%= GuideConstants.FIELD_LABEL%>"/>
<sling:include path="${guideField.path}" resourceType="${guideField.resourceType}" replaceSelectors="<%= GuideConstants.FIELD_SHORT_DESCRIPTION%>"/>

 

So it will display in the same order. I have already tried this approach

 

Thanks 

Siva

 

 

 

Thanks,Siva
    C
    CR17506599Author
    Level 4
    August 11, 2023

    Thank you!  Apologies, I don't know much about overlays in AEM.  Is there a way to overwrite this template for one specific form, or would I have to make this change globally?  

      SivakumarKanoori
      Community Advisor
      SivakumarKanooriCommunity Advisor
      Community Advisor
      August 18, 2023

      Hi @cr17506599 

      overlay means to take the predefined functionality and impose your own definitions over that (to customize the standard functionality).

      In simple terms, All the predefined functionalities available under  "/libs" , which you can overlay under "/apps" and  make your custom changes underneath it. 

       

      E.g: /libs/fd/af/layouts/field/defaultFieldLayout/defaultFieldLayout.jsp

      you can go to file location and right click and there is a option called overlay Node , you click on it, it will create the same folder structure and files under /apps. If any error you can copy the files make sure you are following the same folder structure as /libs

       

      E.g:

      /apps/fd/af/layouts/field/defaultFieldLayout/defaultFieldLayout.jsp

       

      When the page loads , it will check for defaultFieldLayout.jsp under /apps first, if it is not exists then it will retrieve it from /libs.

      So , we should not touch or change any code directly under /libs, instead you can overlay and make your custom changes.

       

      Coming to solution part of your issue :

       

      You can make this change specific to your form or globally also can done.

       

      Specific means, we need to make some code change. 

      1) naviagto to /libs/fd/af/components/guidefield/guidefield.jsp

      2) overlay to under /libs/fd/af/components/guidefield/guidefield.jsp

      line 39 to 44 code:


      <c:when test="${guideField.isOldFieldLayout}">
      <cq:include script="${guideField.fieldLayout}"/>
      </c:when>
      <c:otherwise>
      <cq:include path="${guideField.path}" resourceType="${guideField.fieldLayout}"/>
      </c:otherwise>

       

      needs to be replaced with below.

       

      <c:when test="${guideField.isOldFieldLayout}">
      <cq:include script="${guideField.fieldLayout}"/>
      </c:when>
      <c:when test="${guideField.name == 'testingtestbox'}">
      <cq:include path="${guideField.path}" resourceType="fd/af/layouts/field/customdefaultFieldLayout"/>
      </c:when>
      <c:otherwise>
      <cq:include path="${guideField.path}" resourceType="${guideField.fieldLayout}"/>
      </c:otherwise>

       

      3) Navigate to /libs/fd/af/layouts/field/defaultFieldLayout/defaultFieldLayout.jsp

      4) overlay to /apps/fd/af/layouts/field/defaultFieldLayout/defaultFieldLayout.jsp

      5)rename the defaultFieldLayout.jsp to customdefaultFieldLayout.jsp (This should do under /apps)

      6) Open the customdefaultFieldLayout.jsp and make changes as below.

       

      <sling:include path="${guideField.path}" resourceType="${guideField.resourceType}" replaceSelectors="<%= GuideConstants.FIELD_LABEL%>"/>
      <sling:include path="${guideField.path}" resourceType="${guideField.resourceType}" replaceSelectors="<%= GuideConstants.FIELD_SHORT_DESCRIPTION%>"/>

       

      7) Then go to your form and give the name for the text box as "testingtestbox".

       

      after the above changes, you can see output as below.

       

       

      The second text box name is testingtestbox , that is why the short description display under the Textbox.

       

       

       

       

      I have attached the package here, you can install into your local instance and then you need to make only once change. Go to your form and change the name of the text box as testingtestbox <Because we are checking this name in the jsp code>

       

      If still have any issues, let me know , will try to connect with you.

       

      Thanks ,

      Siva

       

      Thanks,Siva
      Terms & ConditionsAccessibility statement

      Loading footer...