ContentCreator functions

Supported input components

The following input components have been employed as part of ContentCreator implementation (for more information refer to the particular chapter in the input components area).

When using input components, functions may deviate in their use in SiteArchitect by comparison (also refer to Limitations)!

Supported design elements

The following design elements in the form area have been employed as part of ContentCreator implementation (for more information, refer to the Design elements section):

ContentCreator-specific functionality

ContentCreator offers extended functionality that is not available in SiteArchitect. This functionality is geared towards editors or template developers and aims to provide a user-friendly unification of preview and user interface.

Multi-Perspective Preview

Multi-Perspective Preview (MPP) enables preview of a project web page from several perspectives which simulate a site visitor's view of the page. With this tool, it is possible to review content on dynamic web pages that react to device as well as time and user settings.

For example, the preview can temporarily be set to use the small viewport of a smartphone display so that the layout of page contents can be checked in this smaller view. Using a timeline, editors can view time-based content that is set to be visible starting at a future date as well as prior released versions of the page. A special template allows inclusion of project-specific parameters which can define visitor aspects such as user role or geolocation and thus affect which page content is displayed in the preview.

Documentation for template developers:
Using FirstSpirit APIs / JavaScript API / Preview

Multi-Perspective Preview

Multi-Perspective Preview (MPP) enables preview of a project web page from several perspectives which simulate a site visitor's view of the page. With this tool, it is possible to review content on dynamic web pages that react to device as well as time and user settings.

For example, the preview can temporarily be set to use the small viewport of a smartphone display so that the layout of page contents can be checked in this smaller view. Using a timeline, editors can view time-based content that is set to be visible starting at a future date as well as prior released versions of the page. A special template allows inclusion of project-specific parameters which can define visitor aspects such as user role or geolocation and thus affect which page content is displayed in the preview.

Documentation for template developers:
Using FirstSpirit APIs / JavaScript API / Preview

FS_BUTTON handler classes

To help project developers implement complex applications in the preview area, ContentCreator offers several internal Java classes that use specific, content-related functions in conjunction with the FS_BUTTON input component.

The following list of classes support use only in the onClick attributes of FS_BUTTON components. Drag-and-drop functionality is not supported.

Note: Within the form template, the FS_BUTTON handler classes can be added via the abbreviated form “class:ABBREVIATION” (e.g.: onClick="class:NewSection" instead of onClick="class:de.espirit.firstspirit.webedit.server.executables.NewSectionExecutable").

Creating a section (“NewSection”)

de.espirit.firstspirit.webedit.server.executables.NewSectionExecutable

Triggers the display of a list of section templates that are available in the defined context (by parameters) (page and content area). After the user selects one of these templates, an Edit dialog appears which the user can use to modify and save the content of the new section. If only one section template is available in the context, the Edit dialog will appear right away.

Example: adding a new section
The desired FS_BUTTON handler class (in this case: onClick="class:NewSection") is simply specified in the form template. The form template defines how the button is displayed (label, style, icon) and the action associated with the button (in this case: add section):

<FS_BUTTON
    name="pt_createSection"
    hidden="yes"
    icon="fs:new"
    onClick="class:NewSection"
    style="firstspirit"
    useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Create section"/>
      <LANGINFO lang="DE" label="Absatz anlegen"/>
    </LANGINFOS>
  </FS_BUTTON>

The relevant HTML code is rendered in the HTML output channel within a $CMS_VALUE(...)$ instruction via the fsbutton(...) function. To do this, the input component (in this case: “pt_createSection”) must be specified via the mandatory parameter editorName. Additional parameters specified are the page ID (#global.page.id) and the content area (in this case: “Content center”) (refer to the fsbutton(...) function for more examples).

<span$CMS_VALUE(
         fsbutton(
              editorName:"pt_createSection",
                   parameter:{
                             "page":#global.page.id,
                              "body":"Content center"
                           }
          )
)$></span>

Creating a page (“NewPageExecutable”)

de.espirit.firstspirit.webedit.server.executables.NewPageExecutable

This action triggers the display of the "New Page" dialog. All configurable settings for naming a page, defining where the page will be saved, selecting the appropriate template for the layout and possible content are available to the user.

Creating a data record (“NewContentExecutable”)

de.espirit.firstspirit.webedit.server.executables.NewContentExecutable

The "Create Data Record" action triggers the display of the "New Data Record" dialog, which is used for editing the content and then saving the new data record. The data record created in this action is based on the table template of the data source specified via the content2 parameter.

Editing menu navigation (“EditMenuExecutable”)

de.espirit.firstspirit.webedit.server.executables.EditMenuExecutable

This class executes the ContentCreator function "Edit Navigation" which is used to adapt the structure of the project (i.e., Site Store folders can be moved and their menu order can be adjusted). In addition, the dialog can be used to edit the menu name of the structure folders.

JavaScript API

The ContentCreator JavaScript API offers many methods that can be used to control the user interface. This makes it possible to trigger navigation to a desired page in the preview or to force the display of a report with a specific filter configuration.

The ContentCreator JavaScript API can be accessed in the HTM preview pages via the top.WE_API object.

Common
JavaScript object: top.WE_API.Common

The Common object provides methods that are generally related to the ContentCreator user interface. This includes querying or modifying the store element currently displayed in the preview, creating ContentCreator dialogs, and running project scripts or executables.

Documenting methods

Preview
JavaScript object: top.WE_API.Preview

The Preview object handles the task of updating the current preview or reloading a Document Object Model (DOM) element in the preview.

Documenting methods

Report
JavaScript object: top.WE_API.Report

The Report object methods can be used to control the report display and configuration. This makes it possible to trigger the display of specific reports and to use programs to reconfigure filter parameters.

The Report control can be used on reports contained in ContentCreator by default as well as reports that have been added via the FirstSpirit module.

Documenting methods

Dialog
returned by top.WE_API.Common.createDialog()

The Dialog object makes it possible to configure a dialog object created using top.WE_API.Common.createDialog(). The dialogs are displayed using the standard ContentCreator design, but the content is based on a Document Object Model (DOM) element that is defined using the setContent(Element element) method before the dialog is displayed.

Documenting methods

FSID
returned by top.WE_API.Common.getPreviewElement()

The object methods return information about a FirstSpirit store element that was obtained using top.WE_API.Common.getPreviewElement() or other API methods.

Documentation of methods