-
Notifications
You must be signed in to change notification settings - Fork 127
Platform: List Component V1.0 Technical Design
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.
- No Core technical design available currently.
<fdp-list
[id]="list Id"
[headerTitle]="header title"
[footerText]="footer text"
[noDataText]="no data present"
[borderType]="all|none|inner"
[grouping]="true|false"
[selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
[background]="solid|translucent|transparent"
(delete)="handleDelete"
(selectionChange)="onSelectionChange"
>
<fdp-(object/standard/action/feed/display/input)list-item
*ngFor="let item of listItems"
[title]="{{item?.Name}}"
[description]="{{item?.description}}" />............./>
</fdp-list>
id of the list component it is optional.
Header text that appears in the List header.
footer text that appears in the List footer.
When the list contains no items then this message will be displayed.
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.
List items can be grouped. If it set to true <fdp-(list item type)-item> will have group header attribute value.
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)
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.
Fires when item is deleted by user interaction inside the List.
Fires when selection is changed by user interaction inside the List.
Template:
<div id=“header”……../>
<div id=“body”>
<ul fd-list id="list”………………….>
<ng-content></ng-content>
</ul>
</div>
<div id=“footer” …../>
N/A
N/A
To loop the list of items contained within this control.
Item types:
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: Yes
noDataText may have a default value assigned in the library itself, making it a special case to be handled as described in the general guidelines.
-
headerTitle,footerText,noDataText,title, anddescriptioncan be supported with string binding:
<fdp-list
[id]="list Id"
i18n-headerTitle="@@headerTitleTranslate"
headerTitle="header title"
i18n-footerText="@@footerTextTranslate"
footerText="footer text"
i18n-noDataText="@@noDataTextTranslate"
noDataText="no data present"
[borderType]="all|none|inner"
[grouping]="true|false"
[selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
[background]="solid|translucent|transparent"
(delete)="handleDelete"
(selectionChange)="onSelectionChange"
>
<fdp-(object/standard/action/feed/display/input)list-item
*ngFor="let item of listItems"
i18n-title="@@titleTranslate"
title="{{item?.Name}}"
i18n-description="@@descriptionTranslate"
description="{{item?.description}}" />............./>
</fdp-list>Redesign Required: Yes
List does not account for declarative approach in terms of providing an array of objects, and only provides specifying individual items. Since a list can have any number of items coming from server/db in practical usecases, it is required to have the component accept an array of objects rather than through individual items.
- I am confused with the ngFor thign in there. Usually you have a list as container and list-items. so ngFor here is not the right thing what do you think? -
Yes you are right, sorry I misplaced, did that change now.
- Is this headerText or Title / label? Let's be more specific
_Changes Done_
-
isBorder is more like a boolean hasboarder yes no, but when you have more options it does not fit in. more like borderType _
-Changes Done_ -
You should think of to support both imperative as well as declarative way so most of the bindings here first more to list item and some to its parent container.
Yes Frank, I am considering it by exploring fiori docs, angular material and primeNg to achieve the same
thought of having a model for list properties and have singature like
<fdp-list [model]="model"><fdp-list-item.../>in this user has to set more data which will be complex and chances of missing the information to share.
As of now the properties which are declared in list container as per understanding has to be set on the container level. -Done whereas iterating a list and getting items should be in list-item. -Done I will try to submit at least 1 list item in a couple of days with separation.
- I am not sure if I am clear about this <fd-object/// - Can you give some examples how it is going to be used ?
_ -_Added above _ _
- _ As per fiori list contains 6 list items. These items can be of various types depending on the use case and on the content they have.. _ _ for example:_ _ The standard list item: it is used for less complex entries, such as when the user selects an item in a dialog._ _ The object list item: it consists of a title, key figure, attributes, and a status, it contains the most important information about an object.etc_
- is mode more selectionMode-
_Changes Done_
- could this be also part of Form? Like showing some list of items?
- As per Fiori3 Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.
And as per my understanding in general, form does not shows huge list of data. We can use select, combobox,menu etc for it. Please let me know in case my understanding is correct. I will get it confimed with Manju as well.