Skip to main content

Location List

Support
  • Updated

Displays the list of locations visible by the current user and navaigation context.

 

Location List

Other than a simple list, you can specify the Accordion Template, in this way each row can be expanded, and the content is generated by the template having the selected location as input context.

 

 

 

 

Design View

In the visual editor, you can find the Location List icon under the Locations component palette group.

You can drag and drop the widget in the grid, and then according to your needs configure the following 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.

 

Code View

Template Syntax

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


<location-list-widget-v2>
    <property [name]="'name'"></property>
    <property [name]="'properties.address'" [label]="'Address'"></property>
    <property [name]="'properties.city'" [label]="'City'"></property>
    <property [name]="'properties.thingCount'"></property>		    
</location-list-widget-v2>

Component Reference

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

Location List <location-list-widget-v2>
PROPERTIES
Accordion Template The name of the template to show when expanding the accordion for a location.
Type: STRING | Optional
accordionTemplate="fooBar"
Actions Enabled The boolean flag indicating whether actions (e.g. Add button) are enabled on the widget.
Type: BOOLEAN | Optional | Values:
true
false

[enableActions]="true"
Block Column Span The number of columns on which to span the properties displayed in each list block (default 1).
Type: INTEGER | Optional | Default: 1
[blockColumns]="2"
Controls Enabled The boolean flag indicating whether controls (e.g. Search, Export) are enabled on the widget.
Type: BOOLEAN | Optional | Values:
true
false

[controlsEnabled]="true"
CSS Class The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional
class="my-custom-class"
Empty Message The blank message to be displayed in the widget in case no item was found. To manage translations, you can define a label and use the key as the value of the property.
Type: STRING | Optional
emptyMessage="No customer found"
Initial Sorting The array of property names and criteria to use for sorting (e.g. ['name','asc','serialNumber','desc']).
Type: JSON | Optional
[sort]="['name','asc','serialNumber','desc']"
Page Size The number of items to load on each page.
Type: INTEGER | Optional | Default: 50
[pageSize]="100"
Query The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte.
Type: JSON | Optional
[query]="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]"
Search Fields The array of fields used to filter out the objects when searching by a generic key. For instance: [searchFields]='['name', 'serialNumber', 'customer.name', 'customer.code']'
Type: JSON | Optional
[searchFields]="['name', 'serialNumber']"
Title The title displayed on the top part of the widget box.
Type: STRING | Optional
[title]="'Details'"
Visibility Condition The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"
SUB-ELEMENTS
Property The property whose label and current value must be rendered as a widget row.
multiple | optional

<property name="serialNumber"></property>
Composite Part The widget part combining multiple properties.
multiple | optional

<composite-part>
  <metric name="Temperature"></metric>
  <metric name="Humidity"></metric>
  <property name="properties.type"></property>
</composite-part>

 

Property <property>
PROPERTIES
Filter The name of the filter used to transform and display values.
Type: FILTER | Optional
filter="fooBarFilter"
Label The property alternative label.
Type: STRING | Optional
label="Temperature"
Name The property whose value must be loaded by the widget.
Type: PROPERTY | Mandatory
name="serialNumber"
Visibility Condition The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"

 

Composite Part <composite-part>
PROPERTIES
Filter The filter applied on the composite-part to transform or display its value.
Type: FILTER | Optional
filter="fooBarFilter"
Label The label displayed by the widget.
Type: STRING | Optional
label="fooBar"
Name The composite-part name.
Type: STRING | Optional
name="fooBar"
Sorting Criteria The comma seprated list of property names and criteria to use for sorting the list column associated to this composite-part (e.g. properties.p1,ASC,properties.p2,DESC).
Type: STRING | Optional
sortingCriteria="properties.p1,ASC,properties.p2,DESC"
Visibility Condition The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"
SUB-ELEMENTS
Metric The metric whose value must be loaded within the composite-part.
multiple | optional

<metric name="Temperature"></metric>
PROPERTIES
Name The metric whose value(s) must be loaded by the widget.
Type: METRIC | Mandatory
name="Temperature"
Property The property whose value must be loaded within the composite-part.
multiple | optional

<property name="serialNumber"></property>
PROPERTIES
Name The property whose value must be loaded by the widget.
Type: PROPERTY | Mandatory
name="serialNumber"

 

Related articles

Comments

0 comments

Please sign in to leave a comment.