Platform: List Component V1.0 Technical Design

List Component

Summary

List and table usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex.

Lists are mostly used
    * The master list for a master-detail scenario using the flexible column layout,
    * In popovers or dialogs.

Design

<fdp-list
    [id]="list Id"
    *ngFor="let item of listItems"
    [headerText]="header text"
    [footerText]="footer text"
    [noDataText]="no data present"
    [isBorderless]="true"
    [grouping]="true|false"
    [mode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
    [background]="solid|translucent|transparent"
    (delete)="handleDelete"
    (selectionChange)="onSelectionChange"
    (click)="customFunction($event)" 
    >
    <fdp-(object/standard/action/feed/display/input)list-item ............./>
</fdp-list>

Property Bindings

id: string

id of the list component it is optional.

*ngFor="let item of listItems"

To loop the list of items contained within this control.

[headerText]="header text"

Header text that appears in the List header.

[footerText]="footer text"

footer text that appears in the List footer.

target: _blank | _self | _parent | _top | framename

specify target where navigation window will open.

disabled: Boolean

link can be in enabled or disabled status.

title: string

A tooltip text will be displayed on long mouse-hover.

Template:

Setting value of isEmphasized to true in ngOninit() if value of type=emphasized.

<a
    #link
    fd-link
    class="fdp-link-truncate__txt"
    [attr.id]="id"
    [attr.href]="href"
    [target]="target"
    [disabled]="disabled"
    [emphasized]="emphasized"
    [inverted]="inverted"
    [title]="title ? title : ''"
    [attr.aria-label]="title ? title : ''"
    (click)="clicked($event)",
>
    <ng-content></ng-content>
</a>

Event Bindings

click = new EventEmitter();

• The "click" event binding emits an event whenever user clicks on link.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. fd-link mixing in fundamental-styles

Additional Notes

Questions:

Deepak:

1. For displaying Pop-over text do we need Pop-over component implementation planned in Q1/Q2?

From Sushma:

---

    In realtime, we use these to properties more for business interactions.

1). Can we have [target]="self|top|blank|parent|custome etc. 2). We need to have [id] as well.

Frank:

• Why do we need now popoever? What it is for?
• from what I read above is this something like a hint? cant we use native property called title?
• You should have also a click event, please look at the link from MetaUI,

Kevin:

• Is the "wrap" property part of the Fiori 3 specification? I did not see this feature mentioned.

---

Deepak:

@sushma:

• yes, link should have [target]. but it was not mentioned in FRD. will ask Manju to include it and then i will implement it.
• [id], i will include it as optional field.

@Frank:

- In FRD popover/tooltip is for Accessibility on hover(with time delay)
- As popover/tooltip not completed yet, will use Native element like title.
- i have put onclick event inside template, which will Emit the click event, user can also call user-defined 
  functions on click event, if they want to inside fdp-link tag.

@Kevin:

 - In FRD, wrapping functionality for link is required if width increases more than user provided value.