Prerequisites

What is an action

An adaptive form provides a toolbar that lets a form author configure a set of options. These options are defined as actions for the adaptive form. Click the Edit button in the Toolbar for Panel to set the actions supported by adaptive forms.

Besides the set of actions provided by default, you can create custom actions in the toolbar. For example, you can add an action to enable the user to review all the adaptive form fields before a form is submitted.

Steps to create a custom action in an adaptive form

To illustrate the creation of a custom toolbar action, the following steps guide you to create a button for end users to review all the adaptive form fields before submitting a filled form.

All the default actions supported by adaptive forms are present in /libs/fd/af/components/actions folder. In CRXDE, copy the fileattachmentlisting node from /libs/fd/af/components/actions/fileattachmentlisting to /apps/customaction.

After copying the node to apps/customaction folder, rename the node name to reviewbeforesubmit. Also, change the jcr:title and jcr:description properties of the node.

The jcr:title property contains the name of the action that is displayed in the toolbar dialog. The jcr:description property contains more information that is displayed when a user hovers the pointer over the action.

Select cq:template node in reviewbeforesubmit node. Ensure that the value of guideNodeClass property is guideButton and change jcr:title property accordingly.

Change the type property in the cq:Template node. For the current example, change the type property to button.

The type value is added as a CSS class in the generated HTML for the component. Users can use that CSS Class to style their actions. The default styling for both, mobile and desktop devices, is provided for the button, submit, reset, and save type values.

Select the custom action from the adaptive form edit toolbar dialog. A Review button is displayed in the toolbar for the panel.

To provide functionality to the Review button, add some JavaScript and CSS code and server-side code in the init.jsp file, present inside the reviewbeforesubmit node.