ObjectTable¶
This is a table style UI component for displaying information about an object, If they are the only section on a
SectionedTable and do not have a MaxItemCount
set.
ObjectTable Properties¶
Property | Type | Required | Default |
---|---|---|---|
DataPaging | DataPaging | No | |
DataSubscriptions | DataSubscriptions | No | |
EmptySection | EmptySection | No | |
Footer | Footer | No | |
Header | Header | No | |
HighlightSelectedItem | boolean |
No | false |
MaxItemCount | integer |
No | |
ObjectCell | ObjectCell | No | |
ObjectCells | object[] |
No | |
OnSelectionChanged | ActionOrRule | No | |
OnSelectionModeChanged | ActionOrRule | No | |
Search | Search | No | |
Selection | Selection | No | |
Separators | Separators | No | |
Target | LinkQueryFunctionTarget | No | |
Visible | boolean |
No | true |
_Name | string |
No | |
_Type | const |
Yes |
DataPaging¶
Configure the loading indicator shown at the end of the list, when loading next page of data.
- type: DataPaging
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
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.
- type: Header
HighlightSelectedItem¶
Apply highlight on selected item. The highlight is automatically applied if there is only one section in the page, and the page is displayed within FlexibleColumnLayout column (except for last column). The automatic highlight can be disabled by explicitly setting the flag to false.
- type:
boolean
- default:
false
MaxItemCount¶
If MaxItemCount is not specified, then all records are displayed in the section.
- type:
integer
ObjectCell¶
- type: ObjectCell
ObjectCells¶
Use for static Object Tables. MaxItemCount and Target are ignored.
- type:
object[]
All items must be of the type: object
with following properties:
Property | Type | Required |
---|---|---|
ObjectCell |
No |
ObjectCell¶
- type: ObjectCell
OnSelectionChanged¶
The event handler that will be triggered when the user select or deselect the item on the list.
- type: ActionOrRule
- Formatter and Binding are not supported
OnSelectionModeChanged¶
The event handler that will be triggered when the user toggle on or off the selection mode for the list.
- type: ActionOrRule
- Formatter and Binding are not supported
Search¶
Defines if search is to be enabled in the ObjectTable. 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 ObjectTable is used alongside a header control (KPIHeader/ProfileHeader/ObjectHeader), search
bar is not enabled.
- type: Search
Selection¶
Definition of the section that can enable or disabled multiple selection.
- type: Selection
Separators¶
To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.
- type: Separators
Target¶
Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.
Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.
- type: LinkQueryFunctionTarget
Visible¶
Set the visibility of this control.
- type:
boolean
- default:
true
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be:
"Section.Type.ObjectTable"
Examples¶
Full Page¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"_Name": "ObjectTable",
"Visible": true,
"DataPaging": {
"ShowLoadingIndicator": true,
"LoadingIndicatorText": "Loading more items, please wait…"
},
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKApp/Images/workorder.png",
"Icons": [
"/MDKApp/Images/icon_severity_medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKApp/Images/workorder_details.png",
"Title": "{OrderId}"
},
"Target": {
"EntitySet": "MyWorkOrderHeaderCollection",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$expand=Operations&$orderby=OrderId"
},
"Selection":{
"Mode": "None",
"LongPressToEnable": "Multiple",
"ExitOnLastDeselect": true
},
"OnSelectionChanged": "/MDKApp/Actions/SelectionChanged.action",
"OnSelectionModeChanged": "/MDKApp/Actions/SelectionModeChanged.action"
}
]
}
]
}
Full Page With Search¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKApp/Images/workorder.png",
"Icons": [
"/MDKApp/Images/icon_severity_medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKApp/Images/workorder_details.png",
"Title": "{OrderId}"
},
"Search": {
"AdditionalProperties": ["PlantSection"],
"BarcodeScanner": false,
"Enabled": true,
"Placeholder": "Search",
"Options": {
"CaseSensitive": true,
"NumberSearch": {
"Enabled": true,
"ConversionMethod": "UseCast"
}
}
},
"Target": {
"EntitySet": "MyWorkOrderHeaderCollection",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$expand=Operations&$orderby=OrderId"
}
}
]
}
]
}
Max Item Count (Preview Mode)¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"MaxItemCount": 3,
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKApp/Images/workorder.png",
"Icons": [
"/MDKApp/Images/icon_severity_medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKApp/Images/workorder_details.png",
"Title": "{OrderId}"
},
"Target": {
"EntitySet": "MyWorkOrderHeaderCollection",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$expand=Operations&$orderby=OrderId"
}
}
]
}
]
}
Full Page With DetailButton and Handler¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"MaxItemCount": 5,
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "detailButton",
"DetailImage": "/MDKApp/Images/icon.png",
"Description": "{OrderDescription}",
"Footnote": "{SystemStatus}",
"Icons": [
"/MDKApp/Images/medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavToWOHeaderUpdate.action",
"OnAccessoryButtonPress": "/MDKApp/Actions/Messages/Message.action",
"StatusImage": "res://icon.png",
"StatusText": "{SystemStatus}",
"SubstatusImage": "res://icon.png",
"SubstatusText": "{HeaderFunctionLocation}",
"Subhead": "{MainWorkCenter}",
"Title": "{OrderId}"
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$top=5"
}
}
]
}
]
}
Full Page With DetailDisclosureButton and Handler¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"MaxItemCount": 5,
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "detailDisclosureButton",
"DetailImage": "/MDKApp/Images/icon.png",
"Description": "{OrderDescription}",
"Footnote": "{SystemStatus}",
"Icons": [
"/MDKApp/Images/medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavToWOHeaderUpdate.action",
"OnAccessoryButtonPress": "/MDKApp/Actions/Messages/Message.action",
"StatusImage": "res://icon.png",
"StatusText": "{SystemStatus}",
"SubstatusImage": "res://icon.png",
"SubstatusText": "{HeaderFunctionLocation}",
"Subhead": "{MainWorkCenter}",
"Title": "{OrderId}"
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$top=5"
}
}
]
}
]
}
Full Page With Swipe¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"DataPaging": {
"ShowLoadingIndicator": true,
"LoadingIndicatorText": "Loading more items, please wait…"
},
"ObjectCell": {
"_Type":"ObjectTable.Type.ObjectCell",
"_Name":"ObjectCell",
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKApp/Images/workorder.png",
"Icons": [
"/MDKApp/Images/icon_severity_medium.png",
"/MDKApp/Images/open.png"
],
"OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKApp/Images/workorder_details.png",
"Title": "{OrderId}",
"ContextMenu": {
"_Type":"ObjectCell.Type.ContextMenu",
"_Name":"ContextMenu",
"PerformFirstActionWithFullSwipe": true,
"LeadingItems": "/MDKApp/Rules/SetLeadingItems.js",
"TrailingItems": ["UpdateCountry","UpdateCountryFailed", "ShowCity", "ShowCountry"],
"Items":[
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "UpdateCity",
"Text": "Update City",
"Image": "sap-icon://home",
"Style": "MDKSwipeControlStyle",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Rules/UpdateCity.js"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "UpdateCompanyName",
"Text": "Update CompanyName",
"Image": "sap-icon://accept",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Rules/UpdateCompanyName.js"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "UpdateAddress",
"Text": "Update Address",
"Image": "sap-icon://away",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Rules/UpdateAddress.js"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "ShowMessage",
"Text": "Toast Message",
"Image": "sap-icon://message",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Actions/Message/ShowMessage.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "ShowAlert",
"Text": "Alert Message",
"Image": "sap-icon://background",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Actions/Message/ShowAlert.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "OtherAction",
"Text": "Other Action",
"Image": "sap-icon://begin",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Actions/Message/OtherAction.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "UpdateCountry",
"Text": "Update Country",
"Image": "sap-icon://customer",
"Mode": "Deletion",
"OnSwipe": "/MDKApp/Rules/UpdateCountry.js"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "UpdateCountryFailed",
"Text": "Update Country-Failed",
"Image": "sap-icon://globe",
"Mode": "Deletion",
"OnSwipe": "/MDKApp/Rules/UpdateCountryFailed.js"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "ShowCity",
"Text": "City Info",
"Image": "sap-icon://information",
"Mode": "Normal",
"OnSwipe":"/MDKApp/Actions/Message/ShowCity.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "ShowCountry",
"Text": "Country Info",
"Image": "sap-icon://iphone",
"Mode": "Normal",
"OnSwipe": "/MDKApp/Actions/Message/ShowCountry.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "ShowAddress",
"Text": "Address Info.",
"Image": "sap-icon://key",
"OnSwipe": "/MDKApp/Actions/Message/ShowAddress.action"
},
{
"_Type":"ObjectCellContextMenu.Type.Item",
"_Name": "OtherActionFailed",
"Text": "Other Actions",
"Image": "sap-icon://log",
"OnSwipe":"/MDKApp/Actions/Message/OtherActionFailed.action"
}
]
}
},
"Target": {
"EntitySet": "MyWorkOrderHeaderCollection",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$expand=Operations&$orderby=OrderId"
}
}
]
}
]
}
export default function SetLeadingItems(context) {
let binding = context.binding;
if (binding.Status === 'Completed') {
return ["UpdateAddress", "UpdateCompanyName", "ShowMessage"];
} else {
return ["UpdateCity", "UpdateCompanyName", "UpdateAddress"];
}
}
Static (Single Column Facet)¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Object Table Section Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"_Name": "StaticSection1",
"Visible": true,
"ObjectCells": [
{
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell1",
"AccessoryType": "disclosureIndicator",
"Footnote": "/MDKApp/Rules/ObjectTable/ObjectTableText.js",
"DetailImage": "/MDKApp/Rules/ObjectTable/ObjectTableImage.js",
"OnPress": "/MDKApp/Actions/Messages/Message1.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell2",
"AccessoryType": "disclosureIndicator",
"OnPress": "/MDKApp/Actions/Messages/Message2.action",
"Title": "/MDKApp/Rules/ObjectTable/ObjectTableText.js"
}
}
]
},
{
"_Type": "Section.Type.ObjectTable",
"_Name": "StaticSection2",
"Visible": "/MDKApp/Rules/ObjectTable/Visible.js",
"ObjectCells": [
{
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell3",
"AccessoryType": "disclosureIndicator",
"Footnote": "/MDKApp/Rules/ObjectTable/ObjectTableText.js",
"OnPress": "/MDKApp/Actions/Messages/Message3.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell4",
"AccessoryType": "disclosureIndicator",
"OnPress": "/MDKApp/Actions/Messages/Message4.action",
"Title": "/MDKApp/Rules/ObjectTable/ObjectTableText.js"
}
}
]
}
]
}
]
}
Full Page with font icon and style¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectTable",
"Visible": true,
"ObjectCell": {
"_Type": "ObjectTable.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "sap-icon://home",
"AccessoryButtonIcon": "sap-icon://settings",
"Icons": [
"font://",
"font://"
],
"OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "font://",
"Title": "{OrderId}",
"Subhead": "{MainWorkCenter}",
"Footnote": "{SystemStatus}",
"StatusText": "{SystemStatus}",
"SubstatusText": "{HeaderFunctionLocation}",
"SubstatusImage": "sap-icon://home",
"Styles": {
"Title": "ObjectCellGreenText",
"Subhead": "ObjectCellPurpleText",
"Footnote": "ObjectCellRedText",
"Description": "ObjectCellYellowText",
"StatusText": "ObjectCellBlueText",
"SubstatusText": "ObjectCellBrownText",
"DetailImage": "font-icon-class",
"StatusImage": "font-icon-class",
"SubstatusImage": "font-icon-class",
"Icons": "font-icon-class",
"AccessoryButtonIcon": "font-icon-class"
}
},
"Target": {
"EntitySet": "MyWorkOrderHeaderCollection",
"Service": "/MDKApp/Services/Amw.service",
"QueryOptions": "$expand=Operations&$orderby=OrderId"
}
}
]
}
]
}
Style Classes Definition¶
.ObjectCellRedText {
color: #ff0000;
}
.ObjectCellYellowText {
color: #ffbb33;
}
.ObjectCellBlueText {
color: #0040ff;
}
.ObjectCellBrownText {
color: #cc6600;
}
.ObjectCellGreenText {
color: #339966;
}
.ObjectCellPurpleText {
color: #ff00ff;
}
.font-icon-class {
font-size: 8;
color: red;
background-color: grey;
}
.MDKSwipeControlStyle {
background-color: #339966;
}