Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

How to extend or sub-type 'guideField' ?

Avatar

Level 3

I'want to implement a kind of sub-type of or specialized text box.

  • The specialized text box shall have an additional property like 'urlForAutocompleteLookUp'.
  • Form authors shall be able to configure the value of this property in the widget's dialog. 
  • The new property shall be exposed in the Jsp object 'guideField' so that I can use it to implement additional logic:
<%------------------------------------------------------------------------ ~ ~ ADOBE CONFIDENTIAL ~ __________________ ~ ~  Copyright 2014 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 may be covered by U.S. and Foreign Patents, ~ patents in process, 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. --------------------------------------------------------------------------%> <%-- TextBox Component --%> <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <%-- todo: In case of repeatable panels, please change this logic at view layer --%> <div class="<%= GuideConstants.GUIDE_FIELD_WIDGET%> ${guideField.multiLine ? " multiline" : ""}" style="${guide:encodeForHtmlAttr(guideField.styles,xssAPI)}"> <c:choose> <c:when test="${guideField.multiLine}"> <textarea id="${guideid}${'_widget'}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}" placeholder="${guide:encodeForHtmlAttr(guideField.placeholderText,xssAPI)}">${guide:encodeForHtml(guideField.value,xssAPI)}</textarea> </c:when> <c:otherwise> <input type="text" id="${guideid}${'_widget'}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}" value="${guide:encodeForHtmlAttr(guideField.value,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}" placeholder="${guide:encodeForHtmlAttr(guideField.placeholderText,xssAPI)}"/>                 
                <c:if test="${guideField.hasUrlForAutocompleteLookUp}">                    ... ... logic I want to add that will use the property urlForAutocompleteLookUp ...

 

                </c:if>
 
</c:otherwise> </c:choose> <%-- End of Widget Div --%> </div>

My problem is that I don't know how I can add properties to the 'guideField' object.

4 Replies

Avatar

Level 3

Hi,

You can create a new "customized texbox component" which inherits from textbox component and leverage the global object "properties" [1] exposed by AEM for your use-case. I don't think there is a need to create a bean.

Thanks,

Rishi

[1] https://docs.adobe.com/docs/en/cq/5-6-1/developing/scripts.print.html

Avatar

Level 3

Hi Rishi

thanks for your answer. I tried to test the solution you proposed but I get an error.

That's how my widgets.jsp looks like:

<%------------------------------------------------------------------------ ~ ~ ADOBE CONFIDENTIAL ~ __________________ ~ ~  Copyright 2014 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 may be covered by U.S. and Foreign Patents, ~ patents in process, 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. --------------------------------------------------------------------------%> <%-- TextBox Component --%> <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <%-- todo: In case of repeatable panels, please change this logic at view layer --%> <div class="<%= GuideConstants.GUIDE_FIELD_WIDGET%> ${guideField.multiLine ? " multiline" : ""}" style="${guide:encodeForHtmlAttr(guideField.styles,xssAPI)}"> <input type="text" id="${guideid}${'_widget'}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}" value="${guide:encodeForHtmlAttr(guideField.value,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}" placeholder="${guide:encodeForHtmlAttr(guideField.placeholderText,xssAPI)}"/> <script> <c:forEach var="property" items="${guideField.properties}"> console.log("${property.key} : " + "${property.value}"); </c:forEach> </script> </div>

And this is the jsp error that is logged in the log file:

Caused by: javax.el.PropertyNotFoundException: Property 'properties' not found on type com.adobe.aemds.guide.common.GuideTextBox
    at javax.el.BeanELResolver$BeanProperties.get(BeanELResolver.java:193)
    at javax.el.BeanELResolver$BeanProperties.access$400(BeanELResolver.java:170)
    at javax.el.BeanELResolver.property(BeanELResolver.java:279)
    at javax.el.BeanELResolver.getValue(BeanELResolver.java:60)
    at javax.el.CompositeELResolver.getValue(CompositeELResolver.java:53)
    at org.apache.el.parser.AstValue.getValue(AstValue.java:97)
    at org.apache.el.ValueExpressionImpl.getValue(ValueExpressionImpl.java:186)
    at org.apache.sling.scripting.jsp.jasper.runtime.PageContextImpl.proprietaryEvaluate(PageContextImpl.java:975)
    at org.apache.jsp.apps.stzh_002daf_002dcomponents.components.stzh_002daf_005fmail_005ftextbox.widget_jsp._jspx_meth_c_005fforEach_005f0(widget_jsp.java:266)
    at org.apache.jsp.apps.stzh_002daf_002dcomponents.components.stzh_002daf_005fmail_005ftextbox.widget_jsp._jspService(widget_jsp.java:238)
    at org.apache.sling.scripting.jsp.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:725)
    at org.apache.sling.scripting.jsp.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:502)

Is the property you mentioned only available in Sightly?

Avatar

Level 3

properties object is exposed as part of global objects, it is not a part of guideField bean. You should try the following code in the component's jsp,

<% String hasUrlForAutocompleteLookUp = properties.get("hasUrlForAutocompleteLookUp", null); %> <% if(hasUrlForAutoCompleteLookUp != null) {%> <!-- Insert your markup here --> <% } %>

Avatar

Level 3

Thanks a lot, using the global property 'properties' it works.

adding following code to widget.jsp list all properties currently available smiley

... <script> <c:forEach var="property" items="${properties}"> console.log("${property.key} : " + "${property.value}"); </c:forEach> </script> ...

Regards,

Urs