An author in WCM generates the material which will, at some point, be published to your website.
Working with WCM
- generate new content on an existing page
- edit existing content
- create new pages using predefined templates
- move, copy or delete pages
- activate (or deactivate) pages
- participate in workflows that control how changes are managed; for example. enforcing a review before publication
When ready the content is published to the publish environment. For a normal internet site, this is located inside the demilitarized zone; in other words, available to the internet, but no longer under the full protection of your internal network.
To optimize performance for visitors to your website, the dispatcher(s) implements load balancing and caching.
On the published website visitors can post comments related to the individual pages. Functionality for posting comments is developed within WEM and assigned to pages, either individually or by using templates.
Throughout WCM you can access the integrated version of this guide by using the icon; as seen here in the Sidekick.
WCM uses a web-based graphical user interface, so you need a web browser to access WCM. The graphical user interface is divided into various web-based consoles where you can access all of the WCM functionality:
|Websites||Access all the pages in your website; create, edit, and delete pages; start a workflow; activate and deactivate pages; restore pages; check external links; and access your user inbox.|
|Digital Assets||Manage digital assets.|
|Campaigns||Manage marketing campaigns.|
|Community||Moderate content from social network.|
|Inbox||Manage workflow inbox items.|
|Users||Manage users and permissions.|
|Tools||Manage packages, designs, importers, workflow templates and scripts, replication agents and upgrades.|
||Manage your tags and taxonomies.|
Although each of the consoles has different options, how you work within WCM is essentially the same:
- Double-click to open items.
- Access items from the tree list. Click + to expand and - to collapse those items.
- Click the icons to access other consoles.
- Available commands are above the items.
- Logging in and out is handled in the upper right corner.
- Collapse the sidebar by clicking the arrow.
- Search for pages using the search box.
As an author you will use the Websites tab to manage your content.
Place the root of your new website directly under the Websites/ node, as with the Geometrixx Demo Site.
Under this a hierarchical structure is developed by nesting the content pages. This will be used for generating the URLs.
Multi-language sites are also easy to construct, with the various languages being managed in parallel.
The Websites console lists your pages of content in a tree structure (left hand pane). For ease of navigation, sections of the tree structure can be expanded (+) or collapsed (-) as required.
A single click on the page name (in the left pane) will:
- List the child pages in the right pane
- Also expand the structure in the left pane.
For performance reasons this action is dependent on the number of children nodes. With a standard installation this method of expansion works when there are 30 or less child nodes.
A double click on the page name will also expand the tree, though as the page is opened at the same time this effect is not so obvious.
This default value (30) can be changed per console in your application specific configurations of the siteadmin widget:
- On the siteadmin node:
Set the value of the property:
- Or globally in the theme:
Set the value of:
See SiteAdmin in the CQ Widget API for more details.
|Title||The title that appears on the page|
|Name||The name CQ refers to the page|
|Published||Indicates whether the page has been published and provides the publication date and time.|
|Modified||Indicates whether the page has been modified and provides the modification date and time. In order to save any modifications, you must activate the page.|
|Status||Indicates the current status of the page, such as whether the page is part of a workflow or whether a page is currently locked.|
|Impressions||Shows the activity on a page in number of hits.|
|Template||Indicates the template that a page is based on.|
Each user has an inbox where he receives notifications which he subscribed for.
To subscribe to notifications:
Open the notification inbox: in the Websites console, click the user button in the top right corner and select Notification Inbox.
You can also hit http://<host>:<port>/libs/wcm/core/content/inbox.html in your browser.
Click Configure... in the top left corner to open the configuration dialog.
Select the notification channel:
- Inbox: notifications will be displayed in your CQ inbox.
- Email: notifications will be emailed to the email address defined in your user profile.
A few settings need to be configured in order to be notified by email. It is also possible to customize the email template or to add an email template for a new language. Please refer to Configuring Email Notification to configure email notifications in CQ.
Select the page actions for which to be notified:
- Activated: when a page has been activated.
- Deactivated: when a page has been deactivated.
- Deleted (syndication): when a page has been delete-replicated, i.e. when a delete action performed on a page is replicated.
When a page is deleted or moved, a delete action is automatically replicated: the page is deleted on the source instance where the delete action was performed and on the destination instance defined by the replication agents.
- Modified: when a page has been modified.
- Created: when a page has been created.
- Deleted: when a page has been deleted through the page delete action.
- Rolled out: when a page has been rolled out.
- Activated: when a page has been activated.
Define the paths of the pages for which you will be notified:
- Click Add to add a new row to the table.
- Click the Path table cell and enter the path, e.g. /content/docs.
- To be notified for all the pages belonging to the sub-tree, set Exact? to No.
To be only notified for actions on the page defined by the path, set Exact? to Yes.
- To allow the rule, set Rule to Allow. If set to Deny, the rule is denied but not removed and can be allowed later.
To remove a definition, select the row by clicking a table cell and click Delete.
Click OK to save the configuration.
If you have chosen to receive notifications in your CQ inbox, your inbox will fill up with notifications. For each notification that you select, you can:
- Approve it by clicking Approve: the value in the Read column is set to true.
- Delete it by clicking Delete.
Each user can set certain properties for themselves. This is available from the following menu in the top right corner of the Websites console:
Selecting Properties will open a dialog that allows you to set:
- Multiple Windows (Default)
Pages will be opened in a new window.
- Single Window
Pages will be opened in the current window.
Select whether you want to have the global editing toolbar shown:
- Show when needed (Default)
- Always show
- Keep Hidden
This toolbar (shown at the top of the browser window when you are editing a page) gives you Copy, Cut, Paste, Delete buttons for using with the paragraph components on that page.
In CQ, a template specifies a type of page.
It defines the structure of a page; including a thumbnail image, and other properties. For example, you may have a separate templates for product pages, sitemaps, and contact information. Templates are comprised of components.
CQ comes with several templates including a contentpage and home page.
|Home Page||homepage||geometrixx||The Geometrixx home page template.|
|Content Page||contentpage||geometrixx||The Geometrixx content page template.|
- In CRX Explorer, click the Search icon.
- In the Search window, clear the Search for and the Search in input boxes.
- As Type, select XPath.
- In the Query input field, enter following string:
- Click Search Now. The list is displayed in the result box.
The content page component creates a new page for content according to a template selected by the author.
The title displayed on the resulting web-page.
The label used when naming the page.
A list of templates available for use when generating the new page.
The following example illustrates use of the contentpage component:
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.
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.
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
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|
Mechanism for controlling and formatting columns.
2 and 3 Columns are the same component, but default to 2 and 3 columns respectively.
|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. Theswitch 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
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.
|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|
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.
The definition of an individual component determines whether annotation is possible, or not, on instances of that component.
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:
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).
Deleting a paragraph deletes all the annotations and sketches attached to that paragraph (irrespective of their position on the page as a whole).
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.
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):
- 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:
the default mode; finish by releasing the mouse button.
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.
Assets can be accessed from the Websites console, where the asset dialog is provided to manage certain properties of the assets.
To use the asset dialog:
- Open the Websites console.
- Navigate to the required folder under Digital Assets.
- Double-click on the asset to open the Asset Properties dialog. Here you can:
- Edit the asset
- Define a Title.
- Enter a Description
- Define Tags for the asset
(on required page)
|Open page in new window.
Note: this is operational if the User Properties are set to Single Window; if Multiple Windows then this is the default behavior.
|Content Window (Edit Mode) - Paragraphs||Shift-Click||Select multiple paragraphs.|
|Ctrl-Click||Select multiple paragraphs.|
|Ctrl-C||Copy selected paragraph(s).|
|Ctrl-X||Cut selected paragraph(s).Note: The cut paragraph will not disappear until it has been pasted to the new location.|
|Ctrl-V||Paste paragraphs from clipboard.|
|Alt-Ctrl-V||Paste as reference.|
|Del||Delete selected paragraph(s).|
|Backspace||Delete selected paragraph(s).|
|Alt-right-click||Force default (browser) context menu.|
|Rich Text Editor
|Page with a teaser component.||Ctrl-Alt-c||Shows the clickstream cloud: collection of page tags related to clicks that the user has made and used to focus the teaser.|
|Content Finder - Search box||down-arrow||Trigger a suggestions list. Needed when too few characters have been entered to trigger the list automatically (this happens when 2 or more characters have been entered).|
(on a suggested path)
|Select item and trigger suggestions for the selected path.|
(on a suggested path)
|Select item and trigger suggestions for its ancestors (as in siblings of parent).|
(on a suggested path)
|Select item and trigger search.|
|Esc||Close suggestions layer.|
|Drag assets, drop on destination||Alt+drag||The drop action produces a new paragraph; instead of replacing the asset in the destination.|
set in the URL.
|To see timing statistics for page loading.|