DataTable¶
A Data Table is a range of labeled columns and rows used to present numbers, text or even images. Generally, it is a grid layout of columns and rows. Data Table control is supported on mobile platform only. By default it scrolls horizontally and diagonally.
DataTable Properties¶
Property | Type | Required | Default |
---|---|---|---|
DataPaging | DataPaging | No | |
DataSubscriptions | DataSubscriptions | No | |
EditMode | enum |
No | "None" |
EmptySection | EmptySection | No | |
Footer | Footer | No | |
Header | Header | Yes | |
Row | object |
Yes | |
Search | Search | No | |
Separators | Separators | No | |
StickyColumn | boolean |
No | |
Target | LinkQueryFunctionTarget | Yes | |
Visible | boolean |
No | |
_Name | string |
No | |
_Type | const |
Yes |
DataPaging¶
Configure the loading indicator shown at the end of the list while loading next page of data, and page size for fetching the data. Paging is currently not supported in iOS platform, user needs to specify the entire data as the page size. Paging is supported in Android platform when DataTable is the only section in SectionedTable. Loading indicator is not supported in Android platform.
- type: DataPaging
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
EditMode¶
Set edit mode for the section.
Editable Data Table supports the inline EditMode using Simple Property, List Picker, Duration Picker, Time Picker and Date Picker Form Cell controls.
In addition to defining the metadata for the editable data table, developers also need to add buttons on the page with the necessary rules using the APIs (DataTableProxy, (DataTableRowProxy, DataTableCellProxy , DataTableListPickerCellProxy) to, at a minimum, provide a save option to get the changes and save the changes to the backend service. Additional buttons can also be added to switch between display only and edit mode for the data table.
- type:
enum
- default:
"None"
The value of this property must be one of the known values listed below.
EditMode Known Values¶
Value | Description |
---|---|
None |
|
Inline |
EmptySection¶
A section that will be displayed when the list is empty, this only applies if you are using Target binding. Allows you to show custom label when the list is empty.
- type: EmptySection
Footer¶
Footer bar to be displayed below this control's content section.
- type: Footer
Header¶
Header bar to be displayed above this control's content section. Header
is a must in Android while data can be viewed
without Header
in iOS.
- type: Header
Row¶
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
Items |
array | No | |
Layout |
DataTableLayout | No | |
OnPress |
ActionOrRule | No | |
_Name |
string | No | |
_Type |
No |
Items¶
Array of data items that represent columns in a data Table.
All array items must be of the type:
Layout¶
The layout of columns in a Data Table row.
OnPress¶
Event triggered when the Data Table row is pressed.
- ActionOrRule
- Formatter and Binding are not supported
_Name¶
_Type¶
Search¶
Defines if search is to be enabled in the DataTable. If more than one searchable section is provided in the
SectionedTable, then the search definition from the first searchable section is used in defining the search bar
behavior in the SectionedTable. If there is a Search
object defined with Enabled
set to true, search will be
enabled. In iOS, when an DataTable is used alongside a header control (KPIHeader/ProfileHeader/ObjectHeader), search
bar is not enabled.
- type: Search
Separators¶
To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.
- type: Separators
StickyColumn¶
Allows the first column to stick in place, even when the Data Table is scrolled horizontally.
- type:
boolean
Target¶
The binding target for the Data Table. For each entry in the result of the binding, a Data Table row will be generated based on the Row configuration.
- type: LinkQueryFunctionTarget
Visible¶
Visibility of the Data Table.
- type:
boolean
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be:
"Section.Type.DataTable"
Examples¶
{
"_Type": "Section.Type.DataTable",
"_Name": "DataTableSection",
"Header": {
"DataTable": {
"Items": [
{
"Text": "Image",
},
{
"Text": "Text"
},
{
"Text": "Date"
},
{
"Text": "Time"
},
{
"Text": "Duration"
},
{
"Text": "List"
}
]
}
},
"Row": {
"Layout": {
"ColumnWidth": [
100,
100,
100,
100,
100,
100
]
},
"Items": [
{
"DisplayType": "Image",
"Value": "sap-icon://customer"
},
{
"DisplayType": "Text",
"EditType": "Text",
"Value": "{Text}"
},
{
"DisplayType": "Text",
"EditType": "Date",
"Value": "{Date}"
},
{
"DisplayType": "Text",
"EditType": "Time",
"Value": "{Time}"
},
{
"DisplayType": "Text",
"EditType": "Duration",
"Value": "{Duration}"
},
{
"DisplayType": "Text",
"EditType": "List",
"Value": "{List}",
"ListPicker": {
"Caption": "Select a value",
"PickerItems": {
"DisplayValue": "{Name}",
"ReturnValue": "{ID}",
"Target": {
"EntitySet": "List",
"Service": "/MyMDKApp/Services/MyOData.service"
}
}
},
"OnValueChange": "/MyMDKApp/Rules/OnValueChange.js"
}
],
"OnPress": "/MyMDKApp/Actions/Messages/Message.action"
},
"Target": {
"EntitySet": "TestEntitySet",
"Service": "/MyMDKApp/Services/MyOData.service"
}
}
DataTable with Style¶
{
"_Type": "Section.Type.DataTable",
"_Name": "DataTableSection",
"Header": {
"DataTable": {
"Items": [
{
"Text": "Image",
"Style": "DataTableHeaderItem"
},
{
"Text": "Text",
"Style": "DataTableHeaderItem"
},
{
"Text": "Date",
"Style": "DataTableHeaderItem"
},
{
"Text": "Time",
"Style": "DataTableHeaderItem"
},
{
"Text": "NotEditable",
"Style": "DataTableHeaderItem"
},
{
"Text": "Duration",
"Style": "DataTableHeaderItem"
},
{
"Text": "List",
"Style": "DataTableHeaderItem"
}
]
}
},
"Row": {
"Layout": {
"ColumnWidth": [
100,
100,
100,
100,
100,
100
]
},
"Items": [
{
"DisplayType": "Image",
"Value": "sap-icon://customer",
"Styles": {
"Image": "FontIcon"
}
},
{
"DisplayType": "Text",
"EditType": "Text",
"Value": "{Text}",
"Styles": {
"Text": "DataTableTextItem"
}
},
{
"DisplayType": "Text",
"EditType": "Date",
"Value": "{Date}",
"Styles": {
"Text": "DataTableTextItem",
"Date": "DataTableDateItem"
}
},
{
"DisplayType": "Text",
"EditType": "Time",
"Value": "{Time}",
"Styles": {
"Text": "DataTableTextItem",
"Time": "DataTableTimeItem"
}
},
{
"DisplayType": "Text",
"EditType": "None",
"Value": "{ID}",
"Styles": {
"Text": "DataTableTextItem"
}
},
{
"DisplayType": "Text",
"EditType": "Duration",
"Value": "{Duration}",
"Styles": {
"Text": "DataTableTextItem",
"Duration": "DataTableDurationItem"
}
},
{
"DisplayType": "Text",
"EditType": "List",
"Value": "{List}",
"ListPicker": {
"Caption": "Select a value",
"PickerItems": {
"DisplayValue": "{Name}",
"ReturnValue": "{ID}",
"Target": {
"EntitySet": "List",
"Service": "/MyMDKApp/Services/MyOData.service"
}
}
},
"Styles": {
"Text": "DataTableTextItem",
"List": "DataTableListItem"
}
}
],
"OnPress": "/MyMDKApp/Actions/Messages/Message.action"
},
"Target": {
"EntitySet": "TestEntitySet",
"Service": "/MyMDKApp/Services/MyOData.service"
}
}
.FontIcon {
font-size: 8;
color: green;
}
.DataTableHeaderItem {
font-color: #E9967A;
font-style: body; /*iOS only*/
}
.DataTableTextItem {
font-color: #ff0000;
font-style: body; /*iOS only*/
}
.DataTableDateItem {
font-color: #ffbb33;
font-style: body; /*iOS only*/
}
.DataTableTimeItem {
font-color: #0040ff;
font-style: body; /*iOS only*/
}
.DataTableDurationItem {
font-color: #cc6600;
font-style: body; /*iOS only*/
}
.DataTableListItem {
font-color: #339966;
font-style: body; /*iOS only*/
}