Custom content

The Custom content portlet allows users to create a fully customizable portlet using HTML and CSS. It supports images and styled content, enabling tailored presentation to fit specific needs.

General

General data is required for all portlets, see General.

Events

To set up an event, see Events.

Data

To set up a data source, see Data.

Adding a data source is optional and not required for the Custom Content Portlet. It can be used when dynamic content is needed, but event data and static HTML and CSS can be sufficient for many use cases.

Data source columns

In the data source column, you can change column names and set their types. Click Manage to access a grid view of the configuration.

Click Execute in the data source section to fetch the columns. Each column can be configured with:

• display name

• column type

Presentation

The presentation part of the portlet consists of a CSS section for styling and one or more HTML sections for content. Developers can add multiple HTML sections, which can be either static or dynamic based on data source usage. For example, static sections display fixed content, while dynamic sections retrieve and render data at runtime.

Presentation

• CSS: Defines the styles applied to the content in the portlet. The CSS section allows users to write custom styles to control the appearance of HTML elements within the portlet.

• Enable Container: Determines whether the content should be wrapped in a container tag. If set to true, a selected container tag will be added around the content. This helps structure the layout and apply consistent styling. Available container tags:

  • DIV – A generic container used for styling and layout.

  • UL – An unordered list, typically used for grouping list items.

  • OL – An ordered list, displaying items in a specific sequence.

  • TABLE – A table structure, useful for organizing data in rows and columns.

  • TBODY – The body section of a table, containing rows of data.

• CSS Class: Allows users to specify a CSS class that can be applied to the container or elements within the portlet. This enables consistent styling across multiple sections.

Section

A section is an individual block of content within the portlet. Users can add multiple sections, each with its own content and behavior.

1. Click Add to create a new section.

2. Enter a name for the section to help identify it.

3. Select the section type:

   • Static – Creates a fixed content block that does not change.

   • Dynamic – Generates a block that can be repeated multiple times based on data input. This is useful when displaying lists, tables, or other repeating content structures.

4. Add the HTML code in the Section HTML Content field.

Security Check

When the portlet is previewed or saved, it runs a security check to prevent the use of unsafe code. If disallowed elements or scripts are detected, an error message appears, stating that the code includes restricted elements and cannot be saved.

User Options When an Error Occurs

• Dismiss – Cancel changes and do not save the section.

• Auto-Fix – Automatically remove all disallowed code to ensure compliance with security policies.

For details see HTML and CSS sanitization documentation below.

Pagination

• Enable Pagination: Check this option to enable a pagination footer. You can set the number of items per page and choose whether to display the pagination footer when all results fit on a single page.

Style

To configure style, see Style.

HTML and CSS sanitization guide

HTML Sanitization

Allowed HTML Elements

The system permits only specific HTML elements to be used in custom content. These elements are divided into categories:

Document structure elements:

• header, footer, nav, side, div, section, article, aside, address, details

Text elements:

• p, span, a, br, h1-h6, strong, em, blockquote, pre, code, b, i, u, s, strike, q, cite, abbr, figcaption, figure, center

List elements:

• ul, ol, li, dd, dl, dt

Table elements:

• table, thead, tbody, tfoot, tr, th, td, col, colgroup, caption

Form elements:

• button, input, textarea, select, option, label, form

SVG elements:

• svg, g, rect, circle, ellipse, line, polyline, polygon, path, text, use, viewBox

Allowed HTML Attributes

Only the following attributes are allowed:

General attributes:

• id, class, scope, colspan

Media attributes:

• href, src, alt

SVG attributes:

• x, y, width, height, cx, cy, r, rx, ry, x1, y1, x2, y2, points, d, viewBox, fill, stroke, stroke-width, opacity, transform

Form attributes:

• name, value, type, placeholder, required, disabled, readonly, autocomplete, autofocus, min, max, minlength, maxlength, pattern, step, multiple, checked, selected, accept, size, rows, cols

Always Blocked HTML Elements

The following elements are always blocked for security reasons:

• style

• html

• script

• body

• link

Disallowed HTML Attributes

Any attribute not explicitly included in the allowed list will be sanitized, including:

• Event handlers (like onclick, onload, etc.)

• Style attributes (style)

• Script-related attributes (javascript: URLs)

• Custom data attributes (data-*)

• Meta attributes (http-equiv, content)

CSS Sanitization

Always Disallowed CSS Properties

The following CSS properties are always disallowed for security reasons:

• behavior

• expression

• binding

• moz-binding

• ms-behavior

• o-behavior

• zoom

• pointer-events

• mask

• mask-image

• mask-border

• appearance

Disallowed CSS Functions

The following functions in CSS are considered dangerous and are disallowed:

• behavior()

• attr()

• url()

• eval()

• function()

• expression()

Default Allowed CSS Functions

The following CSS functions are allowed by default:

• rgb()

• rgba()

• hsl()

• hsla()

• calc()

• var()

• linear-gradient()

• radial-gradient()

URL Restrictions

URLs within CSS (url() function) are disallowed.