Displays a button that the user can click to navigate to another page.
You can put this element directly in the grid area as an independent button, once clicked the referenced URL is navigated.
The URL you want to navigate is an application URL, which can be relative to the current navigated page (e.g. consumption), or absolute (e.g. /main/statistics)
In the alternative, you can put the link-element in a widget, doing so the widget will display it at its bottom, or depending on the widget, the entire widget will be clickable (e.g. gauges).
Design View
In the visual editor, you can find the Link Element icon 
Code View
Template Syntax
Below you can find some examples of how to use the component within a template.
/* standalone button */
<link-element url="/overview" label="Overview" description="Go to the overview page"></link-element>
/* embedded button */
<thing-details-widget title="Info">
<property name="serialNumber"></property>
<property name="thingDefinition.name" label="Model Name"></property>
<link-element url="consumption" description="Displays the thing consumption"></link-element>
</thing-details-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| <link-element> | |
|---|---|
| PROPERTIES | |
| CSS Class | The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional class="my-custom-class" |
| Description | The description text to be displayed as tooltip on the link element.
Type: STRING | Optional description="Lorem ipsum dolor sit amet..." |
| Icon | The Font Awesome icon to be displayed before the label.
Type: STRING | Optional icon="fas fa-thermometer" |
| Label | The alternative label displayed by the widget.
Type: STRING | Optional label="Temperature" |
| URL | The URL to browse, if it does not start with '/' is considered relative to the current page.
Type: STRING | Mandatory url="fooBar" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.