Skip to content

MindSphere Web Components
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.

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

Examples

IDL-List-View

Interface

Selector

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

Properties

Name Type Corresponding attribute Default Description Allowed Values
context string context Configures the context of the component. See also here.
errorNotification boolean error-notification Enables error control if an error is thrown. This can be used for debug purposes.

For productive use, the error event should be caught and handled in the application. See also here.
locale string locale Specifies the locale in which the component is displayed.
The locales en and de are provided by default.
See also here.
localeManager LocaleManager Returns a LocaleManager object.

This can be used to add locales or to get the locale settings. See also here.
model IdlListDataModelProxy Returns an object for data model handling, refer to IdlListDataModelProxy model.
showEmptyState boolean show-empty-state false Display default component empty state area if no data found.
storagePath string storage-path '/'' Configures storage path whose object or folder to display

Events

Name Type Description
folderClicked EventEmitter<any> Triggered when folder from list view clicked.
downloadObjectClicked EventEmitter<any> Triggered when download object from list view clicked.
objectListLoaded EventEmitter<any> Triggered when list view data loaded.
breadcrumbClicked EventEmitter<any> Triggered when breadcrumb navigation is clicked.
connected EventEmitter<any> Triggered after the component is created, initialized and appended to the DOM tree.
error EventEmitter<MdspUiError> Triggered when an error occurs in the component or while accessing APIs. See also here.

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

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>

Simple paging

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();
Example: Assign unique id to component selector as shown below
<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>
Add following code in typescript:

@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>
IDL-List-View-empty

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.


Last update: July 29, 2022