Start page
Start page
Start page

Start page / Template development / WebEdit / Quick Edit

Quick Edit Available up to FirstSpirit Version 5.0

Quick Edit bar at page level

The "Quick Edit" function provides a fast and easy option for performing editorial changes and processes at page and section level.

At present the following operations are available to the editor at page level:

  • Create a new menu level
  • Create a new page
  • Create a new section
  • Edit the page in the Page Store
  • Start or forward workflow on the page reference
  • Edit the metadata of the page reference
  • Delete page
  • Help

Important Some of these functions are also provided by Easy-Edit. From FirstSpirit Version 5.0 the Quick Edit bar will no more be supported and replaced by Easy-Edit.

Quick Edit bar at section level

The operations at section level are:

  • Create a new section
  • Edit the section in the Page Store
  • Move section up by one position
  • Move section down by one position
  • Edit metadata of the section
  • Delete section
  • Help

Important From FirstSpirit Version 5.0 the Quick Edit bar will no more be supported and replaced by Easy-Edit.

Two steps are necessary to be able to use Quick Edit:

  1. general functions must be made available at page level,
  2. Quick Edit buttons must be integrated at page and section level.

Important For further information about the parameters described below see Chapter WebEdit format templates.

General functions of Quick Edit at page level

All pages of a WebEdit project which are to use the Quick Edit function must be modified. It is advisable to make the settings directly in the page templates. To this end, the general Quick Edit functions must be made available first in the WebEdit presentation channel. In addition to render format template WEBeditIncludeJS, the render format template WEBeditBarIncludeJS must also be added to the page templates between the opening and closing HTML head tag:

...
<html>
  <head>
    <title>Page template</title>
    $CMS_RENDER(template:"WEBeditIncludeJS")$
    $CMS_RENDER(template:"WEBeditBarIncludeJS")$
  </head>
  <body>
...

The render format template WEBeditBarIncludeJS does not require any additional parameters, just like WEBeditIncludeJS.

Quick Edit buttons

Quick Edit buttons can be integrated both on page and on section level. A render call must be added to the page or section template for a Quick Edit button:

$CMS_RENDER(template:"WEBeditQuickBar")$

Whether the page or section operation is displayed in Quick Edit depends on whether the render call is added in the page or section template.

Important ONLY ONE render call may take place for WEBeditQuickBar in a page or section template.

Hiding Quick Edit bar buttons

it is possible to hide certain buttons of the Quick Edit bar (at page level). At present, hiding the buttons using the attribute disableButtons is only possible for the "Create Page" and "Extras" buttons. These buttons are no longer displayed when the Quick Edit bar is opened.
The render call in the page template must be adjusted to hide the Quick Edit buttons:

Example of hiding the "Extras" button:

$CMS_RENDER(template:"WEBeditQuickBar",disableButtons:"extras")$

Example of hiding the "Create page" and "Extras" buttons:

$CMS_RENDER(template:"WEBeditQuickBar",disableButtons:"newpage,extras")$

Quick Edit bar

As the Quick Edit bar overlaps part of the content when it is dropped down and the space for dropping down in one direction can be smaller than the Quick Edit bar, the fold-out direction should be specified for the Quick Edit bar. The parameter for the fold-out direction is called barOrientation. The two possible values are „right“ (Quick Edit bar folds open to the right) and „left“ (Quick Edit bar folds out to the left). If the parameter is not specified the Quick Edit bar always folds out to the right.

$CMS_RENDER(template:"WEBeditQuickBar",barOrientation:"left")$

In addition to the orientation of the Quick Edit bar, the initial drop down behaviour can also be changed. The fold-out behaviour can be configured for exactly one Quick Edit bar on a page, i.e. for the page template and all section templates used. The name of the attribute is extended. Possible values are „true“ (initially dropped down) and „false“ (initially folded up). If the parameter is not specified the Quick Edit bar is initially folded up.

$CMS_RENDER(template:"WEBeditQuickBar",extended:"true")$

Highlighting page areas

If Quick Edit is used in a project, it is not always obvious that a Quick Edit button belongs to the section of a page. For example, a button can belong to the previous or following section. To visualise the affiliation for the editor, page areas or sections can be especially highlighted. There are two attributes for the highlighting highlightContainer and hightlightClass.

highlightContainer is used to specify a unique ID, which is assigned to an HTML tag whose content is to be highlighted. The system object #global can be used to output page-related information. The CMS variables

  • #global.id (ID of the node),
  • #global.page.id (ID of the page) and
  • #global.section.id (ID of the section)

can be used to generate a unique ID.

Important No “class" attributes may be defined for the HTML tag whose content is to be defined.

1st example: HTML tag whose content is to be highlighted:

<div>
  $CMS_VALUE(fr_st_text)$
</div>

could for example look like this after adding the "id" attribute:

<div id="hc$CMS_VALUE(#global.section.id)$">
  $CMS_VALUE(fr_st_text)$
</div>

2nd example: Specification of the ID in the render call of “WEBeditQuickBar”:

$CMS_RENDER(template:"WEBeditQuickBar")$

The call could, for example, look like this after adding the highlightContainer attribute:

$CMS_RENDER(template:"WEBeditQuickBar",highlightContainer:"hc" + #global.section.id)$

In the example, the content of the element with the ID "hc" + #global.section.id would be especially highlighted when the Quick Edit bar is opened.
The second attribute highlightClass can be used to specify a user-defined CSS class for highlighting. If the parameter highlightClass is not specified, the CSS class weHighlight is used, which has the following content:

.weHighlight{
  background-color:ffffd3 !important;
  border:1px solid #464600 !important;
}

A user-defined CSS class is specified as follows:

$CMS_RENDER(template:"WEBeditQuickBar",highlightContainer:"hc" + #global.section.id,highlightClass:"webEditHighlighting")$

The user-defined CSS class could, e.g. then look like this:

<style type="text/css">
  .webEditHighlighting {
    background-color:#008000 !important;
  }
</style>
Important B In the case of websites without tables, problems can occur in Internet Explorer if the CSS attribute „float“ is used. If the surrounding area has a width of 100% and if a border is to be added for highlighting, the layout collapses. In most cases it then helps to use another HTML tag or to reduce the width.

Workflow recommendations

In the Quick Edit bar the status the object has is determined during workflows. A differentiation is made between the following status values:

  • „new“,
  • "changed" and
  • „delete“

A workflow can be recommended for each status. The attributes for this are: wfNew (status „new“), wfChange (status „changed“) and wfDelete (status „delete“). The name of the workflow must be specified for the attributes, e.g. "Request Release".

In addition, immediate execution of the recommended workflow can be forced with the wfForce attribute. The possible values are „true“ and „false“ (default selection).

$CMS_RENDER(template:"WEBeditQuickBar",wfNew:"Request Release",wfForce:"true")$

A special workflow is required for dependent release of elements for new elements which were created using the Quick Edit functions "Create menu level" and "Create page". Such a workflow is not included in the WebEdit scope of supply as the configuration of such a workflow can differ greatly from project to project.

Print version | Page start

© 2005 - 2012 e-Spirit AG | All rights reserved. | Last change: 17.07.2009