HTML Content Module (User-Defined Content)

The HTML Content Module allows users to view content made available to them. If they have the appropriate permissions, selected users can create and edit content themselves and make it available to other users.

It is also possible to integrate an HTML Content page into the Process Dashboard as a widget.
To do so, contact your administrator.

Access Rights

In order for a user to access the module or work within it, the necessary permissions must be assigned in the administration area:

loadModule_htmlcontent

Users with this permission can access the module.

htmlcontent_editor

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

htmlcontent_editor_<MODUL_ID>

Users with this role can only edit content with this module ID by clicking the icon in the BPC toolbar.
Example: The role htmlcontent_editor_123 allows editing of content in the HTML Content module with the ID 123.

Settings

In the administration area, parameters for the HTML Content module can be configured.
These primarily include general settings for the module as well as settings for markup, such as link colors or custom text formats.

HTML Content Settings in the Administration Area
Setting (Key) Description Example

Module_Description
(moduleHeader_description)

Can be used as a subtitle or description.

Custom Content

Module_Header
(moduleHeader_enabled)

Setting to determine whether the module title (Module_Name) and subtitle (Module_Description) are displayed or not.

true (displayed)

Module_Icon
(module_iconCls)

Custom icon displayed before the module title.
If you do not want an icon to be displayed, you must still enter a character. If the field is left blank, a default icon will be selected.

[NOTE] ==== The module icon does not automatically match the icon in the navigation bar. This is set in the navigation settings in the administration area. ====

x-fal fa-books
or, for example, "0" so that no icon is displayed

Module_Name
(module_name)

Name or title of the module

HTML Content Module

Content
(content)

An overview of the content displayed in the HTML Content module. The overview updates automatically when users (with editing permissions) make changes directly in the module.
Each content element consists of a title, a language, and the desired HTML content.

 
[
    {
        "editorTabTitle": "German",
        "language": "de",
        "content": "<h1>Deutscher Inhalt</h1>"
    },
    {
        "editorTabTitle": "English",
        "language": "en",
        "content": "<h1>English content</h1>"
    }
]

EditorCustomCSS
(editorStyles)

CSS stylesheet in which user-defined CSS classes are defined. These can be integrated into the text editor via the setting EditorOptions.

 
 .TitleClass{
     font-size: 30px;
     font-weight: 400;
     color : black;
}
 .LinkClass{
     font-size: 15px;
     font-weight: 100;
     color : blue;
}

EditorOptions
(editorOptions)

JSON object with 2 attributes ("inlineClasses", "linkStyles").
Its attributes are the CSS class names from the setting EditorCustomCSS.
Its value is the name used to access the CSS class in the editor (see User-specific CSS classes).

 
{
  "inlineClasses": {
  "TitleClass": "Custom Title"
},
  "linkStyles": {
  "LinkClass": "Custom Link"
}
}

User-specific CSS classes

Once a CSS class has been defined in the setting EditorCustomCSS, it can be referenced in the setting EditorOptions.

Inline CSS Classes

If the CSS class name (e.g., TitleClass) is listed under the attribute (e.g., inlineClasses), it can be accessed in the editor as follows and applied to any element.

Inline CSS Classes

Adding a Link

If the CSS class name (e.g., LinkClass) appears under the attribute (e.g., linkStyles), it refers to a link and can be addressed in the editor as follows:

Add Link

Assigning a Link Class

Clicking the newly inserted link opens a tooltip; the second menu item from the left contains a list of our LinkStyles:

Link Class

User Interface

When you open the module, you are initially in reading mode.

Read Mode

Edit Content

To create and edit content, you need the appropriate permissions.
Please contact your administrator if necessary.

The function icon for editing is located in one of these 3 places: * in the BPC toolbar on the left * in the BPC toolbar on the right * in the module header

Clicking the icon takes you to the Edit Mode.

Edit Page

Edit Mode

In edit mode, the editor opens, allowing you to create new content or edit existing content.

By default, content is available in English and German. Each available language is displayed in its own tab.

Language Tabs

The number and selection of languages can be customized. To do so, contact your administrator.

Editor Features

In the editor, you can create and edit text and add other content such as links or images. The editor’s features are accessible via icons in a toolbar:

Button Description

Undo

Undoes the last action.

Redo

Redoes the action.
(This button is only available if an action has been undone.)

Help

Opens a window with keyboard shortcuts that may be helpful in the editor.

Bold

Formats the text in bold.

Italicize

Formats the text in italics.

Underline

Formats the text as underlined.

Mark as strikethrough

Formats the text as strikethrough.

Mark as subscript

Formats the text as subscript.

Mark as superscript

Formats the text as superscript.

Text Size Selection

Opens a text size selection menu.

Text Color Selection

Opens a preset menu for text color.
You can select a custom color using the "HEX Color" field, e.g., "#FFFF00".
Clicking the icon resets the text color to the default (black).

Selection for Text Background Color

Opens a predefined selection for the background color of the selected text.
You can select a custom color using the "HEX Color" field, e.g. "#FFFF00".
Clicking the icon resets the text color to the default (black).

Preset Formats

Opens a selection of preset formats.

Preset Formats

Opens a selection of preset formats.

Clear Text Formatting

Removes all formatting from the selected text.

Align left

Aligns the current line or all selected lines to the left.

Center

Centers the current line or all selected lines.

Align to the right

Aligns the current line or all selected lines to the right.

Justify

Justifies the current line or all selected lines to both sides.

Numbered list

Converts the current line or all selected lines into a numbered list.
By default, decimal numbers are used. Click the arrow next to the button to select additional numbering styles.

Unordered list

Converts the current line or all selected lines into an unordered list.
By default, black circles are used as list items. Click the arrow next to the button to select additional list styles.

Select Heading and Text Styles

Opens a selection of different heading and text styles for the current line or all selected lines.
By default, “Normal Text” is used.

Selecting Text Formatting

Opens a selection of different text formatting options.

Gray

Colors the current line or all selected lines gray.

Bordered

Adds a thin line above and below the current line or all selected lines.
The lines are added to each individual line. Therefore, if multiple lines are to be enclosed between the lines, a soft line break (kbd:[Ctrl] + kbd:[Enter]) must be used.

Spaced

The spacing between the letters and characters on the current line or all selected lines is increased.

Uppercase

All letters on the current line or all selected lines are capitalized.

These options can be combined and must be deselected individually to return to normal text.

Line Spacing

Opens a selection of different line spacings.

Decrease Indent

Reduces the indent of the current line or all selected lines.
This button can only be used if there is an indent.

Increase Indentation

Increases the indentation of the current line or all selected lines.
This button can be used multiple times.

Quote

Opens a menu to mark quotes and adjust the quote level.
The quote level is indicated by vertical lines at the beginning of the line and the corresponding text color. A maximum of 3 different levels are possible; starting with the 4th level, additional lines appear, but the text color remains the same.

Insert Link

Opens a window where you can enter the URL of a webpage and the text to be displayed in the link.
You can also check the box to have the link open in a new window.

Insert Image

Opens a window where you can enter the URL of an image.

Insert Table

Opens a window where you can create a table by selecting the number of columns and rows.

Emoticons

Opens a window where you can select an emoticon.
To insert multiple emoticons, click the button multiple times.

Insert Special Characters

Opens a window where you can select a special character.
To insert multiple special characters, click the button multiple times.

Insert Horizontal Line

Inserts a horizontal line below the current line.

View HTML Code

The content is displayed as HTML code and can also be edited there.

Finish Editing

Once editing is complete, the generated content can be saved or discarded. In both cases, you exit edit mode.

Finish Editing

You can view the result of your edits in the Lesemodus.

Keywords:
Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen