Web Components for Insights Hub and Industrial IoT
Asset View

The Asset View displays assets available in the current tenant.

The view mode can be configured to display the assets as listed items, in a responsive grid container, or as tree using the parentId property. A search field and an asset count field are displayed by default, but can be hidden.

Example¶

The following pictures show the Asset View in different view modes.

List¶

Cards¶

Tree¶

Compact Tree¶

Interface¶

Selector¶

<mdsp-asset-view></mdsp-asset-view>

Properties¶

Events¶

Models¶

type AssetTypeFilter = AssetTypeFilterOptions | string[]
interface AssetTypeFilterOptions {
  supportedTypes: string[];  
  includeInheritance?: boolean;
}

interface IAsset {
  assetId: string;
  tenantId: string;
  name: string;
  etag: number;
  externalId: string;
  t2Tenant: string;
  subTenant: string;
  description: string;
  parentId: string;
  typeId: string;
  location: ILocation;
  variables: any[];
  aspects: any[];
  deleted: string;
  sharing?: ISharing;
  isShared: boolean;
  fileAssignments: any[];
  locks: any[];
  timezone: string;
  twinType: string;
  _links: any;
}

interface ISharing {
  modes: SharingMode[];
}

enum SharingMode {
  Sharer = "SHARER",
  Receiver = "RECEIVER"
}

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

interface ILocation {
  country: string;
  region: string;
  locality: string;
  streetAddress: string;
  postalCode: string;
  longitude: number;
  latitude: number;
}

interface IViewModel {
  refresh(): void;
}

Remarks¶

• The Asset View currently supports up to 20,000 assets in list or tiles view mode.
• The tree view mode currently supports up to 1,000 assets.
• Virtually deleted assets are not displayed.

Roles¶

• mdsp:core.AssetManagement.xxx (Asset Management API is used)

Snippets¶

Display Assets of a Specific Type¶

Use the assetypefilter parameter to only display assets of a specific type or of types derived from it.

// Set a filter for a specific asset type:
assetView.assetTypeFilter = ["core.mcnano"];
// This displays all assets of type 'core.mcnano'.

// Set a filter for multiple asset types:
assetView.assetTypeFilter = {
  supportedTypes: ["core.mcnano", "core.basicagent"]
};
// This displays all assets of type 'core.mcnano' or 'core.basicagent'.

// Set a filter to a specific asset type and all types derived from it:
assetView.assetTypeFilter = {
  supportedTypes: ["core.basicagent"],
  includeInheritance: true
};
// This displays all assets of type 'core.basicagent' and types derived from it.

Refresh¶

The data model of the component can be refreshed, for example to update the view cyclically to get the latest asset changes:

assetView.model.refresh();

Hide assets with a custom filter¶

In some use cases, you might want to hide specific assets. For this, the customFilter can be used.

document.querySelector('mdsp-asset-view').customFilter = function(a){
   return a.filter(b=>b.name.includes('M') || b.name.includes('m'));
};

As a result, only the assets which include 'M' or 'm' in the asset name will be displayed. To reset the filter, set the customFilter to undefined.

Use Custom Templates¶

With templates you can influence the view of the component. Change the layout and the properties displayed inside a list item using Angular syntax for the data binding (e.g. {{data.name}}). Refer to IAsset for available properties.

Add a HTML element to your index.html file and apply the custom template.

  <div id="customAssetViewTemplate" style="display: none;" class="mdsp mdsp-defaults">
    <em class="iconMdsp tag black"></em>
    <span class="h5">{{data.name}}</span>
    <div>
      <div class="{{data.location && data.location.country ? 'badge badge--dark' : 'hidden'}}">{{data.location && data.location.country}}</div>
      <div class="{{data.name.startsWith('Pump') ? 'badge has-bgColor-success has-color-base000' : 'hidden'}}">Pump Asset</div>
    </div>
  </div>

const assetView = document.querySelector('mdsp-asset-view');
// set ID of the custom HTML element
assetView.customListTemplateId = 'customAssetViewTemplate';

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