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

[CR17506599]

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.  

[SivakumarKanoori]

@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

[CR17506599]

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]

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

[SivakumarKanoori]

You can unzip the attached file and install the package.

[CR17506599]

Thank you so much for the detailed response and providing a package!  We'll give this a try.  Thank you again!