MindSphere Web Components
IDL List View

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.

When clicking on a download object, a downloadObjectClicked event is triggered, which can be used for further actions.

Examples¶

Interface¶

Selector¶

<mdsp-idl-list-view></mdsp-idl-list-view>

Properties¶

Events¶

Models¶

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;
}

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;
}

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';

Use advance configuration¶

The following sample configuration to display pager mode, empty state and passing subtenant id. See Properties table for more details.

<mdsp-idl-list-view #mdspIdlViewComponent
    [storage-path]="'/'"
    error-notification="false"
    view-mode="Advanced"
    pager-mode="Hidden"
    show-empty-state="false">
</mdsp-idl-list-view>

Listening to Events¶

The following sample configuration for how to listner to events sent by web component. See Events table for more details.

<mdsp-idl-list-view #mdspIdlViewComponent
    [storage-path]="'/'"
    error-notification="false"
    view-mode="Advanced"
    pager-mode="Hidden"
    show-empty-state="false"
    (downloadObjectClicked)="downloadObjectClicked($event)"
    (folderClicked)="onFolderClick($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"
    view-mode="Advanced"
    pager-mode="Hidden"
    show-empty-state="false"
    (downloadObjectClicked)="downloadObjectClicked($event)"
    (folderClicked)="onFolderClick($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>

Any questions left?

Ask the community

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