Default Components

Overview of Components

CQ WCM comes with a variety of out-of-the-box components that provide comprehensive functionality for website authors. These components and their usage within the installed "Geometrixx" website are a reference on how to implement and use components.

The following section includes an overview of all default components as well as a description of each component item and examples of what the components look like in CQ5. 

Working with Components

When working with any components, you can add them either by double-clicking Drag components or assets here or dragging and dropping the component from the sidekick onto the page. Some default components are hidden from view and are usually only added by a developer. The procedure for adding these components is described in Developing Components.

List of available Components

The following components are included in the basic installation within the Geometrixx website. The table lists all components that are available from within the sidekick, when inserting a new component, all the components that are available in Design mode and other components that become available dependent on author. By default, every component available in the sidekick is also available in Design mode (Design of par).

The column Available indicates whether the component is available in:

  • Sidekick by default on a Geometrixx Content Page
  • Design mode; either with a dialog for configuration or in the (de)activation list Design of par
  • the functionality of another component

Note

If someone enables or adds a component, then additional components may become available in the sidekick. For those components, the "Section" column indicates where the components appear in the sidekick once activated.

Title Section Purpose Availability Equivalent in CQ4
Carousel General Displays area cycling through different content elements. Sidekick
Chart General Dynamic bar, line or pie chart created from raw data. Sidekick

Column Control

2 Columns

3 Columns

Columns

Mechanism for controlling and formatting columns.

2 and 3 Columns are the same component, but default to 2 and 3 columns respectively.

Sidekick columncontrol
Checked Password Field Form Requests password and confirmation of password. Sidekick
Comments Collaboration List of visitor comments. Sidekick
Download General Makes a file available for download by the website visitor. Sidekick download
Flash General Allows you to enter a flash movie. Sidekick
Form Form The start and end components required for a form definition. Sidekick
Form Address Field Form A complex field allowing the input of an international address. Sidekick forms
Form Captcha Form A field consisting of an alphanumeric word that refreshes automatically. The captcha component protects websites against bots. Sidekick
Form Checkbox Group Form Multiple items organized into a list and preceded by check boxes. Users can select multiple check boxes. Sidekick
Form Dropdown List Form Multiple items organized into a drop-down list. The Multi Selectable switch specifies if several elements can be selected from the list. Sidekick
Form End General Ends the form. Design Mode
Form File Upload Form An upload element that allows the user to upload a file to the server. Sidekick
Form Hidden Field Form This field is not displayed to the user. It can be used to transport a value to the client and back to the server. This field should have no constraints. Sidekick
Form Image Button Form An additional submit button for the form that is rendered as an image. Sidekick
Form Password Field Form Same as text field but only a single line is allowed and the text input from the user is not visible in the field. Sidekick
Form Radio Group Form Multiple items organized into a list preceded by a radio button. Users must select only one radio button. Sidekick
Form Submit Button Form An additional submit button for the form where the title is displayed as text on the button. Sidekick
Form Text Field Form Text field that allows users to enter information. Sidekick
Forum Other Provides the functionality for a forum. Sidekick
Forum Search Other Search through a forum. Sidekick
New Forum Action Create a new topic within the forum. Forum Component
Forum Topic An individual forum topic. Forum Component
Forum Post An individual post entry. Forum Component
Image General Displays an image, with a (short) description displayed below. Sidekick image
Inheritance Paragraph System (iparsys) N/A Is a paragraph system that also allows you to inherit the created paragraphs from the parent. Design Mode
List General Displays a configurable list of searched items. Sidekick generic list
Logo N/A Is a clickable image that points to another part of the site. Design Mode
Paragraph System (parsys) N/A Is a compound component that lets authors add components of different types to a page and contains all other paragraph components. Design Mode
parbase N/A Is a key component as it allows components to inherit attributes from other components, similar to subclasses in object oriented languages. Users do not need access to this component. Design Mode
Profile Avatar Photo Collaboration Allows input of an Avatar Photo. Sidekick
Profile Detailed Name Collaboration Input of name details, including elements such as title, middle name and suffix if required. Sidekick
Profile Display Name Collaboration Name to be displayed. Sidekick
Profile E-mail Collaboration Input of an e-mail address. Sidekick
Profile Gender Collaboration Allows input of the gender. Sidekick
Profile Primary Phonenumber Collaboration Allows input of a telephone number. Sidekick
Profile Primary URL Collaboration Allows input of a URL. Sidekick
Profile General Text property Collaboration Profile properties. Sidekick
Product List General Grid-oriented table that allows for input that can be imported and exported (such as in a catalog). Design Mode
Ratings Collaboration Visitor ratings. Sidekick
Reference General

A reference to content on another page.

This allows reuse of content without redundant copies of that content.

Reference is linked to the original content so that changes to the original are automatically reflected.

Sidekick
Search Other A search dialog with related search functionality. Sidekick search
Sitemap General A sitemap listing all pages. Sidekick
Slideshow General Dynamic slideshow that rotates through a set of selected images. Sidekick
Table General A table, with various formatting options. Sidekick table
Tag Cloud Other Here a selection of tags from within your website are shown graphically, based on the volume of user visits to the appropriate web pages. Sidekick
Teaser Other A piece of content (usually an image) displayed on a main page to "tease" users into accessing the underlying content. Sidekick
Text General A text item. Sidekick richtexteditor
Text Image General Text with an accompanying image displayed to either the left or right. Sidekick textimagejcr
Title General Title of the page (can be different from the page name). Sidekick
Toolbar N/A Appears at the bottom of the page and is a navigational tool. Design Mode
Topnav (Top navigation bar) N/A Appears at the top of the page and helps users navigate to the different content sections. Design Mode
Trail (Breadcrumb) N/A Appears at the top of the page and shows users the path they have taken down through the hierarchy. Design Mode
User State Toggle Button Collaboration Button to allow a user to change the state of a specific property in their profile. Sidekick
Video General Placing a video element on the page. Sidekick

Annotating Components in Edit Mode

Adding content to your website is often subject to discussions prior to it actually being published. To aid this, many components directly related to content (as opposed, for example, to layout) can be annotated.

A basic annotation places a colored sticky-note on the page, in this a user can leave comments and/or questions for other authors. In addition to text, annotations also have a sketch feature that allows you to add simple line graphics; these can be useful for highlighting an area of the page, or starting to illustrate a scenario in connection with the annotation text.

Note

The definition of an individual component determines whether annotation is possible, or not, on instances of that component.

Note

Annotations are only visible in Edit mode of the author environment.

They are not visible on a publish environment, nor in the Preview or Design modes on an author environment.

Depending on the paragraph design, annotation is either available as an option on the context menu (usually the right-hand mouse button when over the required paragraph), or as a button on the paragraph edit bar.

In either case select Annotate. A colored sticky-note annotation will be applied to the paragraph, you are immediately in edit mode, allowing you to add text directly:

file

You can move the annotation to a new position on the page. Click on the top border area, then hold and simultaneously drag the annotation to the new position. This can be anywhere on the page, though it is usually meaningful to keep it connected to the paragraph in some way.

Annotations (including related sketches) are also included in any copy, cut or delete actions carried out on the paragraph to which they are attached; for copy or cut actions, the position of the annotation (and related sketches) retain their position in relation to the originating paragraph.

The size of the annotation can also be increased, or decreased, by dragging the bottom right corner.

For tracking purposes the footer line will indicate the user who created the annotation and the date. Subsequent authors can edit the same annotation (footer will be updated), or create a new annotation for the same paragraph.

Confirmation will be requested when you select to delete the annotation (deleting an annotation also deletes any sketches attached to that annotation).

Caution

Deleting a paragraph deletes all the annotations and sketches attached to that paragraph (irrespective of their position on the page as a whole).

Note

Depending on your requirements you can also develop a workflow to send notifications when annotations are added, updated or deleted.

The three icons at top left allow you to minimize the annotation (together with any related sketches), change the color and add sketches.

Annotation Sketches

Note

Sketches are not available in Internet Explorer so:

  • the icon will not be shown.
  • existing sketches, created in another browser, will not be shown.

Sketches are a feature of annotations that allow you to create simple line graphics anywhere on the browser window (visible portion):

file
  • The cursor will change to a crosswire when you are in sketch mode. You can draw multiple distinct lines.
  • The sketch line reflects the annotation color and can be either:
    • freehand
      the default mode; finish by releasing the mouse button.
    • straight:
      hold down ALT and click the start and end points; finish with a double-click.
  • After you have exited sketch modus, you can click on a sketch line to select that sketch.
  • Move a sketch by selecting the sketch, then dragging it to the desired position.
  • A sketch overlays the content. This means that within the 4 corners of the sketch you cannot click on the underlying paragraph; for example, if you need to edit, or access a link. If this becomes an issue (for example, you have a sketch covering a large area of the page) then minimize the appropriate annotation, as this will also minimize all related sketches, giving you access to the underlying area.
  • To delete an individual sketch - select the required sketch, then press the Delete key (fn-backspace on a MAC).
  • If you move, or copy, a paragraph then any related annotations and their sketches will also be moved, or copied; their position in relation to the paragraph will remain the same.
  • If you delete an annotation all sketches attached to that annotation will be deleted too.

Standard Edit Mode Components

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 five categories:

  • 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.

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.

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

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
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

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.

file
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.

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

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 a page and paragraph and click OK.

The following example shows the Reference component used to reference a text element from another page:

file

Sitemap

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

file

 If required you can edit this component:

file
Title

  • Title when displaying the sitemap.

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 the use of the table component, with the design controled by a site design's custom CSS definitions.:

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 following example shows the Text component used in Geometrixx:

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

  • Enter the title of 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/or 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, 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.

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, with the design controled by a site design's custom CSS definitions.

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 that 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.

Column Control

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

The additional components 2 Columns and 3 Columns default to the appropriate number of columns for ease of use.

file

Two (2) Columns

A Column Control component that defaults to 2 equal columns.

Three (3) Columns

A Column Control component that defaults to 3 equal columns.

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

Form components are used to create forms for visitors to submit input. They 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 relate to visitor profiles used for social collaboration and other areas where visitor personalization is required. 

The following example shows an example form in Geometrixx. It is comprised of the Form component (start and end), with two Form Text Fields, and also one general Text field used for the lead-in text.

file

Common Form Fields

Although each of the form elements have different purposes, many are composed of one or more of the following options:

Title and Text

  •  Includes basic information, such as the title of the form and any accompanying text.

Initial Values

  •  Includes a default value if specified and the load path.

Constraints

  • Indicates whether a field is required and what constraints are on that field (for example, must be numeric, and so on).

Size

  • Indicates the size of the fields.

The fields you see vary widely depending on the element. Not all options are available to all components.

Title and Text

file
Element Name

Name of the form element.

This is a required field and should only contain the following characters:

  • alphanumeric characters
  • _ . / : -

Title

  • Changes the default title of the element.

Description

  • Provide additional information, if necessary. This description does not display in the form. Use it as help text for the user.

Initial Values

file

Default Value

  • The values displayed by default in this field.

Constraints

The constraints are appropriate to the individual component, but can indicate whether:

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

Size

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

  • columns and row
  • dimensions in pixels
file

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

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

Form Component

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

file

In between those two paragraphs, you add form fields that contain the actual input fields for users.

Start of Form

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

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 executed with the submitted data from the user. The default action is the Store Content action.

Selecting an action determines which form action is triggered (similar to "action=" in HTML) Action types include the following (though they may have been extended with customized actions in your CQ instance):

  • Mail: Sends the form contents to an email address that you specify.
  • Newsletter: Use if the form is used for newsletter registration.
  • Profile Update: Updates the profile.
  • Reset Password: Use if the form is used for password reset requests.
  • Create and Update Account: Creates and/or updates the account details.
  • Store Content: Stores the contents of the form into the repository at the given path. Therefore the content path field should contain a path in the repository. The path should end with "/" which means that for each form post a new node is created at the given location (example: /forms/feedback/)

Form Identifier

  • Use the form identifier if several forms are used on a single page. The form identifier can uniquely identify the form. If you have more than one form on a single page, make sure they have different identifiers.

Load Path

  • Is the path to node properties that is 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.

Client Validation

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

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 do either one of the following: 

  • Include a script for client validation in /[libs|apps]/myapp/form/xy/formclientvalidation.jsp
  • Include a script on the server side, add /[libs|apps]/myapp/form/xy/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 do the following after defining the validation resource type and including 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:

Create and Update Account

Initial Group

  • Group to assign the new user to.

Home

  •  Page to display upon successful login

ThankyouPage

  •  The page to be referenced for thanking the visitor for their input.

Mail

From

  •  Enter the email address that the email should come from.

Mailto

  •  Enter the email address of the person to send the form to.

Subject

  •  Enter the subject for the email.

RedirectURL

  • The redirect path points to a page that is invoked when a form is successfully submitted.
  • Newsletter - needs no action configuration.
  • Profile Update and Reset Password

Thank you Page

  •  The page to be referenced for thanking the visitor for their input.

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 post, a new node is created at the given location (for example, /forms/feedback/).

RedirectURL

  • The redirect path points to a page that is invoked when a form is successfully submitted.

ShowReport

  • Click this button to access the information about form results in the bulk editor. From here, you can export the information to an Excel .tsv (tab-separated) spreadsheet.

End of Form

This marks the end of the form and creates a Submit button. You can specify an additional Submit button identifier (which you need if you have several Submit buttons on the form), the title of the submit button, and an optional Reset button, including its title.

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:

file

Form 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.

Form 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:

file
Title

  •  A title for the component.

Description

  • A description.

Required

  • Indicates whether user input is required.

Required Message

  •  The message used to indicate to the user that input is required.

Invalid Captcha Message

  •  The message used to indicate to the user that the input was incorrect and therefore invalid.

Forms 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 buttons.

file

Form 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.

The Items Load Path can be used to access a list from a folder in the repository:

  1. Create a new sling folder (sling:Folder)
    for example, /etc/designs/<myDesign>/formlistvalues
  2. Add a new property (for example, myList) of type multi-value string (String[]) to contain the list of drop down items; content can also be imported using a script; for example, either a JSP script or curl in a shell script.
  3. Use the full path in the Items Load Path field:
    for example, /etc/designs/geometrixx/formlistvalues/myList
file

Then you can specify the default value:

file

Which will be selected when the list is first opened:

file

Form File Upload

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

file

Form Hidden Field

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

file

Form Image Button

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

file

Form Image Upload

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

file

Form 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.

Form Password Field

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

file

Form 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 buttons.

file

Form Submit Button

This component allows you to create a submit button, with your own text:

file

Form Text Field

Here you can configure a text field, of one or more lines, with your own lead in message:

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

This component allows the user to specify their gender, or indicate that they do not wish to disclose it.

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 Phonenumber

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

file

Profile Primary URL

This component allows the user to specify a URL. 

file

Other

Components in the Other section include the following:

  • 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.
  • Search: Lets you create a Search component.
  • Tag Clouds: Shows a graphical representation of tags within your web site.
  • 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 various texts that are 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 then 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.

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 after a search for the word geometrixx:

file

The following examples shows a search term that is misspelled and not available on the Geometrixx site:

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

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 video element on a page. (Note that for proper transcoding to occur, you must install FFmpeg separately; see below.)

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/.

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

 

Special Components

In addition to the standard components that authors can access through the sidekick, various components are used in Geometrixx. Although users cannot add or remove these components from the pages, you can use Design mode to edit various parameters. 

Note

Care must be taken when editing these components. The settings are often an integral part of the design of the entire website, so they should only be changed by someone with the appropriate experience.

Logo

The logo is a clickable image that points to another part of the site.

file
Parent Level (absolute)

Determines where the logo image points to; that is, when users click the logo, they go to the level indicated. In Geometrixx, if you enter 1, the logo link points to /content/geometrixx and if you enter 2, the logo link points to /content/geometrixx/en and so on.

Image Margin

 Sets the margin between the image and the remaining space.

Image

Drag an image to the logo image, then map, crop or rotate as required.

Product List

The product list component can do the following:

  • allow users to enter information in a grid-oriented table
  • import information from a .tsv (tab-separated) spreadsheet
  • export 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 a Product Listing component in Geometrixx:

file

Toolbar

The toolbar appears at the bottom of the page and is a navigational tool.

file
Parent Level (absolute)

Determines from what level the toolbar lists links to children pages. Looks for a child node named /toolbar.

The following example shows the toolbar in Geometrixx:

file

Topnav (Top navigation bar)

The top navigation bar appears at the top of the page and helps users navigate to the different content sections.

file
Parent Level (absolute)

Determines from what level the children get listed in the top navigation bar. In Geometrixx, if you enter 1, topnav renders a link to /content/geometrixx/en in the top navigation bar, the only child page of /content/geometrixx. If you enter 2, CQ displays all children of /content/geometrix/en (this is the default).

The following example shows the top navigation bar in Geometrixx:

file

Trail (Breadcrumb)

The breadcrumb trail appears at the top of the page and shows users the path they have taken down through the hierarchy. Links allows them to ascend the hierarchy on the same path.

file
Parent Level (absolute)

Determines from what level the children get listed in the trail. In Geometrixx, if you enter 1, trail renders a link to /content/geometrixx/en in the top navigation bar, the only child page of /content/geometrixx. If you enter 2, CQ displays all children of /content/geometrix/en (this is the default).

The following example shows a breadcrumb trail in Geometrixx:

file

Paragraph System (parsys)

The paragraph system (parsys) is a compound component that allows authors to add components of different types to a page and contains all other paragraph components. Each paragraph type is represented as a component. The paragraph system itself is also a component, which contains the other paragraph components.

You configure which components users see by making them available to the user in Design mode.

For example, the content of a product page may contain the following:

  • An image of the product (in the form of an image or textimage paragraph)
  • The product description (as a text paragraph)
  • A table with technical data (as a table paragraph)
  • A form users fill out (as a forms begin, forms element, and forms end paragraph)
file

List of components available for use...

See individual components.

Inheritance Paragraph System (iparsys)

The inherited paragraph system is a paragraph system that also allows you to inherit the created paragraphs from the parent. You add paragraphs to iparsys at for example, /content/geometrixx/en/products and as result, all the subpages of products that also have iparsys with the same name inherit the created paragraphs from the parent. On each level, you can add more paragraphs, which are then inherited by the children pages. You can also cancel paragraph inheritance at a level at any time.

file
Disable Inheritance

 If the selected, child pages do not inherit the paragraph of this page. 

The following example shows the iparsys component in Geometrixx:

file

parbase

Parbase is a key component as it allows components to inherit attributes from other components, similar to subclasses in object oriented languages such as Java, C++, and so on. For example, when you open the /libs/foundation/components/text node in the CRX Explorer, you see that it has a property named sling:resourceSuperType, which references the parbase component. The parbase here defines tree scripts to render images, titles, and so on, so that all components subclassed from this parbase can use this script.

Users do not need access to the parbase.