Customer Details

  • 2 minute(s) read
Prev Next

Displays the properties of a customer in a details box.

Customer Details

Template Syntax

Below you can find some examples of how to use the component within a template.


<customer-details-widget title="Customer Info">
    <property name="name"></property>
    <property name="country"></property>
    <property name="properties.vatNumber"></property>
    .....    
</customer-details-widget>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Customer Details <customer-details-widget>

Column Span

The number of columns the widget must span its sub-elements (default 1).

Name: columns

Type: INTEGER | Optional

columns="2"

Layout

The layout used to display properties in the widget:  TABLE: Displays one column for the label and another for the property value.  ALTERNATE_ROWS: Displays a gray row for the label and a white row for the property value.

Name: layout

Type: ENUM | Optional

Values: TABLE, ALTERNATE_ROWS

Default Value: TABLE

layout="TABLE"

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

Rendering

Collapse / Expand

The flag indicating whether the widget is collaspible.

Name: collapsible

Type: BOOLEAN | Optional

Default Value: false

[collapsible]="true"

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Name: class

Type: STRING | Optional

class="my-custom-class"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Sub Elements

Property

The property whose label and current value must be rendered as a widget row.

Composite Part

The widget part combining multiple properties.

Widget Title

Compose the widget title by using properties.

Link

Make the widget clickable by defining an address to browse.

Property <property>

Description

The property description.

Name: description

Type: STRING | Optional

description="abc"

Filter

The name of the filter used to transform and display values.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Label

The property alternative label.

Name: label

Type: STRING | Optional

label="Temperature"

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="serialNumber"

Show Label

The flag indicated whether the label is visible.

Name: showLabel

Type: BOOLEAN | Optional

Default Value: true

[showLabel]="false"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Composite Part <composite-part>

Description

The composite-part description.

Name: description

Type: STRING | Optional

description="abc"

Filter

The filter applied on the composite-part to transform or display its value.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Label

The label displayed by the widget.

Name: label

Type: STRING | Optional

label="abc"

Name

The composite-part name.

Name: name

Type: STRING | Optional

name="abc"

Show Label

The flag indicated whether the label is visible.

Name: showLabel

Type: BOOLEAN | Optional

Default Value: true

[showLabel]="false"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Sub Elements

Property

The property whose value must be loaded within the composite-part.

Property <property>

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="serialNumber"

Widget Title <widget-title>

Filter

The filter applied on the composite-part to transform or display its value.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Sub Elements

Property

The property whose value must be loaded within the composite-part.

Property <property>

Filter

The name of the filter used to transform and display values.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="serialNumber"

Description

The description displayed as link tooltip.

Name: description

Type: STRING | Optional

description="Show more details..."

Icon

The link:https://fonts.google.com/icons?selected=Material+Icons[Google Fonts] icon (e.g. home) or link:https://fontawesome.com/v5[Font Awesome] icon (e.g. fas fa-home) to be displayed before the link label.

Name: icon

Type: STRING | Optional

icon="star"

URL

The URL to browse, '/..' for application relative URL, 'https://....' for external URLs, else it is considered relative to the current page.

Name: url

Type: STRING | Required

url="abc"

Rendering

Visibility Condition

The expression that allows you to reduce the visibility of the link.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"