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: Adobe Experience Manager 6.0  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

Providing a means for your site visitors and community members to add comments is a standard method of collecting feedback about how they perceive and value specific products and services.

Often, instead of the Comments component being left to authors to add to a page, a Comment component is designed into the page template.

Geometrixx Outdoors Example

To see an example of the Comments component in use, browse to the Hiking Community page for Geometrixx Outdoors.  On the publish instance, browse to http://localhost:4503/content/geometrixx-outdoors/en/community/hiking.html.

To view the default commenting feature, which displays avatars in the headers, browse to: http://localhost:4502/content/geometrixx-outdoors/en/comments.html and enter some comments on the page.

For information on overlaying and extending comments, see Client Side Rendering.
 

 

Add a Comment to a Page

To add a Comments component to a page, such as a test page on the author instance, locate the component in the Sidekick and drag it onto the page to a position relative to the feature for which you'd like to enable comments or simply at the bottom of the page.

To create a test page, use the Website Admin to select a location, such as

  • http://localhost:4502/siteadmin#/content/geometrixx-outdoors/en
  • create a new page to demo the comments component:
    • Select New... > New Page...
    • in the Title field, enter My Comments
    • in the Name field, enter mycomments
    • select a page template or leave the default template selected
  • double click on the new page "My Comments" in the Website Admin to launch:
    • http://localhost:4502/cf#/content/geometrixx-outdoors/en/mycomments.html

 

The Comments component is available in the Social Collaboration component group in the Sidekick.

Note

If the Social Collaboration group is not yet available in the Sidekick:

  • click on the ruler icon in the Sidekick to enter Design Mode
  • click Edit for a design element, such as Design of par, to pop-up an edit dialog
  • in the list of Allowed Components, check the box for the Social Collaboration group
  • click OK
  • the Social Collaboration group should now appear in the Sidekick

 

Configure the Added Comment

When you double click on the placed Comments component, an edit dialog with three tab pops up. 

Under the first tab, the Comments tab, you can provide a default message, control the appearance, and control what user generated content may appear.

 

file
  • Default message
    (Optional) Enter a message to encourage the visitor to leave a comment and possibly indicate what sort of information you are hoping for; the message will disappear as soon as the visitor clicks in the comment field.
  • Signed In Text
    (Optional) Text to display at the top of the component indicating the currently signed in user.
  • Allow replies
    If checked, allows visitors to reply to existing comments.
  • Display as tree
    If checked, replies will be displayed in a tree format.
  • Moderated
    If checked, user generated comments must be moderated before they are displayed on the publish instance.
  • Closed
    If checked, no new comments may be added.
  • Allow File Uploads
    If checked, the user may upload a file along with their text post.
  • Max File Size
    If "Allow File Uploads" is checked, this value will limit the uploaded file size.  The default limit is 104857600 (10 Mb).
  • Allowed File Types
    (Optional) A comma separated list of file extensions with the "dot", e.g., .jpg, .jpeg, .png, .doc, .docx, .pdf.  If any file types are specifed, then those not specified will not be allowed.  The default is none specified such that all file types are allowed.
  • Rich Text Editor
    If checked, comments may be entered with markup.
  • Allow Users to Delete Comments
    If checked, a user may delete their own comment.

Under the Date Format tab, you specify how the comment's publish date is to be displayed.

file
  • Date format
    (Optional) The format used to display the comment's publish date.

Under the Forms tab, you select a form which the visitor will use to enter their comment.

file
  • Edit Comment Form
    (Optional) Browse to a form developed and stored in CQ.  See Developing Forms.

Test Posting a Comment

Once a page is activated on which a Comments component has been placed, a Comment can be posted on the publish instance with the following steps:

  1. On the author instance, add a comment to an existing page, or add a new page, and configure it.

    To create a new page :

  2. On the publish instance: open the corresponding page.
     

  3. Post a comment. It appears on the page (unless Moderated was activated).

  4. On the author instance: refresh the page to display the comment on that page too.

  5. If the comment is moderated, do so and observe what happens on the author and publish instances.

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

You can add a Rating component to a page so users can provide feedback for that page. For example, if the page features a product, users can rate the product using 0 to 5 stars. To see such an example, navigate to http://localhost:4502/content/geometrixx-outdoors/en/women/shirts/bora-bora.html in your CQ instance:

file

In this example, the page shows the average of all ratings that have been submitted. Each user can submit one rating for a page, and the page will show the average of the submitted ratings.

Click on the Reviews tab at the bottom of the page. You will see that you can add a rating of your own, along with a comment:

file

When you add the Rating component to a page, you can configure it to show the results of ratings already submitted to the page, or you can configure it to allow users to submit a rating. To add a Rating component, edit the par for the page and ensure the Rating component is selected in the Social Collaboration section. Then you will see the component available in the Sidekick:

file

To experiment with this, add a Rating component to the page, and edit to view the configuration:

file
  • Tally Name
    (Required) the name for this instance of a rating component
  • Ratings Title
    (Required) the title to display above the rating on the page
  • Display Only
    When unchecked, signed-in members may submit a rating by clicking on the highest star rating they choose.  When checked, this rating will only display the average of the ratings already submitted and closes the rating to other members.  Default is unchecked.
file

There is an API associated with the Rating component, allowing you to access information such as the responses submitted and the average. For more information, see com.adobe.cq.social.tally.RatingComponent in the Javadocs. You can also see examples of the usage of the API in CRXDE Lite: navigate to /apps/geometrixx-outdoors/components/reviews/reviews.jsp.  

file

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.

Accessing Forum Components

The Forum components are included in the Social Collaboration group in the component browser (sidekick).  There Forum components are :

  • Forum
    The form framework, including topics and posts, which may be added to any page.
  • Forum Search
    A search component which may be tailored to specific forums.
  • Forum Toggle
    Forum Toggle can be configured to allow members to subscribe and unsubscribe to a Topic.  It is a User State Toggle Button intended to use the state provider un-/Subscribe Forum Topic.  For usage, see User State Toggle Button.

Forum

The Forum component is a simple means of adding the ability for community members to interact with one another by creating a topic and posting replies.  

The Forum component includes the components for Topics and Posts (comments), all of which can be customized.

While the Forum is added as page content, the Topics and Posts are user generated content (UGC), and thus stored separately.

To add a Forum to a page, locate the Forum component in the Social Collaboration group in the component browser and drag it into the desired position on the page.

To configure the forum, open the newly placed component for edit.  The dialog contains three tabs : 

 

file

Using the Settings tab, configure the appearance of the forum and allowed user generated content : 

  • Topics Per Page
    Defines the number of topics/posts shown per page.  Default is 25.
  • Moderated
    If checked, posts of topics must be approved before they will appear on a publish site.  Default is unchecked.
  • Closed
    If checked, the forum is closed to new topic posts and replies.  Default is unchecked.
  • Feed Enabled
    If checked, the forum is accessible to RSS feeds.  Default is checked.
  • Rich Text Editor
    If checked, posts may be entered with markup.  Default is unchecked.
  • Allow File Uploads
    If checked, allow file attachments to the post.  Default is unchecked.
  • Max File Size
    Relevant only if Allow File Uploads is checked.  this field will limit the size (in bytes) of an uploaded file.  Default is 104857600 (10 Mb).
  • Allowed File Types
    Relevant only if Allow File Uploads is checked.  A comma separated list of file extensions with the "dot" separater.  For example : .jpg, .jpeg, .png, .doc, .docx, .pdf.  If any file types are specifed, then those not specified will not be allowed.  Default is none specified such that all file types are allowed.
  • Max Attach Image File Size
    Maximum number of bytes an attached image file may have.  Default is 2097152 (2 Mb).
  • Allow Threaded Replies
    If checked, allow replies to posts.  Default is unchecked.
  • Allow Users to Delete Comments and Topics
    If checked, allow members to delete the comments and topics they posted.  Default is unchecked.
  • Post Sort Date Descending
    If checked, posts are sorted by date from most recent date to oldest date.  Default is unchecked.
  • Topic Sort Date Ascending
    If checked, topics are sorted by date from oldest date to most recent date.  Default is unchecked.
 

Using the Forms tab, specify the resource type of a custom form to be used when entering a Topic or Post (comment).

  • Edit Topic
    the resource type of the form to be used to edit a topic.
  • Edit Comment
    the resource type of the form to be used to edit a reply.

Using the Texts tab, customize the text to display in specific circumstances. All text values are optional.

  • Empty Text
    Text to display in the input field, which disappears as soon as the user clicks into the field to write.
  • No Topics Text
    Text to display if the forum does not yet have any topics (is 'empty').
  • Topic Not Found Text
    Text to diisplay if a requested topic cannot be found.
  • Forum Closed Text
    Text to display, in place of the input form, if the forum is closed to new topic posts and replies.
  • Forum No Permission Text
    Text to display when the site visitor is not signed in or the signed-in member does not have permission to create new topics. For instance a link to the login page could be entered.

 

By switching from Edit Mode to Design Mode (the Sidekick ruler icon), the Design of forum Edit allows the Resource Types of the forum topic and forum post to be specified as customized components.

file

Forum Search

The Forum Search component may be placed on any page and the results will be presented on the same page.

The Forum Search component provides site visitors with more selection options:

file

To add a Forum Search to a page, locate the Forum Search component in the Social Collaboration group in the component browser and drag it into the desired position on the page.

To configure the Forum Search, open the newly placed component for edit.  The dialog contains two tabs : 

 

file

Using the Search Settings tab, configure the forums to include in the search and the number of results to display : 

  • Forum Paths
    Restrict the paths to be searched. If no paths specified, all forums are searched.  To select a forum, after clicking Add Item, browse to the forum component which has been placed.  As an example : 
    • /content/geometrixx-media/en/community/jcr:content/grid-8-par/forum
  • Results Per Page
    Specify the number of results to be shown on each page.  Default is 10.

Using the Search Texts tab, customize the text to display in specific circumstances.  All text values are optional.

file
  • Search Button Text
    Enter a label for the search button. Default is "Search...".
  • One Result Text
    Enter the text to display if only one match is found. Default is "Your search matched one post.".
  • Results Text
    Enter the text to display when more than one match was found. The text may include place holders for values that will be substituted for the actual search results.
    • {0} = search term
    • {1} = number of posts matched
    • {2} = query time in seconds
    • {3} = start of displayed result range
    • {4} = end of displayed result range

    Placeholders {3} and {4} are useful when number of posts matched exceeds the Results Per Page setting.
    Default is "Your search for {0} matched {1} posts in {2}s. Displaying results {3} to {4}."
  • No Results Text
    Enter the text to display when no matches were found. Default is "No topics or posts match your query.".

Forum Topic

When a new topic is created (typically on the publish instance) a new instance of the Forum Topic component is created and reverse replicated to the author instance, where Edit Mode moderation actions can be peformed.  To locate Topics, start from the Communities console.  For more information, visit Moderating User Generated Content.

On the author instance, Edit Mode is entered by double-clicking the Topic.

file
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

When a reply to a topic is posted (typically on the publish instance) a new instance of the Forum Post component is created and reverse replicated to the author instance, where Edit Mode moderation actions can be peformed.  To locate Posts, start from the Communities console.  For more information, visit Moderating User Generated Content.

On the author instance, Edit Mode is entered by double-clicking the post.

file
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

For proper transcoding, install FFmpeg separately.

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.

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.

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: FFmpeg should be present in PATH so CQ5 can pick it up through the command line.

Debian

  1. Add the deb-multimedia repository to the /etc/apt/sources.list configuration file.
    deb http://www.deb-multimedia.org stable main non-free
  2. Enter the following commands in the command line:

apt-get update
apt-get install deb-multimedia-keyring
apt-get update
apt-get install ffmpeg

RHEL 6

There is no known repository that offers ffmpeg for RHEL 6 distribution with the required options. Therefore, ffmpeg should be compiled. The recommended method is to use dependencies from standard repositories as much as possible and create the missing packages manually.

You can compile and create the packages in one VM with configuration similar to the servers. This approach lets you upgrade all the libraries from the repositories for bug or security fixes.

To install precompiled packages, use EPEL and ATRPMS stable repositories to provide dependencies.

Run the following command: 

wget http://mirror.switch.ch/ftp/mirror/epel/6/i386/epel-release-6-8.noarch.rpmrpm -i epel-release-6-8.noarch.rpmrpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms

Create the configuration file /etc/yum.repos.d/atrpms.repo:

[atrpms]

name=Fedora Core $releasever - $basearch - ATrpms

baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/stable

gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms

gpgcheck=1

enabled=1

Install ffmpeg to ensure that the required dependencies are installed properly.

yum install ffmpeg

The ffmpeg package and related libraries should now be upgraded with the compiled versions.

The attached el6-ffmpeg-rpms.tar.gz file contains all the files that are installed in Jenkins infrastructure.

Install the vo-aacenc lib package by running the rpm -i command and update other packages using the rpm -U command.

CentOS 6

You should perform the installation process on a different machine/VM to avoid installing extra packages in the servers. The ffmpeg packages available at atrpms.net are used as a base and are modified appropriately.

To add the extra repositories and install the dependencies, use EPEL and ATRPMS stable repositories to provide dependencies. Run the following command:

wget http://mirror.switch.ch/ftp/mirror/epel/6/i386/epel-release-6-8.noarch.rpmrpm -i epel-release-6-8.noarch.rpmrpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms

Create the configuration file /etc/yum.repos.d/atrpms.repo:

[atrpms]

name=Fedora Core $releasever - $basearch - ATrpms

baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/stable

gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms

gpgcheck=1

enabled=1

Install ffmpeg using the following command to ensure that the required dependencies are installed properly:

yum install ffmpeg

Run the following command to install the basic compilation tools:

yum install autoconf automake gcc gcc-c++ git libtool make nasm pkgconfig zlib-devel rpm-build  atrpms-rpm-config

Download and install the source rpm package of ffmpeg in atrpms.net:

http://packages.atrpms.net/dist/el6/ffmpeg/

That source package create an rpmbuild folder that contains the folders SOURCES and SPECS.

Inside the SOURCES folder, there is an ffmpeg tarball. The SPECS folder contains the file ffmpeg.spec, whihc is a recipe to compile and create the rpm package.

Before compiling ffmpeg, compile and install the vo-aacenc library files.

 

Precompiled package

1. Download 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.