OneCX PageHeader

Overview

This document aims to showcase how to use the PageHeader component.

This component should be used for creating a header for the pages. Please, visit the storybook page for the PageHeader component and interact with the examples to find out if the component is suitable for the desired use-case.

Customization

The PageHeader component allows to customize its content:

control header title, subtitle and figure
display page details
display action buttons and menu items

To find out how to work with PageHeader component, please visit the storybook page and interact with the examples to find out the required features. For more in-depth information on the PageHeader component interface, please access further documentation.

Inputs

Table 1. PageHeader inputs
Input name	Type	Default	Description
`header`	`string`	-	Header title.
`loading`	`boolean`	`false`	If component is in loading state. Set to `true` to display component in the loading state.
`showFigure`	`boolean`	`true`	If header figure should be visible. Set to `false` to hide the figure.
`figureImage`	`string`	-	Image URL to be displayed in the header figure.
`subheader`	`string`	-	Header subtitle.
`actions`	`Action[]`	-	Array of actions available in the header in form of a button or a menu item.
`objectDetails`	`ObjectDetailItem[]`	-	Array of detail items to be displayed in the header.
`showBreadcrumbs`	`boolean`	`true`	If breadcrumbs should be visible.
`manualBreadcrumbs`	`boolean`	`false`	If breadcrumbs should be set manually. By default BreadcrumbService will generate breadcrumbs based on the router state. Set to `true` and set breadcrumbs for module routes to use manual mode.
`enableGridView`	`boolean`	-	If grid view should be enabled. Set to `false` to use column view. Set to `true` to use grid view.
`gridLayoutDesktopColumns`	`1 \| 2 \| 3 \| 4 \| 6 \| 12`	-	The amount of columns for grid view.
`figureBackground`	`boolean`	`true`	Deprecated.
`disableDefaultActions`	`boolean`	`false`	Deprecated.

Outputs

Table 2. PageHeader outputs
Output name	Type	Description
`save`	`any`	Deprecated.

Types

Action

Action type is used to create:

action buttons in the header (use show: 'always')
action menu item in the more actions button in the header (use show: 'asOverflow')

Table 3. Action interface
Property	Type	Description
`id?`	`string`	Identifier of the action button or menu item.
`label?`	`string`	Action button or menu item text.
`labelKey?`	`string`	Translation key for action button or menu item text. Has higher priority than `label`.
`icon?`	`string`	Icon of the action button or menu item .
`permission?`	`string`	Permission for the action. If user does not have this permission, the action will not be shown.
`title?`	`string`	Action button or menu item tooltip text.
`titleKey?`	`string`	Translation key for action button or menu item tooltip text.
`ariaLabel?`	`string`	Text for the aria label of the action button. Used for actions with `show: 'always'` property.
`ariaLabelKey?`	`string`	Translation key for the aria label of the action button. Used for actions with `show: 'always'` property. Has higher priority than `ariaLabel`.
`actionCallback?`	`(): void`	Callback to be used when the button is clicked or the menu item is chosen.
`disabled?`	`boolean`	If action button or menu item should be disabled.
`disabledTooltip?`	`string`	Tooltip for the disabled action button.
`disabledTooltipKey?`	`string`	Translation key for the tooltip of the disabled action button. Has higher priority than `disabledTooltipKey`.
`show?`	`'always' \|'asOverflow'`	Action button display control. Use `'always'` to display button in the header. Use `'asOverflow'` to add a menu item to the `more actions` menu button in the header.
`conditional?`	`boolean`	If action should be visible on condition resolved in `showCondition` property.
`showCondition?`	`boolean`	If `conditional: true` is set, this value determines if the action is visible. Note, this property will not work with dynamic values. Please, replace the passed Action if you wish to update the condition.
`btnClass?`	`string`	Deprecated.

ObjectDetailItem

ObjectDetailItem is used to define the detail item to be displayed for the page in the header. The detail item has a label and can have a value as well as action button.

Table 4. ObjectDetailItem interface
Property	Type	Description
`label	`string`	Text for the detail label. Use `labelPipe` to transform the label e.g., using TranslatePipe.
`value?	`string`	Text for the detail value. Use `valuePipe` to transform the value e.g., using TranslatePipe.
`labelTooltip?	`string`	Text for the detail label tooltip.
`valueTooltip?	`string`	Text for the detail value tooltip.
`icon?	`PrimeIcon`	Icon displayed before the detail value.
`iconStyleClass?	`string`	Style of the icon element.
`labelPipe?	`Type<any>`	Pipe used to transform the detail label provided via `label`.
`valuePipe?	`Type<any>`	Pipe used to transform the detail value provided via `value`.
`valuePipeArgs?	`string`	Arguments for the Pipe provided via `valuePipe`, used for transforming the detail value.
`valueCssClass?	`string`	String containing css classes to be used for displaying the detail value.
`actionItemIcon?	`PrimeIcon`	Icon for the detail item action button.
`actionItemCallback?	`() ⇒ void`	Callback to be used when the detail item action button is clicked.
`actionItemTooltip?	`string`	Text for the detail action button tooltip.
`actionItemAriaLabelKey?	`string`	Translation key for the the aria label of the detail action button.
`actionItemAriaLabel?	`string`	Text for the aria label of the detail action button.
[.line-through]`tooltip?	`string`	Deprecated. Use `valueTooltip` instead.