WebClient functions

Supported input components

The following input components have been employed as part of WebClient 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 JavaClient by comparison (also refer to Limitations)!

Supported design elements

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

WebClient-specific functionality

WebClient allows template developers to control particular aspects of the WebClient user interface from a page preview.

In this case, click handler classes can be used in conjunction with FS_BUTTON type components and WebClient JavaScript API commands can be placed in HTML output channels.

FS_BUTTON handler classes

To help project developers implement complex applications in the preview area, WebClient 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 WebClient 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 WebClient JavaScript API offers many methods that can be used to control the client 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 WebClient 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 WebClient user interface. This includes querying or modifying the store element currently displayed in the preview, creating WebClient 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 WebClient 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 WebClient 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