Edit Mode Components

You are reading the Adobe Experience Manager 5.6.1 version of Edit Mode Components.
This documentation is also available for the following versions: AEM 5.6  CQ 5.5  CQ 5.4  CQ 5.3 

The following components are part of the standard library of components available in CQ. Within the Websites tab, they are available from:

  • the components tab of the sidekick
  • the Insert New Component selector (when you double-click in the Drag components or assets here area)

 They are sorted according to various categories including:

  • General: Includes basic components, including text, images, tables, charts, and so on.
  • Collaboration: Includes Social Collaboration components, including comments and ratings.
  • Columns: Includes components necessary for organizing the layout of the content.
  • Form: Includes all the components needed to create a form.
  • Other: Includes gadget, search, and tag cloud components.

General

The General components are the basic components that you use to create content, excluding forms, column layout, and specialized components such as tag clouds, search, and gadgets.

Adaptive Image

The Adaptive Image foundation component generates images that are sized to fit the window in which the web page is opened. To use the component, you provide an image resource either from the file system or DAM. When the web page is opened, the web browser downloads a copy of the image that has been resized so that it is suitable for the current window. 

The following characteristics can determine the size of the window:

  • Device screen: Mobile devices typically display web pages so that they extend across the entire screen. 
  • Web browser window size: Users of laptop and desktop computers can resize web browser windows.

For example, the component generates a small image when the web page is opened on a cell phone, and a medium-sized image when opened on a tablet. On a laptop, the component creates an delivers a large image when the page is opened in a maximized web browser. When the web browser is resized to fit a portion of the screen, the component adapts by delivering a smaller image and refreshes the view.

Supported Image Formats

You can use image files of the following file name extensions with the Adaptive Image component:

  • .jpg
  • .jpeg
  • .png
  • .gif

Images Sizes and Quality

The following table lists the width of the image that is generated for the given viewport width. The height of the generated image is calculated to maintain a constant aspect ratio and no whitespace occurs inside the image edge. Cropping can be used to avoid whitespace.

When the image is a JPEG image, the viewport size can also influence the JPEG quality. The following JPEG qualities are possible:

  • Low (0.42)
  • Medium (0.82)
  • High (1.00)

 

Viewport Width Range (pixels) Image Width (pixels) JPEG Quality Tarageted Device Type
width = 319 or smaller 320 low  
width = 320 320 medium Cell phone (portrait)
320 < width < 481 480 medium Cell phone (landscape)
480 < width < 769 476 high Tablet (portrait)
768 < width < 1025 620 high Tablet (landscape)
width = 1025 or larger  full (original size) high Desktop

Image Properties

Many of the Adaptive Image properties are common with the Image component on which it is based.

Image

Drag an image from the content finder or click to open a browse window where you can load an image. After the image is loaded, you can crop the image, rotate it, or delete it. To zoom in and out of the image, use the slide bar beneath the image (above the OK and Cancel buttons)

Crop

Crop an image. Drag the border to crop the image.

Rotate

Click Rotate repeatedly until the image is rotated as desired.

Clear

Remove the current image.

Advanced Properties

Title

The Adaptive Image component does not use this property.

Alt Text

The alternate text to use for the image.

Link To

The Adaptive Image component does not use this property.

Description

The Adaptive Image component does not use this property.

Size

The Adaptive Image component does not use this property.

Extending the Adaptive Image Component

For information about customizing the Adaptive Image component, see Understanding the Adaptive Image Component.

Carousel

The Carousel Component allows you to display page images in such a way that images associated with individual pages are displayed briefly, one at a time, in an order you specify, with a time delay that you specify. (Clickable controls also let the user cycle through the displayed pages in real time, on demand.) Clicking on the currently visible page image takes you to that page. (In other words, the Carousel acts as a navigation control.)

If you drag a Carousel Component from the sidekick onto the page, then doubleclick the placed component, a dialog will appear: 

file

Under the Carousel tab, you can adjust the Play Speed (time in milliseconds before the next slide is shown), the Transition Time (time in milliseconds for the transition between two slides), and Controls Style (various options are available from a pulldown menu).

The List tab is where you will specify how pages are included in your Carousel:

file

There are several ways to build a page list (namely, using Child Pages, Fixed List, Search, or Advanced Search, all described below). Note that no matter which method you choose, the pages you include in your list should each already have an Image associated with the page. (That image will be displayed in the Carousel.) If there is no Image for a given page under that page's Page Properties, you should associate an Image with the page before beginning, as otherwise the Carousel will display a blank (or mostly blank) page. See "Setting Page Properties" under Managing Pages within CQ WCM.

Next to "Build list using," select Child Pages, Fixed List, Search, or Advanced Search from the dropdown menu. (Note that the item you choose here will cause a new tab to appear, whose title will depend on the option you chose.)

Next to "Order by," select jcr:title, jcr:created, cq:lastModified, or cq:template from the dropdown menu.

Optionally specify, next to "Limit," the maximum number of items you would like to use in the Carousel.

If you chose to build your list using Child Pages, a new tab, Child Pages, will appear:

file

Specify a parent page path manually, or click the magnifying-glass icon at the right to bring up a path-picker dialog.

If you chose "Fixed List" to build your list, a new tab called Fixed List will appear:

file

Use the magnifying-glass button (right) to bring up a picker dialog. Use the dialog to find an element that you would like to put in the Carousel collection. Click the "+" button (far right) to add another item to the list. Find the element you would like to assign to this item. Repeat until you have specified the desired number of items. Then use the Up/Down buttons to reorder the items in the list.

If you chose Search (in the first dropdown menu of the List tab) for building your list, a Search tab will appear:

file

Optionally enter a starting path for the search, next to "Start in."

Enter a plaintext search query next to "Search query."

If you chose Advanced Search as the basis for building your list, an Advanced Search tab appears:

file

Enter a search query using Querybuilder predicate notation. For example, you can enter "fulltext=Marketing" to have all pages with "Marketing" in their content show up in the Carousel.

In the example shown in the graphic above, the query searches for all pages that use a particular template.

See QueryBuilder API for full discussion of query expressions and further examples.

Note

You can create a cusotom carousel component for Adobe Experience Manager that displays digital assets located in the AEM DAM. For information, see Creating Custom Carousel components for Adobe Experience Manager.

Chart

The Chart component lets you add a bar, line, or pie chart. CQ WCM creates a chart from the data you provide. You provide data by typing directly into the Data tab or by copying and pasting a spreadsheet.

file
Chart Data

Enter your chart data using the CSV format; the Comma Separated Values format uses commas (“,”) as the field separator.

file
Chart Type

Select from Pie Chart, Line Chart, and Bar Chart.

Alternative text

Alternative text that displays instead of the chart.

Width

Width of the chart in pixels.

Height

Height of the chart in pixels.

The following is an example of a resulting Bar chart, showing the relationships between the chart data (as in the previous screenshot) and the finished chart:

file

Note

You can create a custom AEM chart control that displays data located in the AEM JCR. For information, see Displaying Adobe Experience Manager Data in a Chart.

Download

The Download component creates a link on the selected web-page to download a specific file. You can either drag an asset from the Content Finder or upload a file.

file

Note

Internet Explorer users cannot monitor upload progress.

See the Certified Platforms section for more information about HTML5 features used by CQ5.5.

Description

A short description displayed with the download link.

File

File available for download on the resulting web-page. Drag an asset from the content finder or click the area to upload the file to be available for download.

The following example shows the Download component in Geometrixx:

file

External

The external application integration component (External) enables you to embed external applications into your CQ page using an iframe.

Note

Use Design mode to enable the External component (General group) for the parsys.

file
  • Target application
    Specify the URL of the web application to be integrated; for example:
        www.google.us
  • Pass parameters
    Check the box for parameters to be passed to the application when required.
  • Width and Height
    Define the size of the iframe

The external application is integrated into the paragraph system of the CQ page; for example:

file

Note

Depending on your use case, other options are available for integration of external applications, for example

Flash

The Flash component lets you load a Flash movie. You can drag a flash asset from the content finder onto the component, or you can use the dialog:

file
Flash movie

The flash movie file. Either drag an asset from the content finder, or click to open a browse window.

Size

Dimensions in pixels of the display area holding the movie.

Alternative Image

An alternative image to be shown

Advanced

Includes all of the following:

Context menu

Indicates whether the context menu should be shown or hidden.

Window Mode

How the window appears, for example opaque, transparent, or as a distinct (solid) window.

Background color

A background color selected from the color chart provided.

Minimum version

The minimum version of Adobe Flash Player required to run the movie. The default is 9.0.0.

Attributes

Any further attributes required.

Image

The image component displays an image and accompanying text according to the specified parameters. You can either drag and drop and image from the Content Finder or click to upload an image.

Note

The progress of the upload cannot be monitored with Internet Explorer.

See the Certified Platforms section for more information about HTML5 features used by CQ5.5.

file

Note

Internet Explorer users need to upload the image and click Ok then re-open the image to see the uploaded file in the preview and to be able to perform modifications (i.e. crop).

See the Certified Platforms section for more information about HTML5 features used by CQ5.5.

Image

You can drag an image from the content finder, or click to open a browse window where you can load an image. After the image is loaded, you can create a clickable image map, crop the image, rotate it, or delete it. To zoom in and out of the image, use the slide bar beneath the image (above the OK and Cancel buttons)

Map

To map an image, click Map. You select how you want to create the image map (rectangle, polygon, and so on) and specify where the area should point to.

Crop

Click Crop to crop an image. Use your mouse to crop the image.

Rotate

To rotate an image, click Rotate. Click Rotate repeatedly until the image is rotated the way you want it.

Clear

Remove the current image.

Advanced

These tools include the title, description, and the size.

Title

The title of the image.

Description

A description of the image.

Size

Sets the height and the width of the image.

The following example is an image component used in Geometrixx:

file

List

The List component allows you to configure search criteria for displaying a list:

file
Build List using

Here you specify where the list will retrieve its content. There are several methods:

  • Child pages
    All child pages of the current page will then be listed. If you leave this empty the current page will be used as the root.
  • Fixed list
    Here you can specify pages to be listed. Use the various buttons to add, remove and position these pages.
  • Search
    Here you specify the search query and the page to start the query in.
    Start in
     specifies the path the search is to occur in. You can either type the complete path directly or type several characters, then use the auto-suggestion provided.
    Search query
    use a simple query, such as triangle.
  • Advanced Search
    Here you can define the Querybuilder predicate notation for your required search.
  • Tags
    Specify the Parent page, Tags/Keywords and match criteria.

Display as

How you want the items to be listed; includes Links, Teasers and News.

Order by

Whether the list is to be ordered, and if so, the criteria to use for sorting. You can enter a criteria or select one from the drop down list provided.

Limit

Specify the maximum number of items that you want displayed in the list.

Enable Feed

Indicates whether an RSS feed should be activated for the list.

Paginate after

Here you can specify the number of list items to display at once. A list with more items than specified will use pagination to display the list in several portions.

The following example shows a List component the way it may display a list of child pages, with the design controled by a site design's custom CSS definitions.

file

Product List

The product list component:

  • enables users to enter information in a grid-oriented table
  • imports information from a .tsv (tab-separated) spreadsheet
  • exports information into a .tsv spreadsheet
file
Filters

Enter the terms that you want CQ WCM to filter for. The list only shows those entries that include that term.

Apply Filter

 Applies any filters to the list.

Import

Click this button to import an external .tsv file.

Importing data overwrites existing data

Properties/Columns

Selected properties or columns appear in the results list. You can edit directly in the cells by double-clicking in them.

Save modifications

Lets you save any edits you make locally. To make edits, double-click the cell and make changes. Cells that have unsaved changes are indicated with a red triangle in the upper right corner. Be sure to save your changes before clicking OK or your changes will be lost.

Insert/Delete Row

Inserts a row or deletes the current row.

Export

Exports the list to a tab-separated (.tsv) file that you can edit in a spreadsheet program.

The following example shows the use of a Product Listing component in Geometrixx Outdoors:

file

Reference

The Reference component lets you reference text in another part of a CQ based website (within the current instance). The referenced paragraph will then appear as if it was on the current page. Instead of referencing a specific paragraph, the path can also be modified to specify an entire par-system by setting the path to /content/geometrixx/en/jcr:content/par corresponding to the following example.

file

Click to access a tree of the site pages. Select the required page and paragraph, then click OK. The selected paragraph will be shown on the current page; it will be updated when the source paragraph changes (might need a page refresh).

Search

The Search component adds search capability to your page.

file
Search Button Text

The name displayed on the actual search button.

Statistics Text

The text displayed above the search results.

No Results Text

If there are no results, the text entered here is displayed.

Spellcheck Text

If someone enters a similar term, this text is displayed before the term. For example, if you type geometrixxe, the system displays "Did you mean? geometrixx".

Similar Pages Text

The text that is displayed next to a result for similar pages. Click this link to see pages that have similar content.

Related Searches Text

The text that appears next to searches for related terms and topics.

Search Trends Text

The title above the search terms users enter.

Result Pages Label

The text that appears at the bottom of this list with links to other results pages.

Previous Label

The name that appears on the link to previous search pages.

Next Label

The name that appears on the link to subsequent search pages.

The following example shows the Search component in Geometrixx Outdoors after a search for the word gloves:

file

The following example shows a search term that is misspelled and not available:

file

Sitemap

An automatic sitemap listing, which (with the default settings) lists all pages (as active links) in the current website:

file

 If required you can edit this component:

file
Root Path

Path from where the listing is to start.

Slideshow

This component allows you to load a series of images to be displayed as a slideshow on your page.You can add or remove images and assign each a title. Under Advanced you can also specify the size of the display area.

file

The slideshow component then repeatedly displays each in sequence, for a short period of time:

file

Table

The table component lets you add a table. You can create a table component, either by copying and pasting a spreadsheet or a table from another external editor (such as Notepad) into CQ WCM, or you can create one from scratch. Using Tab in the table component moves you from field to field and does not create separate columns in a table.

If you are typing the table contents directly into the table, you manually add rows and columns by clicking the appropriate button. Put the cursor in the cell you want to add text to and type the information into the Rich Text Editor. The information appears in the selected cell.

file
Rich Text Editor

The area at the top of the dialog is for editing the contents of the currently selected cell. You can edit how the text appears (bold, italics, underline), how the text in the cell is aligned, add hyperlinks, and add numbered and bulleted lists to the cells.

Table Properties

Allows you to specify layout properties for the table.

Cell Properties

Allows you to specify layout properties for the current table cell.

Prepend Row

Adds a row to the table, preceding the current row.

Append Row

Adds a row to the table, following the current row.

Delete Row

Deletes a row from the table.

Prepend Column

Adds a column to the table, preceding the current column.

Append Column

Adds a column to the table, following the current column.

Delete Column

Deletes a column from the table.

The following example shows use of the table component; the design is determined by the site-specific CSS:

file

Tag Cloud

A tag cloud shows a graphically presented selection of the tags within your website:

file

When configuring this, you can specify:

Tags to Display

Where the tags to be displayed are collected from. Either the current page or all tags.

No links on tags

Whether the tags displayed should act as links.

file

Text

The Text component lets you enter a text block using a WYSIWYG editor. A selection of icons allow you to format your text, including font characteristics, alignment, links, lists and indentation:

file

The formatted text will then be shown on the page; for example under Geometrixx Outdoors:

file

For more detailed information about the Text component, see the Rich Text Editor page.

Text Image

The Text Image component adds a text block and an image. You can also add text and images separately. See Text and Image for details.

file
Text

Enter text. Use the toolbar to modify formatting, create lists, and add links.

Image

Drag an image from the content finder, or click to browse to an image. Crop or rotate as required.

Advanced Image Properties

Allows you to specify the following:

  • Title
    The title for the block; will be shown by mouseover.
  • Alt Text
    Alternative text to be shown if the image cannot be displayed. If left empty the title will be used.
  • Description
    A description of the image.
  • Size
    Sets the height and width of the image.

Styles

  • Here you can either left or right align the image.
  • The default is Left aligned, with the image at the left.

The following example shows a Text Image Component displaying the specified content:

file

Title

The title component can either:

  • display the name of the current page; this is done by leaving the Title field blank
  • display a text you specify in the Title field.

You can also specify the text size you want.

file
Title

If you want to use a name other than the page title, enter it here.

Link

The URI if the title is to operate as a link.

Type/Size

Select Small or Large from the dropdown list. Small is generated as an image. Large is generated as text.

The following example shows a Title component being displayed; the design is determined by the site-specific CSS.

file

Inplace Editing Mode

In addition to the dialog based Rich Text Editing mode, CQ also provides an Inplace Editing mode, which allows direct editing of the text as it is displayed in the layout of the page.

Note

The Title component is designed to contain a short text without linebreaks. When editing a title in Inplace Editing Mode, entering a linebreak will open a new Text component below the title.

Collaboration

Social Collaboration components enable visitors to your website to provide their input.

Comments

The Comments component allows visitors to leave comments about the current page or paragraph.

You can configure:

file
  • Default Message
    Enter a message to encourage the visitor to leave a comment and possibly indicate what sort of information you are hoping for; this message will disappear as soon as the visitor clicks in the comment field.
  • Allow Replies
    Allows visitors to reply to existing comments.
  • Display as tree
    Indicates whether replies are to be displayed as a tree.
  • Moderated
    If checked, user generated comments must be moderated before they are displayed on the publish instance; for example, using the Community console or a workflow for moderation.
  • Closed
    When checked the comments are closed; so no new comments can be added.

In the Date Format tab you can also configure the date format to be used when displaying the comments:

file

The visitor will then be able to leave a comment; basic details about themselves can also be entered if they are not currently logged on:

file

Comment Post

When viewed on the author environment the individual comment posts also have a dialog that you can use for configuration if necessary:

file
  • The Message Text
    You can edit the text of the comment.
  • Moderate
    You can moderate the post to set Approve, Deny or Pending.
  • Mark as spam
    You can mark an individual message as spam, or not.

Note

It is recommended to use the Community Console for moderation purposes.

file

This dialog shows information that the author has supplied: Name, E-mail Address and Website.

Feed Link

The Collaboration section of sidekick provides a Feed Link component:

file

You can configure:

  • Icon, activate if you want the RSS icon next to the link
  • Link Text, the text seen for the link
  • Format, of the resulting feed. This is determined by the link target:
    Atom 1.0 will point to <page>.feed
    RSS 2.0 links to <page>.feed.rss.xml

To define your feed link:

file

Ratings

The Ratings component allows the visitor to rate the current page or paragraph. It is very closely related to Comments.

file
  • Allow comments
    Enable or disable comments from the visitor. This controls whether the Comment field is displayed within the rating.
  • Default Message
    This field is relevant when Allow Comments has been selected. Enter a message to encourage the visitor to leave a comment and possibly indicate what sort of information you are hoping for. This message will disappear as soon as the visitor clicks in the comment field.
  • Moderate ratings
    If checked, user generated ratings must be moderated before they are displayed on the publish instance; for example, using the Community console or a workflow for moderation.
  • Date format
    You can also configure the date format to be used when displaying the ratings.

The visitor will then be able to click the required number of stars to leave their rating, if comments have been enabled there will also be a field for their comment. Basic details about themselves can also be entered if they are not currently logged on:

file

Ratings Post

As with the individual Comment Posts, the individual rating posts have a dialog for configuration if necessary.

User State Toggle Button

The user state toggle button can be found in the Collaboration section of the sidekick and can be used for a variety of Profile States. This component links a State Provider (each of which provides two states for a specific property) to the two workflows used to move between the two states.

Note

The user state toggle button is only visible if the user is logged in; i.e. when a profile is available.

In the Geometrixx forum (Community) this button is used for subscribing and unsubscribing to notification emails, sent when a new post is added.

file

From the Settings tab you can define and select:

  • Toggle State Provider
    The state provider that manages the required property and the state transitions.
    From the drop down list you can select from the available State Providers. In Geomerixx these include:
    • Un-/Subscribe Forum Topic
    • Add/Remove Friend
  • Toggle Workflow Model
    The workflow to be used when toggling from the default state to the other state.
  • Untoggle Workflow model
    The workflow used to toggle back to the default state.

From the Texts & Labels tab you can define:

  • Button Label Toggled
    The label shown after the state has been toggled.
    For example, when the user has already subscribed to a forum the label will show Unsubscribe.
  • Button Label Untoggled
    The label shown after the state has been untoggled.
    For example, when a user has not yet subscribed to a forum the label will be Subscribe.
  • Button Label Transition
    This label is shown while the transition between the two states is actually taking place. Although usually this will not be seen, it may be necessary when the transition takes a longer period of time.
  • Toggled Confirmation Message
    The message to confirm that the toggle action has suceeded.
    For example, to confirm the subscribe action.
  • Untoggled Confirmation Message
    The message to confirm that the untoggle action has succeeded.
    For example, to confirm the unsubscribe action.

Columns

Columns control the layout of content in CQ WCM. There are three standard components:

  • Column Control
    The basis of column control allowing the number of columns to be selected.
  • 2 Columns
    A Column Control component that defaults to 2 equal columns.
  • 3 Columns
    A Column Control component that defaults to 3 equal columns.

Column Control

The Column Control component lets users split the content in the main panel of the web-page into multiple columns. Users define the number of columns required and then create, delete, or move content within each of the columns.

file
Column Layout

Select the number of columns you want rendered. Once created, each column has its own Drag components or assets here link for adding content.

The following example shows the Column Control component ready for use in Geometrixx. You can now use the placeholders for new components:

file

Form (group)

Form components are used to create forms for visitors to submit input. Forms and form components can be used to collect information including user feedback (for example, a customer satisfaction questionnaire) and user information (for example, user registration).

Forms are built up from several different components:

  • Form
    The form component defines the beginning and end of a new form on a page. Other components can then be placed in between these elements, such as tables, downloads, and so on. 
  • Form fields and elements
    Form fields and elements can include text boxes, radio buttons, images, and so on. The user often completes an action in a form field, such as typing text. See individual form elements for more information.
  • Profile Components
    Profile components relate to visitor profiles used for social collaboration and other areas where visitor personalization is required. 

The following shows an example form; it is comprised of the Form component (start and end), with two Form Text fields used for input and also one General Text field used for the lead-in text.

file

Note

Information about developing and customizing your forms further is available on the Developing Forms page.

Settings Common to (Many) Form Components

Although each of the form components has a different purpose, many are composed of similar options and parameters.

When configuring any of the form components the following tabs are available in the dialog:

  • Title and Text
    Here you need to specify the basic information, such as the title of the form and any accompanying text. Where appropriate it also allows you to define other key information such as whether the field is multi-selectable and items available for selection.
  • Initial Values
    Allows you to specify a default value.
  • Constraints
    Here you can specify whether a field is required and place constraints are on that field (for example, must be numeric, and so on).
  • Styling
    Indicates the size and styling of the fields.

Note

The fields you see vary widely depending on the individual component.

Not all options are available to all components.

Title and Text Tab

file
  • Element Name
    Name of the form element. This indicates where in the repository the data is stored.
    This is a required field and should only contain the following characters:
    • alphanumeric characters
    • _ . / : -
  • Title
    The title displayed with the field. If left blank, the default title will be shown.
  • Description
    Allows you to provide additional information for the user, if necessary. On the form this is shown below the field, in a smaller font than the title.
  • Show/Hide
    Determines when the field is visible.

Initial Values Tab

file
  • Default Value
    The value displayed in the field when the form is opened; ie before the user has made any input.

Constraints Tab

The constraints can be used to control whether:

  • input is required
  • constraints are to be applied to the input

The required and constraint messages should be used to inform the user about what input is required.

file

The constraints available for selection in a standard CQ installation are:

  • None
  • Date
  • Email
  • Name (no umlauts)
  • Numeric

Styling Tab

Again the parameters available depend on the individual component, but can indicate:

  • size in columns and row
  • width in pixels
  • CSS
file

Form (component)

The Form component defines both the start and end of a form using the Form Start and Form End elements. These are always paired to ensure that the form is correctly defined.

file

In between the start and end of a form, you can add form components that define the actual input fields for users.

Start of Form

This component is needed to define the start of a new form on a page.

Two tabs are available for configuration Form and Advanced:

file
Thank You Page

The page to be referenced to thank visitors for providing their input. If left blank, the form re-displays after submission.

Start Workflow

Determines which workflow is triggered once a form is submitted.

file
Action Type

A form needs an action. The action defines the operation that is triggered for execution with the data submitted by the user (similar to action= in HTML).

Action types included in a standard CQ installation:

  • Account Request
    Use if the form is used to request a new user account.
  • Create and Update Account
    Creates and/or updates the account details.
  • Edit Resource(s)
    Allows the form to edit a resource; i.e. display initial values and modify them.
  • Edit Workflow Controlled Resource(s)
    Allows the form to edit a workflow-controlled resource.
  • Mail
    Sends the form contents to an email address that you specify.
  • Profile Update
    Updates the profile.
  • Reset Password
    Use if the form is used for password reset requests.
  • Set Password
    Use if the form is used to set a user password.
  • Store Content
    This is the default action type.
    Stores the contents of the form in the repository at the specified location (Content Path). Therefore, when this action type is selected the Content Path field should be specified and contain a path in the repository. The path should end with "/" to indicate that for each form posted a new node is created at the given location; for example:
        /forms/feedback/

Form Identifier

The form identifier uniquely identifies the form. Use the form identifier if you have several forms on a single page; make sure they have different identifiers.

Load Path

Is the path to node properties used to load predefined values into the form fields.

This is an optional field that specifies the path to a node in the repository. When this node has properties that match the field names, then the appropriate fields on the form are preloaded with the value of those properties. If no match exists, then the field contains the default value.

Note

Using Load Path you can preload the form with values in the required fields.

See Preloading Form Values.

Client Validation

Indicates whether client validation is required for this form (server validation always occurs.). This can be achieved in conjunction with the Forms Captcha component.

Validation Resource Type

Defines the form validation resource type if you want to validate the entire form (instead of individual fields).

If you are validating the complete form, also include one of the following: 

  • A script for client validation:
        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  • A script for validation on the server side:
        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

Note

If you would like to call a service before the form is submitted and cancel the service if it fails, you can:

  • define the validation resource type
  • include a script for validation:
    • in your JSP, call your web service and create a com.day.cq.wcm.foundation.forms.ValidationInfo object containing your error messages; if there are errors, form data will not be posted.

The options available in Action Configuration are dependent on the Action Type selected:

Account Request

  • Create Account Page
    The page used when creating a new account.

Create and Update Account

  • Initial Group
    Group to assign new user to.
  • Home
    Page to display after successful login.
  • Path
    The path (relative) to where the new account is created and stored.
  • View Data...
    Click this button to access the information about form results in the bulk editor. From here, you can export the information to a .tsv (tab-separated) file (for use, for example, in an Excel spreadsheet.

Mail

  • From
    Enter the email address that the email should come from.
  • Mailto
    Enter the email address(es) that the form is to sent to.
  • CC
    Enter the CC email address(es).
  • BCC
    Enter the BCC email address(es).
  • Subject
    Enter a subject for the email.

Reset Password

  • Change Password Page
    The page used when changing the password.

Store Content

  • Content Path
    The content path for any content that the form dumps. Enter a path that ends with a slash /. The slash means that for each form port, a new node is created at the given location; for example:
        /forms/feedback/
  • View Data...
    Click this button to access the information about form results in the bulk editor. From here, you can export the information to a .tsv (tab-separated) file (for use, for example, in an Excel spreadsheet.

End of Form

This marks the end of the form and can include Submit and/or Reset buttons.

file
  • Show Submit Button
    Indicates whether a Submit button should be shown or not.
  • Submit Name
    An identifier if you are using multiple submit buttons in a form.
  • Submit Title
    The name that appears on the button, such as Submit or Send.
  • Show Reset Button
    Select check box to make the Reset button visible.
  • Reset Title
    The name that appears on the Reset button.
  • Description
    Information that appears below the button.

The following example shows use of a Form End in Geometrixx Outdoors:

file

Account Name

This allows you to input an account name:

file

Address Field

This allows you to input an international address field with the following format:

file

The component is configured for immediate use, but you can change the configuration if required. Leaving fields empty will use default settings.

Captcha

The Captcha component requires the user to type in an alphanumeric string as displayed on screen. The string changes with each refresh.

file

You can configure various parameters for this component, including a message to be shown when the captcha string is invalid.

Checkbox Group

A checkbox allows you to build a list of one of more checkboxes, several of which may be selected at the same time.

file

You can specify a title, description and element name. Using the + and - buttons you can add or remove items, then position them with the up and down arrows.

file

Note

Using Items Load Path you can preload the check box group list with values.

See Preloading Form Fields with Multiple Values.

Dropdown List

A drop down list can be configured with your range of values for selection.

You can specify a title, description and element name. Using the + and - buttons you can add or remove items, then position them with the Up and Down buttons. You can also allow the users to select several items from the list.

file

Then you can specify the default value(s):

file

Which will be selected when the list is first opened:

file

Note

Using Items Load Path you can preload the drop down list with values.

See Preloading Form Fields with Multiple Values.

File Upload

The file upload component provides the user with a mechanism for selecting and uploading a file.

file

Note

You can create a custom upload component to upload files to a Sling Servlet. For information, see Uploading files to Adobe Experience Manager.

Hidden Field

This component allows you to create a hidden field, which may be used for various purposes.

file

Note

You can also customize your form to show or hide specific form components according to the value of other fields in the form. Changing the visibility of a form field is useful when the field is needed only under specific conditions.

See Showing and Hiding Form Components.

Image Button

An image button allows you to create a button with your own text and/or image:

file

Image Upload

The image upload component provides the user with a mechanism for selecting and uploading an image file.

file

Link Field

The link field allows the user to specify a URL:

file

Most commonly used for the calendar event form, where it is used for the URL/link field of an event.

Password Field

This can be used when the user must input their password:

file

Password Reset

This component provides you with two fields for:

  • the input of a password
  • repeated input of the password to check to confirm that input is correct.

With default settings the component will appear as:

file

Radio Group

A radio group provides you with a list of one of more radio checkboxes, only one of which may be selected at any particular time.

file

You can specify a title, description and element name. Using the + and - buttons you can add or remove items, then position them with the up and down arrows.

file

Note

Using Items Load Path you can preload the radio group with values.

See Preloading Form Fields with Multiple Values.

Submit Button

This component allows you to create a submit button, with either the default text:

file

Or with your own text:

file

Tags Field

This field allows you to select tags:

file

You can specify various parameters, including the namespaces can be used:

file

Text Field

The standard text field can be configured to your required size and with with your own lead in message:

file

Profiles

Checked Password Field

This component gives you two fields for:

  • the input of a password
  • a check to confirm that the password has been input correctly.

With default settings the component will appear as follows:

file

Profile Avatar Photo

This component provides the user with a mechanism for selecting and uploading an Avatar Photo file.

file

Profile Detailed Name

This component allows the user to input a detailed name.

file

Profile Display Name

This component allows the user to input a concise name for display purposes.

file

Profile E-mail

This component allows the user to input an email address.

file

Profile Gender

file

Profile General Text Property

This component allows the user to input a value for a profile property. You can select the property Element Name from a dropdown list:

file

The user can then input their value:

file

Profile Primary Phone

This component allows the user to enter the primary telephone number.

Profile Primary URL

This component allows the user to specify a URL. 

Other

Components in the Other section include:

  • Forum: Components providing the functionality required to add a forum to your web site.
  • Gadgets: Lets you connect into gadgets available on many web sites.
  • Teaser: An image designed to entice the visitor to another page.

Forum

This provides the basis of an entire forum.

Note

The forum component is stored on the page itself, whereas the topics and individual posts are stored in the appropriate location under:
   /content/usergenerated/...

file

Various settings can be configured:

  • Topics Per Page
    You can specify the number of topics or posts shown on a page. Excess of this will be displayed on separate pages.
  • Moderated
    If checked, user generated forum entries must be moderated before they are displayed on the publish instance; for example, using the Community console or a workflow for moderation.
  • Closed
    After a forum has been closed, no new posts can be made.
  • Feed Enabled
    When selected, the forum will be made available as an RSS feed.

You can also customize the text shown in specific scenarios:

file

In Design Mode you can also configure the search box:

file
  • Search Result Page
    The path to the page that will display the search results. This page must therefore contain the Forum Search component.
  • Empty Text
    Your customized text to show in the empty search field; the text disappears as soon as the user clicks in the field.

A skeleton forum provides:

  • Search (search box)
  • a mechanism for creating a new topic
file

Adding a new topic, then posts for this forum, will automatically generate the appropriate components required to give an overview and access to the new topics and posts.

Forum Search

The Forum Search component is designed to be used on the Search Result Page as defined for the Forum component (in Design Mode).

The forum search component can be configured by the author, then the visitor can select the required option:

file
  • Forum Paths
    Restrict the paths to be searched. If empty, all forums are searched.
  • Results Per Page
    Specify the number of results to be shown on each page.

Again, a range of texts can be customized:

file

The forum search component provides the site visitors with more selection options:

file

Forum Topic

Note

Usually this component is only available when the Forum component has been instanced.

When a new topic is created the Forum Topic component is implemented.

file

This also has a dialog, though often you do not need to edit this directly as a lot of the actions can also be managed over the Community console.

Note

Topics and individual posts are stored in the appropriate location under:
   /content/usergenerated/...

file
  • Subject
    The subject is used:
    • in the topic list, for the link to the individual topic
    • as the title on the individual topic page
    • for searching, when selected
  • Message
    The message body can be viewed and edited if necessary.
  • Approved by moderator
    This is active if:
    • the forum is not moderated; i.e. all topics and posts are automatically approved
    • the message has been explicitly approved by a moderator; for example, from the Community console or using a moderation workflow.
  • Mark as spam
    This can be set either directly in the dialog or from the Community console.
  • Tags
    Tags from the Forum namespace can be selected here. They will be shown in the topic header.
file
  • Topics Per Page
    Sets the number of posts to be shown, before the list is paginated.
  • Pinned
    Pinned topics appear at the top of the list; sorted by the date of the last response and also highlighted.
  • Moderated
    If checked, user generated forum topics must be moderated before they are displayed on the publish instance; for example, using the Community console or a workflow for moderation.
  • Closed
    When closed no new posts can be added to the forum.
file

When available, the Name, E-mail Address and Website will be filled in from the users profile or information given when registering the post. When necessary they can be viewed and edited.

Forum Post

Note

Usually this component is only available when the Forum component has been instanced.

The post component is used when a visitor replies to a topic.

file

This also has a dialog, though again you do not often need to edit it directly as it can also be managed over the Community Console.

file
  • Subject
    A subject can be added, this is used for searching.
  • Message
    The message body can be viewed and edited if necessary.
  • Approved by moderator
    This is active if:
    • the forum is not moderated; i.e. the post is automatically approved
    • the post has been explicitly approved by a moderator; for example, from the Community console or using a moderation workflow.
  • Mark as spam
    This can be set either directly in the dialog or from the Community console.
  • Tags
    Tags from the Forum namespace can be set here.
file

When available, the Name, E-mail Address and Website will be filled in from the users profile or information given when registering the post. When necessary they can be viewed and edited.

Forum Post Creation from Inbound Email

Users can comment on any forum by replying to a post notification mail, rather than visiting the forum to post comments. 

The content, topic and author of a Post is obtained from reply mail.  Bounced back emails, such as out-of-office mails and vacation mails, are ignored.

Quoted text of the mail varies with email clients and languages.

The following specifications are supported:

  • Email Clients:   Gmail, Outlook, Yahoo, Mac Mail, Hotmail, Android
  • Language:       English (United States)

Support for other email client providers and languages can be added by configuring email client providers through the configuration manager.

An administrator can configure this behavior, which is illustrated in the following diagram:
 

file

To enable this functionality, the following configurations are required:

  1. Configure the Email Notification Channel.


    The default value for the from-email address is set to cq5@acme.com. To configure the from-email address, add a sling:OsgiConfig node to the repository. Use the following procedure to add the node directly using CRXDE Lite:

    • In CRXDE Lite, add a folder named config below your application folder.
    • In the config folder, add a node named com.day.cq.wcm.notification.email.impl.EmailChannel of type sling:OsgiConfig.
    • Add a String property to the node named email.from. For the value, specify the email address that you want to use.
    • Click Save All.
  2. Caution

    The Feed Importer will fail to import mails with SSL connection when using IBM Java. The following exception will appear in the log: javax.mail.MessagingException. Use the following property to resolve the issue: "-DisUseIBMSSLSocketFactory=false".

    There is another known issue that occurs only with the POP3 protocol: if you set an exchange server email account for the feed importer, the polling goes into an infinite loop and the same message is posted multiple times on the topic. To resolve this issue, set the feed importer with IMAP.

     

    Note

    The feed importer can be configured on both author and publish instances.

    Note that Import to Path (the path where the imported emails would be stored) must be set to the /content/mailFolder/postEmails location.

    Ensure that the /content/mailFolder/postEmails path exists. Alternatively, you can create mailFolder and postEmails nodes of the nt:unstructured type in the required hierarchical manner.

    Note that the email.from address in the email notification channel should be same the mail account that is set in the feed importer to be polled.

  3. Configure Adobe CQ Social Collaboration Forum Notification Email Builder:

    • Enable Create post from reply email
    • Click Save

     

    file

Note

The Post Creation feature can be enabled or disabled by activating or deactivating the EmailPostReceivedEventListener component.

Usage

To test your configuration, perform the following procedure:

  1. Register a user.
  2. Login with the registered user on geometrixx-outdoors.
  3. Go to any community and join.
  4. Go to any forum topic within that community.
  5. Subscribe to the topic.
  6. Comment on the topic from the UI. You will receive an email notification for that comment.
  7. Reply to the notification email with a comment to be added to the forum topic.
  8. Wait for 5 minutes.
  9. The comment should be automatically posted to the forum.

Error Handling

If any error occurs during post creation from an email, an error message is logged in error.log and the email is persisted in the repository. The following are common errors that occur:

  • The email received lacks the relevant data required to create a post
  • No suitable email client provider can be found
  • No user can be located with the email ID in the From: header

Limitations

The following limitations apply to the current release:

  • Attachments in mail are not considered as post data.

Additional Configuration Options for Forum Post Creation from Inbound Mail

Adobe CQ Social Collaboration Comment Email Reply Service

You can configure the following properties in the Adobe CQ Social Collaboration Comment Email Reply Service:

  • Add topic ID to header: Determines whether to add a unique topic ID to the Subject or Reply-To field.
  • Topic ID prefix in subject: Configures the prefix to the topic ID used when it is added to the subject.
  • Maximum length of subject:  Configures the maximum length of the subject, exclusing the topic ID, after which it will be trimmed. It is recommended that you assign the minimum possible value to this to prevent the loss of topic ID information.
  • Reply-to Delimiter: Characters used as delimiters between the reply-to address and the topic ID, when the reply-to implementation is chosen.

 

Note

The Topic ID is a hash value generated from the root path in the repository where the topic data is stored. Every topic is assigned a hash value as a property when the first comment is posted. It helps to track the topic to which new post is to be added.


By default, the Topic ID is added to the Subject line of the post notification email.

Format of Subject: [CQ Forum] <topic_title> [topic#<topic unique id>]

The Topic ID can be added to Reply-to: field of the notification email as well.

Format of Reply-to field: <email id>+<topic unique id>@domain

Adobe CQ Social Collaboration Email Client Provider

You can also configure the Adobe CQ Social Collaboration Email Client Provider. We provide you with Android, Gmail, Hotmail, MacMail, Outlook, and Yahoo email service providers with English language (United States):

  • Priority Rank: Defines a deterministic ordering between different client providers to be picked for parsing reply emails. If one client is unable to parse, others with priority integral values will be tried.
  • Quoted Text Patterns: Specifies an ordered list of patterns of the beginning of quoted text in reply emails. Some default values are provided for different providers.

You can also define a new email client provider by configuring the Adobe CQ Social Collaboration Email Client Provider - Custom.

 

Adobe CQ Social Collaboration Email Quoted Text Patterns

In addition to configuring email client providers, you can view and configure the definitions of the most commonly used patterns required to build complex quoted email text patterns. Each configurable pattern is referenced with a property name enclosed within two % symbols.

Adobe CQ Social Collaboration Forum Saved Email Processing Task

Emails that fail to create posts are saved in the repository so they can be processed later. A scheduler task processes these emails at scheduled intervals. It looks for emails with processingStatus='failure'. It runs once a day and deletes all failed emails.

  • Scheduler expression: A scheduler expression to process the e-mails that failed to create posts.
  • Imported Mail Root Paths: A list of repository paths where email nodes are saved.

Adobe CQ Social Collaboration Forum Notification Email Post Listener

The following properties can be configured for this service:

  • Enable Reverse Replication: Defines whether the comment should be reverse-replicated.
  • Imported Mail Root Path: Location of imported e-mail in JCR repository
  • Post original on failure: If enabled, the original reply email content will be posted when none of the available client providers could parse it.

Post Creation feature can be enabled or disabled by activating or deactivating the EmailPostReceivedEventListener component.

Adobe CQ Social Collaboration Forum Notification Email Builder

The following properties can be configured for this service:

  • Email as HTML: If enabled, the Content-Type of the email will be set to "text/html;charset=utf-8".
  • Email template root path: The email is built using the template stored at this root path.
  • Host prefix: The forum URL sent in the email will be prefixed by this host name.
  • Create post from reply email: If enabled, a topic tracker ID is added to the subject or reply-to header of the notification email

Note

By default, when a user replies to a forum post, the email message notification contains "This is an automatically generated message. Please do not reply." However, if this feature is enabled and the user replies, that reply is added to the posts.

These messages are stored in the default template file for email builders. These template files can be overridden to customize the messages.

 

 

Forum Digest Email Notifications

Users may subscribe to and receive digest email for any forum topic. The digest types available are daily, weekly, fortnightly, and monthly. Posts modified or created during the digest period are collected and sent in an email. Rather than receiving email notification for each post, now user receives digest of posts created during digest period.

Prerequisites

  1. The user must have a valid email address defined in his profile.
  2. The Day CQ Mail Service must be properly configured.

Digest Subscription

The user can switch to digest subscription for a forum topic by selecting the appropriate digest type from the drop-down and clicking Change:

file

The default implementation is provided by the ForumDigestSubscriptionService service. The following workflows are triggered for subscription and unsubscription:

  •        Subscription:      /etc/workflow/models/social/forum_topic_digest_subscription/
  •        Unsubscription : /etc/workflow/models/social/forum_topic_digest_unsubscription

Adobe CQ Social Collaboration Digest Task

There are configurations available for all type of digests:  daily, weekly, fortnightly, and monthly. The administrator can configure the quartz scheduler expression to determine when these tasks will be run and the maximum number of posts contained in the digest mail:

  • Quartz scheduler expression: Scheduler expression for when the task will be executed.
  • Maximum size: The maximum number of messages to be included in a digest email.

Adobe CQ Social Collaboration Forum Digest Email Builder

The following properties can be configured for this service:

  • Email as HTML: If enabled, the Content-Type of the email will be set to "text/html;charset=utf-8".
  • Email template root path: The email is built using the template stored at this root path.
  • Host prefix: The forum URL sent in the email will be prefixed by this host name.
  • Digest template root path: The absolute root path of the digest template.

Note

It is recommended that you run the digest service on the author instance only, and disable the com.adobe.cq.social.forum.impl.ForumDigestService component on all the publish nodes.

Teaser

A Teaser is a piece of content (usually an image) displayed on a main page to "tease" users into accessing the underlying content, which is defined as a campaign.

You can define the campaign that the teaser should lead to:

file

The teaser then displays the defined text and image:

file

Video

The Video Component allows you to place a predefined, "out-of-the-box" video element on a page. (Note that for proper transcoding to occur, you must install FFmpeg separately; see below.)

For creating a custom video element, see Installing and configuring Video Transcoder with FFmpeg.

If you drag and drop the Video Component from the sidekick to a region on a page, then doubleclick the component, a dialog will appear:

file

To configure the component, drag a video asset onto the drop zone (indicated by the dotted lines).

Note

Formats supported include .mp4, Ogg, and FLV (Flash video) formats.

The video's native size (width x height in pixels) will appear in the boxes next to Size (see above). Manually enter width and height dimensions here if you wish to override the video's native dimensions.

Click OK to dismiss the dialog.

Installing FFmpeg

The Video Component relies on the third-party open-source product FFmpeg for proper transcoding of videos that can be downloaded from http://ffmpeg.org/. After you install FFmpeg, you must configure CQ to use a specific audio codec and runtime options.

On Windows:

1. Download compiled binary as ffmpeg.zip

2. Unzip to a folder

3. Set system environment variable PATH to <<your-ffmpeg-location>>\bin

4. Restart CQ

 

On Mac OS X:

1. Install Xcode  (http://developer.apple.com/technologies/tools/xcode.html)

2. Install X11 (see "Optional Installs" on the Snow Leopard DVD)

3. Install MacPorts (http://www.macports.org/)

4. Run sudo port install ffmpeg in the console and follow the instructions

Note that FFmpeg needs to be in PATH so CQ5 can pick it up via command line.

 

Using the precompiled version for OS X 10.6:

1. Dowload the precompiled version

2. Extract it to the /usr/local directory

3. From terminal, sudo ln -s /usr/local/Cellar/ffmpeg/0.6/bin/ffmpeg /usr/bin/ffmpeg

Use the following procedure to configure CQ:

  1. Open CRXDE Lite in your web browser. (http://localhost:4502/crx/de)

  2. Select the /etc/dam/video/hq/jcr:content node and ensure the node properties are as follows:

    audioCodec:

    alac

    customArgs: 

    -flags +loop -me_method umh -g 250 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -bf 16 -b_strategy 1 -i_qfactor 0.71 -cmp +chroma -subq 8 -me_range 16 -coder 1 -sc_threshold 40 -b-pyramid normal -wpredp 2 -mixed-refs 1 -8x8dct 1 -fast-pskip 1 -keyint_min 25 -refs 4 -trellis 1 -direct-pred 3 -partitions i8x8,i4x4,p8x8,b8x8

  3. If you changed either of the properties, click Save All.

OpenSocial Gadget

The OpenSocial Gadget component lets authors add OpenSocial gadgets to the page, like for example the Google Translate gadget. It replaces the My Gadgets component that was available until CQ 5.4.

To add an OpenSocial gadget to your page:

  1. In your browser, open the page in edit mode.
  2. Enable the OpenSocial Gadget component.
    Note: it belongs to the Personalization group.
  3. Add the component to your page.
  4. Open the configuration dialog and add the gadget URL. For example, for the Google Translate gadget:
    http://www.google.com/ig/modules/dictionary.xml
  5. Click OK to save the changes.

The Google Translate gadget looks as follows on the page:

file

You can click the toggle link to hide the gadget.

User Preferences

The OpenSocial Gadget component supports user preferences if required by the gadget, that is when the gadget xml contains the <Require feature="setprefs"/> tag. When a user is logged in, his gadget settings are persisted in a node in the repository. This node:

  • Is created in the home folder of the logged in user below preferences/personalization/gadgets.
  • Is named with the UUID of the gadget content node.
  • Has properties that map the gadget configuration properties. For example, for the Google Translate gadget, the source and the target languages are mapped to the sl and tl properties in the repository.    
  • Is used to display the gadget on the page with the user preferences of the logged in user.

Your comments are welcome!
Did you notice a way we could improve the documentation on this page?
Please leave your comments below and we will make the appropriate changes.

COMMENTS

  • By Dave Moloney - 11:07 AM on Dec 13, 2013   Reply
    While FFmpeg is provided as open-source, it also mentions on its 'Legal' page that its use in a commercial product may be in violation of MPEG-LA patents (http://ffmpeg.org/legal.html):

    Q: Is it perfectly alright to incorporate the whole FFmpeg core into my own commercial product?

    A: You might have a problem here. There have been cases where companies have used FFmpeg in their products. These companies found out that
    once you start trying to make money from patented technologies, the owners of the patents will come after their licensing fees. Notably, MPEG LA
    is vigilant and diligent about collecting for MPEG-related technologies.

    Further, on a LibreVideo blog from 2010 (http://www.librevideo.org/blog/2010/06/14/mpeg-la-answers-some-questions-about-avch-264-licensing/), a member of MPEG-LA's licensing team, in correspondence with the blog's author, notes:

    Unfortunately, the provider of FFMPEG AVC encoders/decoders has not concluded the AVC License with MPEG LA or paid the applicable royalties.
    As a result, ffmpeg is not licensed.

    While MPEG LA is not in a position to provide any technical guidance or legal advice, our only suggestion would be that you choose a product from a
    licensed supplier (or insist that the supplier you use become licensed).

    As a supplier of an end product, could you provide some clarity around whether a CQ/AEM licence provides any cover for royalties against use of the h.264 codec to transcode via FFmpeg, or the provision of files created with this codec? Or if this isn't covered, could you at least update the documentation to note that there is some ambiguity around the legal situation when using FFmpeg to create mp4/h.264 videos on a site. I'm no legal expert & would appreciate guidance (or even clarity) on the above.

    Thanks
    Dave





    ADD A COMMENT

     

    In order to post a comment, you need to sign-in.

    Note: Customers with DayCare user accounts need to create a new account for use on day.com.

    ***