How to develop a Web Portal-compatible frontend

The UI parts such as navigation, footer, and header (including the title) are provided and managed by Web Portal. Therefore, your views must not display these parts.

The side navigation only allows two levels of navigation. However, modules can offer a third-level navigation in a tab bar (tab control) that spans the entire content area. Currently, the tab bar needs to be provided by the module UI.

The module UI must integrate the front-end API to retrieve information from Web Portal (such as cookie consent and user profile) or to show notifications and enable deep-links. It is highly recommended to use the UI library as it simplifies the postMessage calls with Promise-based functions. Refer to section UI API for detailed information.

When the module is loaded in Web Portal, the tenant ID is passed as a query parameter (tenantId) to the module’s URL. The module should parse this parameter when bootstrapping to authenticate the user against MACMA.

If configured by the tenant in the settings, a privacy settings dialog (cookie manager) is presented when opening Web Portal. If the user rejects the storage of "comfort" or "marketing cookies", data that falls into these categories must not be stored in the browser (cookies, local/session storage, cache API, etc.).

To retrieve the user’s choice, use the getCookieSettings function of the UI API.

The user’s profile settings (such as language, time zone, date/time format, etc.) can be retrieved using the getSCSUserSettings function of the UI API.

To ensure a consistent look & feel and a positive user experience, it is highly recommended to respect the user’s settings in your module UI.

Module views can trigger notification toasts at the bottom of the page. These toasts automatically disappear after a few seconds but can be accessed in the message center (bell icon in the header).
Messages provide feedback on basic system messages (e.g., saving confirmations), are minimally interrupting, and do not require user action. They are scoped to the logged-in user and stored in the browser cache for three days.
To display messages, use the dispatchMessage function of the UI API.

Banners appear at the top of the page and remain until the user dismisses them. Unlike dialogs, banners do not prevent the user from using the system. Banners should only be used for issues that require user action or when the entire module is affected. To show banners, use the showBanner function of the UI API. Banners can be removed with the hideBanner function.

To enable or disable the browser fullscreen and Web Portal maximized mode, please use the respective functions (enableBrowserFullscreen, disableBrowserFullscreen, enablePortalFullscreen, disablePortalFullscreen) of the UI API. In Web Portal maximized mode, the navigation sidebar, header, and footer are hidden, allowing the content area to take up the maximum available space.