MindSphere Web Components
Event View

The Event View displays a list of events reported in the current tenant or for a specific asset. The list is sortable and distributed over pages of a configurable size.

If no asset is specified, the Event View displays all events reported in the current tenant and adds a column for the related asset ID. When one or multiple events are selected, a selectedEventChanged event is triggered.

Examples¶

Interface¶

Selector¶

<mdsp-event-view></mdsp-event-view>

Properties¶

Events¶

Models¶

interface IBaseEvent {
    id: string;
    typeId: string;
    correlationId: string;
    timestamp: string;
    entityId: string;
    etag: number;
}

interface IMindsphereStandardEvent extends IBaseEvent {
    severity: number;
    description: string;
    code: string;
    source: string;
    acknowledged: boolean;
}

interface IDataModel {
    // forces reload of data, e.g. re-loading the events
    refresh(): void;
}

interface IViewModel {
  refresh(): void;
}

Roles¶

• mdsp:core:em.xxx (Event Management API is used)

Snippets¶

Display Events of the Current Tenant¶

<mdsp-event-view></mdsp-event-view>

Display Events of a Specific Asset¶

The following sample configures the Event View to display all events for asset 1b100d51d9e444b49fd54dcefac1ef5a.

<mdsp-event-view></mdsp-event-view>

const eventViewComp = document.querySelector('mdsp-event-view');
eventViewComp.assetId = '1b100d51d93444b49fd54dcefac1ef5a';

Use Simple Paging¶

<mdsp-event-view pager-mode="Simple"></mdsp-event-view>

Use Advanced Paging¶

<mdsp-event-view pager-mode="Advanced"></mdsp-event-view>

Refresh the Event View¶

The data model of the Event View can be refreshed to get the latest events, for example to update the view cyclically.

eventViewComp.model.refresh();

Display Events of a specific type and their properties in extra columns¶

// taken the typeId from the eventtypes api
eventViewComp.typeId = "5d480a00-5c45-4e81-bb8f-6ab6597aa32e";
// after that only events of this type will be shown in the table, for each property a column will be shown

Enable filters in the column header¶

<mdsp-event-view filterable="true"></mdsp-event-view>

The filter buttons are shown if the field is marked as filterable in the related event type definition.

Enable a settings menu for the visible columns¶

<mdsp-event-view column-settings-visible="true"></mdsp-event-view>

With this menu, the visible columns can be set. If the settings needs to be saved for the future, the event columnSettingsChanging should be used to read and set the columnSettings.

Overwrite asset id in table headers with asset name¶

With the snippet below, you can format the table header and the columns, for example, to replace the asset id with an asset name or to show text in different languages.

document.querySelector('mdsp-event-view').tableFormatters = {
  columnFormatters: {
   "assetId": {
      header: function(value){
        return "Asset Name";
      },
      value: function(value){
         return "DUMMY_REPLACE_ASSET_NAME";
      }
    },
  }
}

Any questions left?

Ask the community

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.