Unauthorized page¶

This page can be used when user is authenticated but does not have required access permissions.

Deprecation warning

The si-unauthorized-page component has been deprecated and will be removed in the future. Use the info page instead. It is a superset and supports the same and even more use cases.

Usage¶

When to use¶

When an authenticated user opens an application or page without having the required permissions.

Code¶

Usage¶

import { RouterModule } from '@angular/router';
import { SiUnauthorizedPageModule } from '@siemens/element-ng';

@NgModule({
  imports: [SiUnauthorizedPageModule, RouterModule, ..],
})

Use the <si-unauthorized-page [...]=...></si-unauthorized-page> component on a page of your application and set the input properties as needed. All input strings are sent to the translate pipe by the component.

One follow-up option¶

Configure an external link, internal router link or a custom action by the link object to provide a follow-up option to leave the unauthorized page or to get additional help.

Multiple follow-up options¶

Leave the link object undefined and use content projection to offer multiple options for the user. For example, you can set multiple buttons.

SiUnauthorizedPageComponent API Documentation¶

selector

si-unauthorized-page

The component shall be use to indicate that an authenticated user does not have the required permissions.
Deprecated: This component is deprecated and will be removed in the future. Use the SiInfoPageComponent component with the si-info-page element instead. The SiInfoPageComponent is a superset of this component and supports the same use cases and more.

Input Properties¶

Name	Type	Default	Description
description ¶	`TranslatableString`		May be a longer description explaining the problem.
heading ¶	`TranslatableString`		The main heading indicating the problem.
icon ¶	`string`	`'element-warning-filled'`	The element warning icon.
link ¶	`Link`		Use the link object if you have one option to follow. A link object has a title to be displayed and can be configured with an external link, a router link, or a custom action. If you want to provide multiple options, add your own content into the component.
subHeading ¶	`TranslatableString`		A sub heading is a sentence summarizing the problem.

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Link

¶

Interface

Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (`string` \| (param: `any`) => `any`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: `string`¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: `boolean`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab. target?: `string`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

Translatable ¶ import imported from @siemens/element-translate-ng

Except where otherwise noted, content on this site is licensed under MIT License.