Web Components for Insights Hub and Industrial IoT
IDL List View
Info
This component requires access to a package of Integrated Data Lake (IDL) - see for example the IDL Essential .
Furthermore the related roles have to be assigned to the application when this component is used.
The Integrated Data Lake (IDL) List View displays a list of objects/folders for given or default bucket storage path. This view component provides feature like download objects
and copy path
. Note that download object
is available for objects only, not for folders.
By default the root storage path i.e. '/' will be taken to display object/folders on first load.
This component has two types of view modes: 'Table' and 'List'. See details below.
Examples¶
Interface¶
Models¶
ListObjectsResponse
interface ListObjectsResponse {
storageAccount: string;
storagePath: string;
objects: {
files: StorageObject[];
folders: StorageObject[];
};
page: {
size: number;
nextToken: string;
};
isTruncated: boolean;
}
interface StorageObject {
key: string;
lastModified?: string;
contentSize?: number;
storageClass?: string;
}
ExplorerListItem
interface ExplorerListItem {
isSelected?: boolean;
isExpanded?: boolean;
isFolder?: boolean;
label?: string;
path: string;
routerLink?: string[];
queryParams?: { path: string };
storagePath?: string;
size?: number;
displaySize: string;
type: string;
lastModified?: Date | string;
metadataTags?: string[];
storageClass?: string;
pathLabel?: string;
}
ViewMode
export enum ViewMode {
LIST = 'List',
TABLE = 'Table'
}
DownlaodObject
interface DownlaodObject {
path: string,
isObjSizeExceeded: boolean
}
ListResponse
interface ListResponse {
isDataLoaded: boolean;
items?: ExplorerListItem[];
}
ContractDetails
interface ContractDetails {
key?: string;
value?: string;
folderName: string;
fullPath: string;
storagePathQueryParams?: { selected: string, path: string };
}
Roles¶
mdsp:core:idlmanager.xxx
Snippets¶
Default view to display objects/folders for root storage path¶
<mdsp-idl-list-view [storage-path]="'/'"></mdsp-idl-list-view>
const idlListViewComp = document.querySelector('mdsp-idl-list-view');
idlListViewComp.storagePath = '/test';
1. Table View:¶
View mode can be selected by using viewMode property. The default value for viewMode is Table. Pagination is enabled by default and will be visible if page more than 1.
<mdsp-idl-list-view #mdspIdlViewComponent
[storage-path]="'/'"
error-notification="false"
view-mode="Table"
pager-mode="Hidden"
show-empty-state="false">
</mdsp-idl-list-view>

2. List View:¶
To select list view mode, viewMode property should be set to 'List'.
Basic configuration¶
<mdsp-idl-list-view #mdspIdlViewComponent show-empty-state="false" [path]="'/'"
view-mode="List"
(itemChecked)="onItemChecked($event)"
(itemUnchecked)="onItemUnchecked($event)"
(objectListLoaded)="objectListLoaded($event)">
</mdsp-idl-list-view>

Advanced configuration¶
Additional properties like selectable, folder-only can be set/configured. * Setting selectable property value as 'true' will enable checkbox. Default value is false. * Setting folder-only property value as 'true' will display only folders in list view. Default value is false.
<mdsp-idl-list-view #mdspIdlViewComponent show-empty-state="false" [path]="'/'"
selectable="true" view-mode="List" folder-only="true"
(itemChecked)="onItemChecked($event)"
(itemUnchecked)="onItemUnchecked($event)"
(objectListLoaded)="objectListLoaded($event)">
</mdsp-idl-list-view>

Search Filter¶
By default, Search filter is enabled in List mode. To hide search filter, set search-hidden
to true.
Set object path using property¶
Use selected-object-path
prperty to set paht adn redirect to it directly.
document.querySelector('mdsp-idl-list-view').selectedObjectPath = 'data/ten=punvs1/CustomerData/CustDemogAndalucia.csv';
Listening to Events¶
The following sample configuration for how to listen to events sent by web component. See Events
table for more details.
<mdsp-idl-list-view #mdspIdlViewComponent
[storage-path]="'/'"
error-notification="false"
view-mode="Table"
pager-mode="Hidden"
show-empty-state="false"
(downloadObjectClicked)="downloadObjectClicked($event)"
(listItemSelected)="onListItemSelected($event)"
(breadcrumbClicked)="onBreadcrumbClick($event)">
</mdsp-idl-list-view>
Use Simple Paging¶
By default a pagination component will be shown if records are more than 100.
<mdsp-idl-list-view [storage-path]="'/'"></mdsp-idl-list-view>
Refresh the IDL list view¶
The data model of the IDL list view can be refreshed to get the latest objects/folders, for example to update the view cyclically.
idlListViewComp.model.refresh();
<mdsp-idl-list-view #mdspIdlViewComponent
[storage-path]="'/'"
error-notification="false"
pager-mode="Hidden"
show-empty-state="false"
(downloadObjectClicked)="downloadObjectClicked($event)"
(listItemSelected)="onListItemSelected($event)"
(breadcrumbClicked)="onBreadcrumbClick($event)">
</mdsp-idl-list-view>
@ViewChild('mdspIdlViewComponent', {static: false })
public idlViewComponent!: ElementRef;
this.idlViewComponent?.nativeElement?.model?.refresh();
Show/Hide empty state area¶
Default value for show-empty-state
is 'true'. In this case the component will show default empty state as below.
<mdsp-idl-list-view [storage-path]="'/'"></mdsp-idl-list-view>

This property if set to 'false', default empty state box (No record found section) will be hide. A consumer application can add their own logic to implement.
<mdsp-idl-list-view [storage-path]="'/'" show-empty-state="false"></mdsp-idl-list-view>
Except where otherwise noted, content on this site is licensed under the Development License Agreement.