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]="Products"
    [footerText]="footer text"
    [noDataText]="no data present"
    [grouping]="true|false"
    [mode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
    [background]="solid|translucent|transparent"
    (delete)="handleDelete"
    (selectionChange)="onSelectionChange"
    (click)="customFuncion($event)" 
    >
    <fdp-(object/standard/action/feed/display/input)list-item ............./>
</fdp-list>

Property Bindings

id: string

optional field to get id from user.

href: string

navigational url relative or external.

type: standard|emphasized

this value of type as emphasized will make the link bold text, if type is standard then link will be regular.

inverted:true|false

if value is true, link colour will be inverted else not.

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.