HTML Content Module

The HTML Content Module allows users to view published content. If they have the appropriate permissions, users can create, edit, and publish content. In addition, an HTML Content page can be integrated as a widget in the Process Dashboard. Contact your administrator for widget integration.

User Interface

When the module is opened, read mode is displayed by default. This mode is intended solely for viewing content without editing functions.

Prerequisites

To use and manage the HTML Content module, the following prerequisites must be met:

You have the necessary permissions to access the module.
The appropriate editor role must be assigned to edit content.

The following permissions are managed in the administration area:

loadModule_htmlcontent

Users with this permission can access the module.

htmlcontent_editor

Users with this role can edit content using the icon in the BPC toolbar.

htmlcontent_editor_<MODUL_ID>

Users with this role can only edit content for the specific module ID. Example: The role htmlcontent_editor_123 allows editing of content in the module with the ID 123.

Configure Module

The basic parameters for the HTML Content module are set in the administration area. These include general module settings as well as formatting options such as link colors and text styles.

The following configuration parameters apply to the entire module.

Module

General module settings

Name (ID) Description

Name (`ID`)	Description
Icon (`module_iconCls`)	Individually selectable icon that is displayed before the title. If no icon is to be displayed, e.g. "none" can be entered. If the field is empty, a standard icon is selected.

Icon
(module_iconCls)

Individually selectable icon that is displayed before the title.
If no icon is to be displayed, e.g. "none" can be entered. If the field is empty, a standard icon is selected.

Configuration

Name (ID) Description

Name (`ID`)	Description
HTML Content Fallback Language (`fallback_language`)	HTML content is returned in this language if it is not available in the requested language. If, for example, the active language of the BPC is Spanish and no HTML content has been stored for Spanish, the content of the fallback language is returned.

HTML Content Fallback Language
(fallback_language)

HTML content is returned in this language if it is not available in the requested language. If, for example, the active language of the BPC is Spanish and no HTML content has been stored for Spanish, the content of the fallback language is returned.

HTML Content Settings in the Administration Area

Additionally, settings can be configured on a per-component basis:

Module

General module settings

Name (ID) Description

Name (`ID`)	Description
Name (`module_name`)	Name or title of the module/component.
Icon (`module_iconCls`)	Individually selectable icon that is displayed before the title. If no icon is to be displayed, e.g. "none" can be entered. If the field is empty, a standard icon is selected.
Description (`moduleHeader_description`)	Can be used as an additional description that is displayed in the module header.
Left Toolbar (`appToolbarLeftContent`)	Contents on the left in the global header. These are only displayed when the module is displayed. Available values: "deployment"
Right Toolbar (`appToolbarRightContent`)	Contents on the right in the global header. These are only displayed when the module is displayed. Available values: "deployment"
Modulheader (`moduleHeaderContent`)	Modulheader content. Available values: "edit"

Name
(module_name)

Name or title of the module/component.

Icon
(module_iconCls)

Individually selectable icon that is displayed before the title.
If no icon is to be displayed, e.g. "none" can be entered. If the field is empty, a standard icon is selected.

Description
(moduleHeader_description)

Can be used as an additional description that is displayed in the module header.

Left Toolbar
(appToolbarLeftContent)

Contents on the left in the global header.
These are only displayed when the module is displayed.
Available values: "deployment"

Right Toolbar
(appToolbarRightContent)

Contents on the right in the global header.
These are only displayed when the module is displayed.
Available values: "deployment"

Modulheader
(moduleHeaderContent)

Modulheader content.
Available values: "edit"

Configuration

Module-specific settings

Name (ID) Description

Name (`ID`)	Description
HTML Content (`content`)	HTML content that is displayed in the HTML content module. The content updates automatically when users (with editing authorization) make changes directly in the module. Each content element consists of a title, a language and the desired HTML content. The HTML content should always be edited using the editor of the HTML view itself.
Custom Stylesheet (`editorStyles`)	CSS stylesheet where custom CSS classes are defined. These can be incorporated into the HTML text editor.
Additional HTML Editor Options (`editorOptions`)	Additional configuration parameters for the HTML editor. Possible options can be found in the Froala editor documentation (https://froala.com/).

HTML Content
(content)

HTML content that is displayed in the HTML content module. The content updates automatically when users (with editing authorization) make changes directly in the module.
Each content element consists of a title, a language and the desired HTML content.
The HTML content should always be edited using the editor of the HTML view itself.

Custom Stylesheet
(editorStyles)

CSS stylesheet where custom CSS classes are defined. These can be incorporated into the HTML text editor.

Additional HTML Editor Options
(editorOptions)

Additional configuration parameters for the HTML editor. Possible options can be found in the Froala editor documentation (https://froala.com/).

Editing Content

This section describes how to create or customize content in the HTML Content module.

Navigate to the HTML Content module.
Click the icon to edit.

Depending on the configuration, the icon is located in the BPC toolbar (left or right) or in the module header.
Create or edit the content in the editor window.

Each available language is displayed in its own tab.
Use the toolbar functions to format text or insert media.
Click Save () to apply the changes.

Editing is completed, and you exit edit mode.

The updated content is now displayed in read mode.

Editor Features

The editor offers various tools for formatting text and inserting elements. These features are accessible via the editor toolbar:

Button	Description
	Undoes the last action.
	Restores a previously undone action.
	Opens a window with useful keyboard shortcuts for the editor.
	Formats the selected text in bold.
	Formats the selected text in italics.
	Formats the selected text as underlined.
	Formats the selected text as strikethrough.
	Formats the selected text as subscript.
	Formats the selected text as superscript.
	Allows you to select the font size.
	Allows you to select the text color or enter a HEX value (e.g., "#FFFF00").
	Allows you to select the background color for the selected text.
	Applies predefined CSS classes to the text.
	Applies predefined styles to the text.
	Removes all formatting from the selected text.
	Aligns the text to the left.
	Centers the text.
	Aligns the text to the right.
	Justifies the text using justified alignment.
	Creates a numbered list or changes the numbering style.
	Creates a bulleted list or changes the list style.
	Allows you to select heading and text styles.
	Offers additional text styles such as "Gray," "Bordered," "Spaced," or "Uppercase."
	Allows you to adjust line spacing.
	Reduces the indentation of the current paragraph.
	Increases the indent of the current paragraph.
	Marks text as a quote and allows you to adjust the quote level.
	Opens a dialog for inserting and configuring hyperlinks.
	Allows you to insert images via a URL.
	Opens a dialog for creating tables with a defined number of columns and rows.
	Allows you to insert emoticons.
	Allows you to insert special characters.
	Inserts a horizontal separator line.
	Switches between the visual view and the HTML code view.

Button

Description

Undo

Undoes the last action.

Redo

Restores a previously undone action.

Help

Opens a window with useful keyboard shortcuts for the editor.

Bold

Formats the selected text in bold.

Italics

Formats the selected text in italics.

Underlined

Formats the selected text as underlined.

Strikethrough

Formats the selected text as strikethrough.

Subscript

Formats the selected text as subscript.

Superscript

Formats the selected text as superscript.

Font Size

Allows you to select the font size.

Text Color

Allows you to select the text color or enter a HEX value (e.g., "#FFFF00").

Background Color

Allows you to select the background color for the selected text.

Inline Classes

Applies predefined CSS classes to the text.

Inline Styles

Applies predefined styles to the text.

Clear Formatting

Removes all formatting from the selected text.

Align Left

Aligns the text to the left.

Center

Centers the text.

Align Right

Aligns the text to the right.

Justified

Justifies the text using justified alignment.

Numbered list

Creates a numbered list or changes the numbering style.

Bulleted list

Creates a bulleted list or changes the list style.

Paragraph Format

Allows you to select heading and text styles.

Paragraph Style

Offers additional text styles such as "Gray," "Bordered," "Spaced," or "Uppercase."

Line Spacing

Allows you to adjust line spacing.

Decrease Indent

Reduces the indentation of the current paragraph.

Increase Indent

Increases the indent of the current paragraph.

Quote

Marks text as a quote and allows you to adjust the quote level.

Insert Link

Opens a dialog for inserting and configuring hyperlinks.

Insert Image

Allows you to insert images via a URL.

Insert Table

Opens a dialog for creating tables with a defined number of columns and rows.

Emoticons

Allows you to insert emoticons.

Special Characters

Allows you to insert special characters.

Separator Line

Inserts a horizontal separator line.

Code View

Switches between the visual view and the HTML code view.

Using CSS Classes

For advanced text styling, custom CSS classes can be defined and applied. These are first defined in the settings at EditorCustomCSS and then referenced in EditorOptions.

Applying Inline CSS Classes

If a CSS class is defined under the inlineClasses attribute, it can be applied to any element in the editor.

Formatting Links with CSS Classes

Special classes for links are defined under the linkStyles attribute. These classes can be assigned when editing a link.

Select the link in the editor.
Open the tooltip menu by clicking the link.
Select the desired class from the list of link styles.

The selected formatting is applied to the link.

Keywords: