Need single line text to have multiple lines coral UI

[jacobs1633233]

Hi, 

I have a single line text field in my metadata schema editor and I need to know if I can create a new form component that has multiple lines like a text area rather than a single line where you can enter a really long string without a line break. Is that possible to create in /libs/granite/ui/components/coral/foundation/form/textfield ?

[vanegi]

Hi @jacobs1633233,

Please refer this thread that has similar discussion:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-ideas/add-textarea-type-of...

This feature has been delivered in the April release for Cloud Service and is available in 2021.4.0 version.

Thanks!!

[lukasz-m · Accepted solution]

Hi @jacobs1633233,

If you are using AEM as a Cloud, please upgrade to version 2021.4.0 or newer as @vanegi suggested. Unfortunately the change included in AEM as a Cloud is not incorporated in AEM 6.5/6.4. You can still create custom component. Please find all details below.

1. Overlay /libs/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield, under apps you should get this /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield, rename textfield to textarea. In the end this should looks like this:
   
2. Copy textfield.jsp from /libs/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield to /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textarea, and rename it to textarea.jsp, this is the expected structure.
   
3. Edit textarea.jsp and paste below code
   

   <%--
   
     ADOBE CONFIDENTIAL
     __________________
   
      Copyright 2012 Adobe Systems Incorporated
      All Rights Reserved.
   
     NOTICE:  All information contained herein is, and remains
     the property of Adobe Systems Incorporated and its suppliers,
     if any.  The intellectual and technical concepts contained
     herein are proprietary to Adobe Systems Incorporated and its
     suppliers and are protected by trade secret or copyright law.
     Dissemination of this information or reproduction of this material
     is strictly forbidden unless prior written permission is obtained
     from Adobe Systems Incorporated.
   
   --%><%
   %><%@include file="/libs/granite/ui/global.jsp" %><%
   %><%@ page session="false" contentType="text/html" pageEncoding="utf-8"
            import="org.apache.sling.api.resource.ValueMap" %><%
   
   	ValueMap fieldProperties = resource.adaptTo(ValueMap.class);
   	String key = resource.getName();
   	String resourcePathBase = "dam/gui/coral/components/admin/schemaforms/formbuilder/formfieldproperties/";
   
   %>
   
   <div class="formbuilder-content-form" role="gridcell">
       <label class="fieldtype">
       <coral-icon alt="" icon="text" size="XS"></coral-icon><%= xssAPI.encodeForHTML(i18n.get("Text Area")) %>
       </label>
       <sling:include resource="<%= resource %>" resourceType="granite/ui/components/coral/foundation/form/textarea"/>
   </div>
   <div class="formbuilder-content-properties">
   
       <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key) %>">
       <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/jcr:primaryType") %>" value="nt:unstructured">
       <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/resourceType") %>" value="granite/ui/components/coral/foundation/form/textarea">
       <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/sling:resourceType") %>" value="dam/gui/components/admin/schemafield">
       <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/granite:data/metaType") %>" value="text">
   
       <% 
           String[] settingsList = {"labelfields", "metadatamappertextfield", "placeholderfields", "titlefields"};
           for(String settingComponent : settingsList){
               %>
               <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + settingComponent %>"/>
               <%
           }
       %>
   
       <coral-icon class="delete-field" icon="delete" size="L" tabindex="0" role="button" alt="<%= xssAPI.encodeForHTMLAttr(i18n.get("Delete")) %>" data-target-id="<%= xssAPI.encodeForHTMLAttr(key) %>" data-target="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "@Delete") %>"></coral-icon>
   
   </div>
   <div class="formbuilder-content-properties-rules">
       <label for="field">
       	<span class="rules-label"><%= i18n.get("Field") %></span>
           <%
               String[] fieldRulesList = {"disableineditmodefields", "showemptyfieldinreadonly"};
               for(String ruleComponent : fieldRulesList){
                   %>
                       <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + ruleComponent %>"/>
                   <%
               }
   
           %>
       </label>  
       <label for="requirement">
       	<span class="rules-label"><%= i18n.get("Requirement") %></span>
           <% String requiredField = "v2/requiredfields"; %>
           <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + requiredField %>"/>
       </label> 
       <label for="visibililty">    
           <span class="rules-label"><%= i18n.get("Visibility") %></span>
           <% String visibilityField = "visibilityfields"; %>
           <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + visibilityField %>"/>
       </label>     
   </div>

   In general above code is a copy of textfield.jsp, where granite/ui/components/coral/foundation/form/textfield has been changed to granite/ui/components/coral/foundation/form/textarea
4. Overlay /libs/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp, under apps you should see below structure /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp
   
5. Edit /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp and add below code.
   

   <li class="field" data-fieldtype="text" tabindex="-1" role="menuitem">
     <div class="formbuilder-template-title"><coral-icon icon="text" alt="" size="M"></coral-icon><span><%= i18n.get("Text Area") %></span></div>
     <script class="field-properties" type="text/x-handlebars-template">
       <sling:include resource="<%= fieldTemplateResource %>"
         resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textarea" />
     </script>
   </li>

   You can place above code snippet between list elements representing Single Line Text and Multi Value Text
6. Final result looks like that:
   

[jacobs1633233]

Hi @lukasz-m , 

I do not have coral under my apps/dam/gui 

Do you know if there was a location change with any updates for /coral folder in apps?