Skip to content

Platform: Grid List Component V1.0 Technical Design

Jump to bottom
kavya-b edited this page May 20, 2020 · 13 revisions

Grid List Component

Summary

As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.

The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).

Design


<fdp-grid-list
    [id]="list Id"
    [noDataText]="no data present"
    [borderType]="all|none|inner"
    [grouping]="true|false"
    [showGrid]="true|false" 
    [width]="12rem"
 [selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
    [background]="solid|translucent|transparent"
    (delete)="handleDelete"
    (selectionChange)="onSelectionChange"
    >
<fdp-title-bar..../>
<fdp-filter-bar..../>
    <fdp-grid-list-item 
           *ngFor="let item of listItems"
	   [title]="{{item.Name}}"
	   [description]="{{item.description}}" />............./>
<ng-content><--button on click display list items(lazy loading)</ng-content>
<fdp-footer.../>
</fdp-grid-list>

Property Bindings

id: string

id of the list component it is optional.

[noDataText]="no data present"

When the list contains no items then this message will be displayed.

[borderType]="all|none|inner"

   The property Show Separators (All, Inner, None) allows only the outer lines (Inner) or all the lines (None)

to be hidden when the list is used as a more structural element within a content area.

[grouping]="true|false"

List items can be grouped. If it set to true <fdp-(list item type)-item> will have group header attribute value.

[selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"

 The list can have several modes. The respective property (Mode) allows the following selection methods:

  * None

  •   SingleSelectMaster (used to pick one item with no additional indicator, as in the master list for a master- 

  •   detail scenario with the flexible column layout)

  •   SingleSelectLeft (used to pick one item using a radio button on the far left)

  •   MultiSelect (used to pick several items from the list using checkboxes on the far left). The Shift key can be used to select a range.

  •   Delete (used to delete items from the list using a delete indicator on the far right)

[background]="solid|translucent|transparent"

  Sets the background style for the controller. 
  Depending on the theme, we can change the state of the background from Solid/ to Translucent/ to Transparent.

[showGrid]="true|false"

   visible shows the grid list (“true”) or hides it (“false”)

[width]="12rem"

  width defines the width of the whole grid list

Event Bindings

(delete)="handleDelete"

Fires when item is deleted by user interaction inside the List.

(selectionChange)="onSelectionChange"

Fires when selection is changed by user interaction inside the List.

Template:

<div id=“body”>
<ul fd-grid-list id="list”………………….>
 <ng-content></ng-content>
</ul>
</div>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

Title bar: holds the title and, an item counter. Instead of a title bar you can use a toolbar, including title, counter, variant management and actions.

Filter Info bar: should appear when the grid list is filtered and shows information on the filter settings.

Grid List Items: layouted on a grid, occupies the main part of the grid list. A More button can be shown if you do not want all items to be loaded at the start (known as “lazy loading”). Ideally, you should use scrolling to load more items instead of choosing the More button. Use More only, if content is shown below the grid list.

Footer: can contain additional static text information.

Additional Notes

*ngFor="let item of listItems"

To loop the list of items contained within this control.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: Yes noDataText can have a default value assigned in the library, which needs to be extracted in the method explained in the guidelines doc.

  • fdp-grid-list's noDataText attribute can be supported with string binding when assigned by user:
<fdp-grid-list
    [id]="list Id"
    i18n-noDataText="@@noData"
    noDataText="no data present"
    [selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
    [background]="solid|translucent|transparent"
    (delete)="handleDelete"
    (selectionChange)="onSelectionChange"
    >
...Content components will follow their respective i18n guidelines...
</fdp-grid-list>

Redesign Required: Yes

Currently, only Grid List Item can be used to provide data in template declaratively, but because this is a List, we also need to support providing data as an array of objects through the fdp-grid-list parent element itself. Hence, redesign is needed.

Questions:

From Manju: The links for dependent component's tech spec is not proper. Please set them right.

Clone this wiki locally