Icon Description automatically generated

General Description

The portal is a website for access to the ZDMP functionality including, everything from human collaboration to container management depending on the user’s role and permissions. It displays web UIs from the zApps and provides information to the decision makers that require it.

This is the front facing interface to the platform. From here users can login to the platform see available applications (depending on their access).

This component is on the Enterprise tier and is part of “user frontend plane”. It allows people access to various parts of the platform including the Marketplace to buy and install zApps as well as connecting to running applications within the Application Run-time.

Source CodeLink
X Open API SpecLink
Online Documentationhttps://software.zdmp.eu/docs/components/enterprise-tier/portal/


Component Author(s)

Company NameZDMP AcronymWebsiteLogo
Information Catalyst for EnterpriseICEwww.informationcatalyst.comGraphical user interface Description automatically generated

Commercial Information

IPR LinkPortal
Marketplace Linkhttps://marketplace-zdmp.platform.zdmp.eu/63ece97acec7d

Architecture Diagram

The following diagram shows the position of this component in the ZDMP architecture

A screenshot of a video game Description automatically generated

Figure 3: Position of Component in ZDMP Architecture


The benefits include:

  • Provide common login/logout and access to components header

  • Act as a bridge between security component and other ZDMP components

  • Provide consistent look & feel

  • Access to user management for non-IT users


The ZDMP Portal offers the following features:

  • ZDMP Global Dash Button: This is a global addition to all components. This provides all sites with a header to give user a common way to access his profile, logout, and switch between system components

  • User profile with roles: The main screen where user can provide metadata like photo, address, and other information

  • Organisation registration: Allow new organisations to be registered in the system

  • Access to all ZDMP components: Integrated login experience and access to all ZDMP components

  • Access to owned products: Integrated with Marketplace so the list of products is dynamic and shows elements owned/accessible by the current user

  • License check: Integration with Product License Manager, so it triggers a new organisation event (after an organisation has been registered) and show/hide products depending on their license status

System Requirements

The ZDMP Portal has the following requirements:

  • Docker

Associated ZDMP services



The ZDMP Portal can be installed using the following steps for development purposes:

  1. Download the latest source code from ZDMP repository

  2. Execute docker-compose from orchestration folder

  3. Access localhost:4200 from their browser to reach Portal main UI

For an on-premise installation of the portal using miniZDMP it is deployed using Rancher and the helm charts created in conjunction with the Application Runtime, and from the ZDMP Marketplace.

Below is a description of the variables that can be set from Rancher:

  • Select the template version to install and Name as default (it can be changed)

  • Namespace as default (it can be changed)

  • Helm Options set to default values

  • Private Registry Settings:

    • Private Registry URL as default if deploying it from standard zdmp repository or change

    • Enter the registry user and password and leave the registry secret with default values

  • Repository: Image Repository as default or change if using a different repository

  • Database: set to True in order to enable local database of the portal or False to use the storage component database from ZDMP (need to deploy it OnPremise)

  • Services and Load Balancing:

    • Ingress Configuration to true or false if enabling ingress, select the ingress domain name to be used

  • Environment Configuration: change the domain name of some configuration url to the domain name set in the ingress configuration

    • Portal-Api URL: the url of the portal api

    • Portal-Api Keycloak URL: the url for the portal api to connect to Secure Auth

    • Portal-Frontend URL: the url of the portal frontend

    • Portal-Api Auth Api URL: the url for the portal api to connect to auth api (Secure Auth)

  • Click on Launch Button

How to use

The ZDMP Portal can be used following these steps:

  • Welcome page

This page is what the user sees when first goes to ZDMP Portal site. The User enters their email address and then clicks Next.

Graphical user interface, application, Teams Description automatically generated

Figure 4: Portal Welcome page

  • Select organisation

Here the user can select any organisation by clicking on its name. It is then redirected to the login page.

Graphical user interface, application, email Description automatically generated

Figure 5: Select organisation screen

  • Login is provided by Keycloak (via the security component)

This screen is where the user is logged into the system, using the organisation chosen.

Graphical user interface, application Description automatically generated

Figure 6: Keycloak login

  • ZDMP Components

Once logged in, user is able to access the ZDMP Components screen.

This screen provides links for all components in ZDMP, thus becoming the main access point to all ZDMP components. This has been automatically populated based on which components/configuration the user has selected.

This functionality is also provided by the Dash button.

Graphical user interface, text, application Description automatically generated

Figure 7: ZDMP Components

Graphical user interface, text, application, email Description automatically generated

Figure 8: Register organisation screen

Dash button

  • Overview

The ZDMP Dash button is a Portal component that can be integrated by any ZDMP component and/or ZDMP application, to help the developer with the tasks related to the security, including validating current user, registering new organisations and authentication.

Icon Description automatically generated

Figure 9: Dash button in ‘anonymous’ state

  • How it works

The Dash button appears at the upper right corner and provides a single sign on experience for the end user.

It has been built using web components technology, so it can be integrated on any web page/application easily.

When the end user clicks on the Dash button, it is redirected to the main Login screen.

After a successful login, the user is redirected back to the original application, showing a ‘connected’ status, with the user’s organisation logo and username.

Text Description automatically generated

Figure 10: Dash button in ‘logged’ state

  • How to integrate it

To integrate the Dash button on any existing web page, please follow the next steps:

  • A reference to the js Javascript file, placed in specific HEAD section

<script src="https://cdn.jsdelivr.net/npm/zdmp-dash-button@latest/zdmp-dash-button.js"></script>
  • A reference to the css style file, placed in specific HEAD section

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zdmp-dash-button@latest/zdmp-dash-button.css" />
  • A tag to position the dash button, placed in specific BODY section.

<zdmp-header api-url="http://localhost:5100"></zdmp-header>
Last modified October 26, 2023