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.

Advanced settings

• Enable Print: When enabled, the end user will see a Print option in the portlet header context menu. The portlet content will be printed as a PDF. Note that the background color will be forced when printing from the custom content portlet.

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.

Interactions

In the Custom Content portlet, it's possible to add actions on click — either to run an app or component, or to navigate to a different Portal page.

The action is configured by first selecting the app, component, or Portal page, and then referencing the action in an html section under Presentation.

Note that when clicking Apply, a validation check is performed to see which interaction items are used in the html. Any unused items will be automatically removed.

Apps or Components

1) Configure the app/component to be used

• Click Add to create a new section.

• Applications – Use the dropdown list to select the app or component to be run.

• Reference Name – A reference name is automatically suggested based on the app/component name, but you can edit it if needed.

2) Add the link in the HTML

• Go to the Presentation tab and locate the position in the HTML section where the link should be added.

• Type { to open the suggestion list and select the desired app or component. The available apps/components will be prefixed with Click.

• Click Preview or Apply to test the link.

Portal Pages

1) Configure the portal page you wish to navigate to

• Click Add to create a new section.

• Select a page – Use the dropdown list to select the page you wish to navigate to.

• Reference Name – This is used internally to identify the link and is not shown in the rendered HTML. You can edit it if needed.

2) Add the link in the html

• Go to the Presentation tab and locate the position in the HTML section where the link should be added.

• Type { to open the suggestion list and select the desired page by reference name. The pages will be prefixed with PortalPage.

• Click Preview or Apply to test the link.

  • Standalone link: The <a> tag remains and appears as a clickable link in the UI.

  • Embedded in your own html: If you add the page attribute to another element (e.g., a <span>), the original <a> is removed during cleanup when you click Preview or Apply.

Link Behavior

• Standalone link (with full link support):

  <a data-nc-portal-page="refName">Link to page</a>

• Link embedded in complex HTML (with full link support):

  <a data-nc-portal-page="refName"><button>Button to page</button></a>

• Moved page attribute to another element (no native link support):

  <button data-nc-portal-page="refName">Button to page</button>

When moving the data-nc-portal-page attribute to another tag (like a <span> or <button>), the original <a> will be removed during cleanup, and navigation will work, but without native link behavior (e.g., no right-click or tab-to-link support).

Style

To configure style, see Style.

HTML and CSS sanitization guide

HTML Sanitization

Allowed HTML Elements

The system permits specific HTML elements for custom content, organized by 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

Common Attributes (available for most elements)

• id

• class

Link-specific Attributes (for <a> tags)

• href

• name

• target

• rel

Media Attributes (for <img> tags)

• src

• alt

• width

• height

Table-specific Attributes

• scope

• colspan

• rowspan

• width

• height

Form Attributes

• name

• value

• type

• placeholder

• required

• disabled

• readonly

• autocomplete

• autofocus

• min/max

• minlength/maxlength

• pattern

• step

• multiple

• checked

• selected

• accept

• size

• rows/cols

• for (label elements)

SVG Attributes

• x, y, width, height

• cx, cy, r, rx, ry

• x1, y1, x2, y2

• points

• d

• viewBox

• fill

• stroke

• stroke-width

• opacity

• transform

URL Security

Allowed URL Schemes

Only the following URL schemes are permitted:

• https

• mailto

• tel

URL Attributes

URL schemes are only applied to these attributes:

• href

• src

• cite

Always Blocked HTML Elements

The following elements are 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 (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.