Start page / Template development / ContentCreator / Customization / Functions in the preview

Functions in the preview

Contents

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 (via so-called FS_BUTTON handler classes).

The classes listed below support use both in onClick and in onDrop attributes of FS_BUTTON components. For drag-and-drop to function, in the section or table templates which are to be used to create new content with drag-and drop, the Drop Editor combo box on the “Properties” tab of the corresponding template must be configured accordingly.

Important 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

A click action on the FS_BUTTON 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.

A drop action on the FS_BUTTON creates a new section if:

  • There is only one matching section template (must be approved for the corresponding content area and the drop object must be compatible with the Drop Editor) and
  • The new section to be created is not violating any rules that would prevent saving (scope="SAVE") and
  • There are no mandatory fields that have not been completed (e.g., parameter allowEmpty="no")

Otherwise, the list of available section templates or the edit dialog for the section is displayed.

Note: A new section can also be created through programming via the NewSectionOperation interface (de.espirit.firstspirit.webedit.server package, FirstSpirit Access API). Using the method preselectedLanguage a language can be selected, which is displayed to the editor as preconfigured language for editing when the form is opened. If no preselection is made, the language of the preview is displayed when editing. If a language is selected which is not configured in the project, an error message is given out.

Parameter

Description

page

ID or UID of the page
Defines the page on which the new section is to be added. The page template is included in calculating the section templates available in this action.
Sample values for the page parameter:

  • 527
  • “gca_common_header”
  • #global.page.id

body

Content area display name
Specifies the content area in which the new section is to be added. In connection with the page template, this information defines which section templates will be offered by this action.

store

Page Content store or Global Content
Use this optional parameter to define if the new section is to be created within a page of the Page store (value: pagestore) or within the Global Content (value: globalstore), for example:
... "store":"globalstore" ...
If this parameter is not specified, the Page Content store is considered as the target by default.

reload

Partial reload
This optional parameter is used to pass the ID of an HTML element that is to be loaded after a new section has been created. After a section has been created, the entire page is always reloaded by default. After a section has been created, the “reload” parameter is used to attempt to swap the specified HTML element only. In this context, the ID of an HTML element can be passed as follows:
WE_API.Preview.reload("container")
where "container" is the identifier of the element that is defined with
<div id="container">..

  

Example: Adding a new section (Page store)
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"
onDrop="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 template set inside 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”) (see 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 ("NewPage")

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

A click action triggers the display of the “Create 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.

A drop action on the FS_BUTTON also opens the “Create new page” dialog, if the dropped object is a FirstSpirit page or page reference. The following settings are made by default in the dialog:

  • Names: Language-dependent display names of the dropped page/page reference
  • Navigation: Create menu item under current page
  • Layout: Take layout and content from dropped page/page reference

These settings thus create a copy of the dropped page/page reference underneath the current page. However, they can be modified by the editor as necessary in this dialog.

Parameter

Description

none

  

Example:

<span$CMS_VALUE(
fsbutton(
editorName:"pt_createPage"
)
)$></span>

Creating a dataset ("NewContent")

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

A click action triggers the display of the “New dataset” dialog, which is used for editing the content and then saving the new dataset. The dataset created in this action is based on the table template of the data source specified via the content2 parameter.

A drop action on the FS_BUTTON creates a new dataset in the data source specified with the content2 parameter if:

  • a Drop Editor that is compatible with the drop object is configured in the underlying table template
  • the new dataset to be created is not violating any rules that would prevent saving (scope="SAVE") and
  • there are no mandatory fields that have not been completed (e.g., parameter allowEmpty="no")

Otherwise, the edit dialog for the new dataset to be created is displayed.

Parameter

Description

content2

ID or UID of a data source
Specifies a data source. The table template linked to this data source is used to create the dataset.

  

Example:

<span$CMS_VALUE(
fsbutton(
editorName:"pt_createDataset",
parameter:{
"content2":"products"
}
)
)$></span>

As an alternative, new datasets can be created in the Data sources view.

Create list entry ("NewListEntry")

de.espirit.firstspirit.webedit.server.executables.NewListEntryExecutable

This class is available for the following list input component types:

It is used to create a new entry in these input components.

A click action on the FS_BUTTON triggers the display of a list of templates that are available in the list input component defined by the editorId parameter. 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 template is available in the context, the Edit dialog will appear right away.

A drop action on the FS_BUTTON creates a new list entry if:

  • there is only one matching template (must be approved for the corresponding content area and the drop object must be compatible with the Drop Editor) and
  • the new list entry to be created is not violating any rules that would prevent saving (scope="SAVE") and
  • there are no mandatory fields that have not been completed (e.g., parameter allowEmpty="no")

Otherwise, the list of available templates or the edit dialog for the input component is displayed.

Important Restrictions defined by rules (for example NEW property for FS_CATALOG) can be overridden by using this handler class.
Important This class is intended to be used within the preview, not in forms. The FS_BUTTON can be hidden in forms by using hidden="yes".

Parameter

Description

editorId

Identifier of a list input component
Specification of the input component in which the new list entry is to be created, using the editorId(...) function.
Please note that the editorId(...) function must specify the parameter json: true.

json

Compatibility ContentCreator
This parameter is required when new list entries are to be added in ContentCreator. If, within the “editorId” parameter, the “json” parameter is declared with the value “true”, then a JSON object is returned instead of an HTML fragment.
The parameter may only be used within JavaScript (not in the HTML output, as in such cases invalid HTML will be generated).

reload

Partial reload
This optional parameter is used to pass the ID of an HTML element that is to be loaded after a new list entry has been created. After a list entry has been created, the entire page is always reloaded by default. After a list entry has been created, the “reload” parameter is used to attempt to swap the specified HTML element only. In this context, the ID of an HTML element can be passed as follows:
WE_API.Preview.reload("container")
where "container" is the identifier of the element that is defined with <div id="container">.

  

Example:

<span$CMS_VALUE(fsbutton( 
editorName: "button",
parameter: {
"editorId": editorId(editorName:"catalog_links", json: true)

}
))$></span>

Editing menu navigation ("EditMenu")

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

This class opens the dialog “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 names of the structure folders.

Alternatively, the navigation can also be conveniently edited using the navigation bar on the left edge of the screen.

Parameter

Description

node
(optional)

ID or UID of a Site Store element
Specifies a structure folder or a page reference up to which the tree view should be open in the “Edit Navigation” dialog.

  

© 2005 - 2024 Crownpeak Technology GmbH | All rights reserved. | FirstSpirit 2024.4 | Data privacy