Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Using OOB form component (not AEM Forms) and customizing workflows/styles

Avatar

Level 5

See attached screenshot. I can have the listed actions for a form. Couple of questions for this

a. Where are these actions coming from? I believe these are workflows. Can I create my own action here and make it appear in dropdown. Is there a documentation on how to do this?

b. We want to customize the styles for error messages for form components. What needs to be done?

1 Accepted Solution

Avatar

Correct answer by
Level 10

For 5.6 Form components - we have this documentation:

https://docs.adobe.com/docs/en/cq/5-6-1/developing/developing-forms.html

To develop your onw form action - see: 

https://docs.adobe.com/docs/en/cq/5-6-1/developing/developing-forms.html#Developing your own Form Actions

More info on this

The docs state:

In the folder create either:

  1. A post script.
    The name of the script is post.POST.<extension>; e.g. post.POST.jsp
    The post script is invoked when a form is submitted to process the form, it contains the code that handles the data arriving from the form POST.
  2. Add a forward script which is invoked when the form is submitted.
    The name of the script is forward.<extension>; e.g. forward.jsp
    This script can define a path. The current request is then forwarded to the specified path.

 

Make sure you have either forward.jsp and post.POST.jsp. I only have post.POST.jsp. 

I removed forward.jsp and post.POST.jsp is called

Here is my post.POST.jsp:

 

<%@include file="/libs/foundation/global.jsp"%>

<%@page import="com.day.cq.wcm.foundation.forms.FormsHelper,

             org.apache.sling.api.resource.ResourceUtil,

             org.apache.sling.api.resource.ValueMap" %>

<%@taglib prefix="sling"

                uri="http://sling.apache.org/taglibs/sling/1.0" %>

<%@taglib prefix="cq"

                uri="http://www.day.com/taglibs/cq/1.0"

%>

<cq:defineObjects/>

<sling:defineObjects/>

<%

 

    String First = request.getParameter("First");

    String Last = request.getParameter("Last");

    String City = "Ottawa";

    String Address = "Carp";

 

    com.adobe.cq.HandleForm hf = sling.getService(com.adobe.cq.HandleForm.class);

    hf.injestFormData(First,Last,City, Address);

 

 

%>

 

 

In this example –my form has 2 fields:

  • First
  • Last. 

The post.POST.jsp is sending data to an  OSGi. The same one used in adaptive form article:

http://scottsdigitalcommunity.blogspot.ca/2014/05/posting-aem-6-form-data-to-sling.html

The OSGi logs the values,

23.02.2016 15:04:41.793 *INFO* [0:0:0:0:0:0:0:1 [1456257881509] POST /content/geometrixx/en/products/triangle.html HTTP/1.1] com.adobe.cq.HandleFormImpl **** Hi Lee -- look at the data posted from an AEM adaptive form - First: Tom Last: Macdonald City: Ottawa Address Carp

View solution in original post

4 Replies

Avatar

Level 5

chetanvajre2014 wrote...

See attached screenshot. I can have the listed actions for a form. Couple of questions for this

a. Where are these actions coming from? I believe these are workflows. Can I create my own action here and make it appear in dropdown. Is there a documentation on how to do this?

b. We want to customize the styles for error messages for form components. What needs to be done?

 

 

 

This is what I found but it's relevant to 6.0

https://helpx.adobe.com/aem-forms/6/custom-submit-action-form.html

Most of the nodes don't exist for 5.6.1 that we have

Avatar

Correct answer by
Level 10

For 5.6 Form components - we have this documentation:

https://docs.adobe.com/docs/en/cq/5-6-1/developing/developing-forms.html

To develop your onw form action - see: 

https://docs.adobe.com/docs/en/cq/5-6-1/developing/developing-forms.html#Developing your own Form Actions

More info on this

The docs state:

In the folder create either:

  1. A post script.
    The name of the script is post.POST.<extension>; e.g. post.POST.jsp
    The post script is invoked when a form is submitted to process the form, it contains the code that handles the data arriving from the form POST.
  2. Add a forward script which is invoked when the form is submitted.
    The name of the script is forward.<extension>; e.g. forward.jsp
    This script can define a path. The current request is then forwarded to the specified path.

 

Make sure you have either forward.jsp and post.POST.jsp. I only have post.POST.jsp. 

I removed forward.jsp and post.POST.jsp is called

Here is my post.POST.jsp:

 

<%@include file="/libs/foundation/global.jsp"%>

<%@page import="com.day.cq.wcm.foundation.forms.FormsHelper,

             org.apache.sling.api.resource.ResourceUtil,

             org.apache.sling.api.resource.ValueMap" %>

<%@taglib prefix="sling"

                uri="http://sling.apache.org/taglibs/sling/1.0" %>

<%@taglib prefix="cq"

                uri="http://www.day.com/taglibs/cq/1.0"

%>

<cq:defineObjects/>

<sling:defineObjects/>

<%

 

    String First = request.getParameter("First");

    String Last = request.getParameter("Last");

    String City = "Ottawa";

    String Address = "Carp";

 

    com.adobe.cq.HandleForm hf = sling.getService(com.adobe.cq.HandleForm.class);

    hf.injestFormData(First,Last,City, Address);

 

 

%>

 

 

In this example –my form has 2 fields:

  • First
  • Last. 

The post.POST.jsp is sending data to an  OSGi. The same one used in adaptive form article:

http://scottsdigitalcommunity.blogspot.ca/2014/05/posting-aem-6-form-data-to-sling.html

The OSGi logs the values,

23.02.2016 15:04:41.793 *INFO* [0:0:0:0:0:0:0:1 [1456257881509] POST /content/geometrixx/en/products/triangle.html HTTP/1.1] com.adobe.cq.HandleFormImpl **** Hi Lee -- look at the data posted from an AEM adaptive form - First: Tom Last: Macdonald City: Ottawa Address Carp

Avatar

Level 10

That article applies for AEM Adaptive forms - not 5.6 form component. I referenced the docs applicable to 5.6 in my other answer. 

Avatar

Level 5

Scott,

For some reason, it still keeps calling the basic form post script. I've added code to even log in console it doesn't get called at all. The data does get stored, so I am guessing the default POST script is getting invoked. But we want both post and email options. In the UI i do get the new interface to specify form storage and the email options.

Can anyone let us know what exactly is not correct here?

 

I'll send an email with zip of our custom action for form.

 

<%
log.info("STORING CONTENT");
                    String storeContent = 
                    "/libs/foundation/components/form/actions/store";
        FormsHelper.runAction(storeContent, "post", resource, 
                                slingRequest, slingResponse);
log.info("CONTENT STORED");
    ValueMap props = ResourceUtil.getValueMap(resource);
    Email email = new SimpleEmail();
    String[] mailTo = props.get("mailto", new String[0]);
    email.setFrom((String)props.get("from"));
        for (String toAddr : mailTo) {
            email.addTo(toAddr);
      }
log.info("Sending email");
//email.setMsg((String)props.get("template"));
    email.setSubject((String)props.get("subject"));
    MessageGatewayService messageGatewayService = 
                    sling.getService(MessageGatewayService.class);
    MessageGateway messageGateway = 
                messageGatewayService.getGateway(SimpleEmail.class);
    messageGateway.send(email);
log.info("email sent");
%>