---
title: "Multi Metric List"
slug: "multi-metric-list-widget"
updated: 2026-06-29T10:45:53Z
published: 2026-06-29T10:45:53Z
canonical: "learn.servitly.com/multi-metric-list-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi Metric List

Displays the values of multiple metrics in a plain list or table with one column per metric.

![Multi Metric List](https://components-manager.servitly.com/components/MultiMetricList_1/IMAGES/_screenshot?owner=AG_Servitly)

Values are ordered by the timestamp in descending order, and when scrolling the list, the oldest values will be loaded automatically.

## Template Syntax

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

```xml

            <multi-metric-list-widget title="Events" mode="LOG">
            <metric name="EventInfo" filter="messageWithSeverity"></metric>
            </multi-metric-list-widget>
        
```

## Component Reference

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

#### Multi Metric List `&lt;multi-metric-list-widget&gt;`

| *Export Enabled* | The boolean flag indicating whether the data export is enabled. **Name**: exportEnabled **Type**: BOOLEAN \| Optional **Default Value**: *false* `[exportEnabled]="true"` |
| --- | --- |
| *Period Filter Enabled* | The boolean flag indicating whether the embedded period filter is available. **Name**: filterEnabled **Type**: BOOLEAN \| Optional **Default Value**: *true* `[filterEnabled]="false"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Multi Metrics'"` |
| **Data** |
| *Default Loading Period* | The default filtering period applied when entering the page. **Name**: defaultPeriodValue **Type**: PERIODS \| Optional `defaultPeriodValue="LAST_30_DAYS"` |
| *~~End Date Variable~~* | The <period-field>'s End Variable filtering data by end date. **Name**: endDateFieldRef **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Period Variable property. `endDateFieldRef="toDate"` |
| *Page Size* | The number of results to load when scrolling down the list. **Name**: pageSize **Type**: INTEGER \| Optional **Default Value**: *20* `pageSize="123"` |
| *Period Variable* | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. **Name**: periodRef **Type**: STRING \| Optional `periodRef="period"` |
| *~~Start Date Variable~~* | The <period-field>'s Start Variable filtering data by start date. **Name**: startDateFieldRef **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Period Variable property instead. `startDateFieldRef="fromDate"` |
| **Advanced** |
| *Refresh Interval* | The interval to check for updates (e.g. P7D, PT36H). The value is expressed using the ISO 8601 standard for durations. **Name**: refreshInterval **Type**: STRING \| Optional **Default Value**: *PT30* `refreshInterval="abc"` |
| *Show Timestamp Column* | The boolean flag indicating whether the Timestamp column is visible. **Name**: showTimestamp **Type**: BOOLEAN \| Optional **Default Value**: *true* `[showTimestamp]="false"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *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="abc"` |
| *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** |
| [*Metric*](/docs/multi-metric-list-widget/#metric) | The metric whose label and current value must be rendered as a widget row. |

#### Metric `&lt;metric&gt;`

| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| --- | --- |
| *Label* | The metric alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| *Unit* | The unit of measurement to be displayed along the value. **Name**: unit **Type**: STRING \| Optional `unit="&amp;deg;C"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<multi-metric-list-widget    
    [title]="'Multi Metrics'"
    [exportEnabled]="true"
    [filterEnabled]="false"
    defaultPeriodValue="LAST_30_DAYS"
    periodRef="period"
    pageSize="123"
    startDateFieldRef="fromDate"
    endDateFieldRef="toDate"
    [showTimestamp]="false"
    refreshInterval="abc"
    [collapsible]="true"
    class="abc"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <metric        
            name="Temperature"
            label="Temperature"
            unit="&deg;C"
            filter="fooBarFilter"
            *ngIf="getUser().organizationId != null"></metric>
</multi-metric-list-widget>
```