Platform: List List Item Component Technical Design - SAP/fundamental-ngx GitHub Wiki

List/List Item : OBSOLETE

Summary

A List is a group of related items. The List can be for display only or can allow selection of items or it can include item actions.

A list can optionally bind a datasource from which it can get item data.

Example

<fdp-list [isSelectable]="true" (itemSelectionChange)="onItemSelectionChange($event)">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item [value]="item1">
        <fdp-list-item-title>Item 1</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-item [value]="item2">
        <fdp-list-item-title>Item 2</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-item [value]="item3">
        <fdp-list-item-title>Item 3</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- List items with secondary information -->
<fdp-list [isBorderless]="true">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-info>18</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 2</fdp-list-item-title>
        <fdp-list-item-info>21</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 3</fdp-list-item-title>
        <fdp-list-item-info>7</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- List items with actions -->
<fdp-list [isBorderless]="true">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 2</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 3</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- Byline list items -->
<fdp-list>
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-byline-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-byline>
            byline
            <fdp-list-item-secondary-byline>secondary text</fdp-list-item-secondary-byline>
        </fdp-list-item-byline>
        <fdp-list-item-action><fdp-button>Delete</fdp-button></fdp-list-item-action>
    </fdp-byline-list-item>
</fdp-list>

<!-- List with a datasource -->

<fdp-list [datasource]="users">
    <fdp-list-group-header>Users</fdp-list-group-header>
    <ng-template #userTemplate let-item="item">
       <fdp-byline-list-item>
            <fdp-list-item-title>{{item.name}}</fdp-list-item-title>
            <fdp-list-item-byline>{{item.email}}</fdp-list-item-byline>
            <fdp-list-item-action><fdp-button>Send Note</fdp-button></fdp-list-item-action>
       </fdp-byline-list-item>
    </ng-template>
</fdp-list>

List Component

Property Bindings

isBorderless: boolean

Sets whether or not to show item borders.

isSelectable: boolean

Sets whether or not the list will be selectable. If true then all contained list items will have a checkbox element, and the element will emit a itemSelectChange event upon user interaction.

`datasource: DataSource | [any] | Observable<[any]>

A datasource, string array, or observable which returns a string array.

Events

itemSelectChange

When user clicks on any of the item checkboxes an itemSelectChange event will be fired. The event payload will include the values of items that were selected.

Projected Content

The List component expects its content to contain components of type ListItem, BylineListItem, ListGroupHeader or ListFooter.

ListItem Component

Property Bindings

value: any

Sets the data for the item which will be included in the itemSelectChange payload if the item is selected.

Projected Content

fdp-list-item-title

This component identifies the title for the ListItem.

fdp-list-item-info

This component identifies additional information which will be right justified in the ListItem.

fdp-list-item-action

This component identifies the buttons which will be right justified in the ListItem.

BylineListItem Component

Property Bindings

value: any

Sets the data for the item which will be included in the itemSelectChange payload if the item is selected.

Projected Content

fdp-list-item-title

This component identifies the title for the ListItem.

fdp-list-item-byline

This component identifies the primary byline that will appear under the title, left justified.

fdp-list-item-secondary-byline

This component identifies the secondary byline that will appear under the title, right justified.

fdp-list-item-info

This component identifies additional information which will be right justified in the ListItem.

fdp-list-item-action

This component identifies the buttons which will be right justified in the BylineListItem.

ListGroupHeader Component

This component will display its text content as a group header.

ListFooter Component

This component will display its text content as the list footer.

i18n

This is not the actual component tech spec for List. The correct one is List which is under review(as of 15th May) and therefore is not added to Platform Lib Home page wiki yet.

i18n section will be added to the new List tech spec.

From Sushma:

  1. Fiori3 defines below components under list types.Please refer below link for signature and further details.
  2. Object List Item
  3. Standard List Item
  4. Display List Item
  5. Grid List
  6. List
  7. Feed List Item
  8. Input List Item
  9. Action List Item

List Signature as per Fiori3

⚠️ **GitHub.com Fallback** ⚠️