DocumentationAEM 6.4Forms Guide

Creating a forms portal page creating-a-forms-portal-page

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Forms portal components equips Web Developers with components to create and customize a forms portal on websites authored using Adobe Experience Manager (AEM). For a quick overview of forms portal, see Introduction to publishing forms on a portal.

Prerequisites prerequisites

Forms portal components are not available for use by default. Ensure that the following forms portal component categories are enabled as described in Enabling forms portal components.

Document Services Includes Search & Lister, Link, and Drafts and Submissions components.

Document Services Predicates Includes Date Predicate, Full Text Predicate, Properties Predicate, and Tags Predicate components. These components are used to configure search in the Search & Lister component.

Once they are enabled on an AEM sites page, these component categories are available for use in the component browser.

AEM Forms portal components in component browser
Figure: Forms portal component categories

Search & Lister Component search-amp-lister-component

The Search & Lister component, available under Document Services component category, is used to list forms on a page and to implement search on the listed forms. The component includes two panes:

  • List pane where the forms are listed.
  • Search pane where you add the search functionality.

You can drag-drop the Search & Lister component from the Document Services component category in the components browser onto the page. The component, when added, looks similar to the following.

Search & Lister Component in a page
Figure: Search & Lister Component in a page with Grid layout

List pane list-pane

The List pane is an area where your forms are listed. The Search & Lister component provides various configuration options that you can use to control the display of forms in the List pane.

To configure the List pane, tap the Search and Lister component and then tap settings_icon . The Edit Component dialog opens.

List pane in edit mode
Figure: List pane in edit mode

The Edit dialog includes several tabs that provide configuration options described in the table below. Tap OK to save the configuration, when done.

Tab
Configuration
Description
Asset Folders
Add Item
Configures the folders where assets are uploaded using AEM Forms UI. By default, it lists all uploaded assets. For more information about AEM Forms UI, see Introduction to managing forms.
Display
Title Text
Title for the Search & Lister component. The default title is Forms Portal.
Layout Template
Layout of the assets.
Disable Advanced Search
When enabled, hides the advanced search icon.
Disable Text Search
When enabled, hides the full-text search bar.
Result
Number Of Results Per Page
Configures the maximum number of forms you want to display on a page.
Results Text

Configures the results text (for example, 1-12 of 601 Results). The default value is Results.

For example, if you specify Forms in this field and there are a total of 601 forms, the result text changes to 1-12 of 601 Forms.

Page Text

Configures the page text (for example, Page 1 of 51). The default value is Page.

For example, if you specify Application Form in this field and there are 51 pages, the page text changes to Application Form 1 of 51.

Of Text

Replaces the word of with the specified text (Page 1 of 51). The default value is of.

For example, if you specify out of in this field, the text changes to Page 1 out of 51.

Form Link
Render Type
Controls the listing of forms based on the specified render type. The available options are PDF and HTML. For example, if you select only HTML as the render type, the PDF forms are filtered out.
HTML Profile
Configures the HTML profile to use for rendering. All of the available profiles are listed in the drop-down list.
Submit URL

Configures a servlet where the form data is submitted.

Note: Submit URL for a form can be specified at several places and its order of precedence is as follows:

  1. Submit URL embedded in the form (in Submit button) has the highest priority.
  2. Submit URL mentioned in AEM Forms UI has the second highest priority.
  3. Submit URL mentioned in forms portal has the lowest priority.
HTML Render Action tool tip
Configures the text for the tool tip, which is displayed on hovering the pointer over {width="13"} (the HTML5 icon).
PDF Render Action tool tip
Configures the text for the tool tip, which is displayed on hovering the pointer over {width="14"} (the PDF icon).
Style
Style Type
Allows you to specify No Style, Default Style, or Custom Style for listing the forms.
Custom Style Path
If you selected Custom as the Style Type, browse to specify the path to the custom CSS, else select Default.

Search Pane search-pane

The Search pane lets you add the Date Predicate, Full Text Predicate, Properties Predicate, and Tags Predicate components from the Document Services Predicates category in AEM Sidekick. These components implement the search functionality for users to perform search on the listed forms.

Tip: You can control the list of forms displayed on your forms portal based on a preset criteria and hide the search functionality for end users. To control the list of forms, use the Predicate components to apply search filters. You can also specify the default filter values and disable the search from the Display tab of the Edit Component dialog.

Search Panel with Date, Full Text, Properties, and Tags Predicate
Figure: Search Panel with Date, Full Text, Properties, and Tags Predicate

Date Predicate date-predicate

The Date Predicate component, when added, enables search on the listed forms that were modified during a specified duration.

To configure the Date Predicate component:

  1. Tap the component and then tap settings_icon . The Edit dialog opens.

  2. Specify the following:

    • Type: The only option available is Last Modified Date.
    • Text: Label or caption for the Date Predicate Component. The default value is Last Modified Date.
    • Start Date Label: Label or caption of start date field.
    • End Date Label: Label or caption for end date field.
    • Hide: To enforce default date filter to list forms.

  3. Tap OK.

Full Text Predicate full-text-predicate

The Full Text Predicate component implements full text search on form data, such as name and description. Users can search any text string to returns forms that contain the text in their name or description.

To configure the Full Text Predicate component:

  1. Tap the component and then tap settings_icon . The Edit dialog opens.
  2. Specify the title in the Main Title field.
  3. Tap Ok.

Properties Predicate properties-predicate

The Properties Predicate component implements searching of forms based on form properties, such as title, author and description.

To configure the Properties Predicate component:

  1. Tap the component and then tap settings_icon . The Edit dialog opens.

  2. In the General tab, specify the search label. The default value is Properties.

  3. In the Options tab, tap Add Item.

  4. Select a property from the drop-down list and specify a search label for it in the field below the drop-down list.

  5. Repeat step 4 to add more properties. You can also specify a default filter value to list forms based on the specified criteria and hide the property for search by end users. Select the Hide checkbox for a property and specify the default filter value.

    For example, if you want to display forms that contain “Travel” in their titles, select Hide next to the Title property. In addition, specify Travel in default filter value text box.

  6. Tap OK.

Tags Predicate tags-predicate

The Tags Predicate component implements searching of forms based on tags defined in Forms Manager.

To configure the Tags Predicate component:

  1. Tap the component and then tap settings_icon . The Edit dialog opens.
  2. Tap the down-arrow button next to the Tags field.
  3. Select appropriate tags.
  4. Tap OK.

The selected tags appear in the Search pane along with the check boxes for selection. Users can now narrow down their search based on the tags.

List forms on a page list-forms-on-a-page-br

To list forms on a page, add the Search & Lister Component to the page and configure the List Pane. To enable the end users to search forms with date, text, and tags, add a Search Pane component.

To link a form from anywhere on the page, use the Link component. For more information about link component, see Embedding link component in a page.

To list the forms that are in a draft state and the forms which are already submitted, use the Drafts and Submissions component. For more information, see Customizing Drafts and Submissions component.

Mobile device friendliness mobile-device-friendliness

Forms Portal Search & Lister component is mobile device friendly and adapts accordingly. All three default views: Grid, Card, Panel relayouts according to the device in which site is opened provided with the fact that web page also adapts. The simple fact is that, Search & Lister is a component only and does not govern page level styling.

The following image depicts the Search & Lister component when opened on a mobile device:

Screenshot of the Search and Lister component
Figure: Search & Lister component

Customizing a forms portal page customizing-a-forms-portal-page-br

You can customize a forms portal page to provide a distinct appearance to the page. You can also add metadata to improve search experience, change layout of the page, and add custom CSS styles. For more information, see Customizing templates for Forms Portal Components.

AEM Forms UI allows you to add custom metadata to forms. Custom metadata is useful in providing a listing and searching forms experience to the end users. For more information about Custom metadata, see Customizing templates for Forms Portal Components.

Out of the box, forms portal provides rendering actions. You can customize forms portal to add more actions. For detailed information, see Adding custom action on form lister items.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da