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	Optional
DataSubscriptions	DataSubscriptions	Optional
EmptySection	EmptySection	Optional
Footer	Footer	Optional
Header	Header	Optional
HighlightSelectedItem	`boolean`	Optional	`false`
MaxItemCount	`integer`	Optional
ObjectCell	ObjectCell	Optional
ObjectCells	`object[]`	Optional
OnSelectionChanged	ActionOrRule	Optional
OnSelectionModeChanged	ActionOrRule	Optional
Search	Search	Optional
Selection	Selection	Optional
Separators	Separators	Optional
Target	LinkQueryFunctionTarget	Optional
Visible	`boolean`	Optional	`true`
_Name	`string`	Optional
_Type	`const`	Required

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 bar to be displayed below this control's content section.

type: Footer

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`		Optional

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 equal to:

"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": {
            "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": {
            "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": {
            "Enabled": true,
            "Placeholder": "Search",
            "BarcodeScanner": false
          },
          "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": {
            "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": {
            "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": {
            "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": {
            "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": {
              "PerformFirstActionWithFullSwipe": true,
              "LeadingItems": "/MDKApp/Rules/SetLeadingItems.js",
              "TrailingItems": ["UpdateCountry","UpdateCountryFailed", "ShowCity", "ShowCountry"],
              "Items":[
                {
                  "_Name": "UpdateCity",
                  "Text": "Update City",
                  "Image": "sap-icon://home",
                  "Style": "MDKSwipeControlStyle",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Rules/UpdateCity.js"
                },
                {
                  "_Name": "UpdateCompanyName",
                  "Text": "Update CompanyName",
                  "Image": "sap-icon://accept",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Rules/UpdateCompanyName.js"
                },
                {
                  "_Name": "UpdateAddress",
                  "Text": "Update Address",
                  "Image": "sap-icon://away",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Rules/UpdateAddress.js"
                },
                {
                  "_Name": "ShowMessage",
                  "Text": "Toast Message",
                  "Image": "sap-icon://message",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Actions/Message/ShowMessage.action"
                },
                {
                  "_Name": "ShowAlert",
                  "Text": "Alert Message",
                  "Image": "sap-icon://background",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Actions/Message/ShowAlert.action"
                },
                {
                  "_Name": "OtherAction",
                  "Text": "Other Action",
                  "Image": "sap-icon://begin",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Actions/Message/OtherAction.action"
                },
                {
                  "_Name": "UpdateCountry",
                  "Text": "Update Country",
                  "Image": "sap-icon://customer",
                  "Mode": "Deletion",
                  "OnSwipe": "/MDKApp/Rules/UpdateCountry.js"
                },
                {
                  "_Name": "UpdateCountryFailed",
                  "Text": "Update Country-Failed",
                  "Image": "sap-icon://globe",
                  "Mode":  "Deletion",
                  "OnSwipe": "/MDKApp/Rules/UpdateCountryFailed.js"
                },
                {
                  "_Name": "ShowCity",
                  "Text": "City Info",
                  "Image": "sap-icon://information",
                  "Mode": "Normal",
                  "OnSwipe":"/MDKApp/Actions/Message/ShowCity.action"
                },
                {
                  "_Name": "ShowCountry",
                  "Text": "Country Info",
                  "Image": "sap-icon://iphone",
                  "Mode": "Normal",
                  "OnSwipe": "/MDKApp/Actions/Message/ShowCountry.action"
                },
                {
                  "_Name": "ShowAddress",
                  "Text": "Address Info.",
                  "Image": "sap-icon://key",
                  "OnSwipe": "/MDKApp/Actions/Message/ShowAddress.action"
                },
                {
                  "_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"];
  }
}

{
  "_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": {
                "AccessoryType": "disclosureIndicator",
                "Footnote": "/MDKApp/Rules/ObjectTable/ObjectTableText.js",
                "DetailImage": "/MDKApp/Rules/ObjectTable/ObjectTableImage.js",
                "OnPress": "/MDKApp/Actions/Messages/Message1.action"
              }
            },
            {
              "ObjectCell": {
                "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": {
                "AccessoryType": "disclosureIndicator",
                "Footnote": "/MDKApp/Rules/ObjectTable/ObjectTableText.js",
                "OnPress": "/MDKApp/Actions/Messages/Message3.action"
              }
            },
            {
              "ObjectCell": {
                "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": {
            "AccessoryType": "disclosureIndicator",
            "Description": "{OrderDescription}",
            "DetailImage": "sap-icon://home",
            "AccessoryButtonIcon": "sap-icon://settings",
            "Icons": [
              "font://&#xe011;",
              "font://&#xe05d;"
            ],
            "OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
            "StatusImage": "font://&#xe011;",
            "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;
}

.MDKSwipeControlStyle {
  background-color: #339966;
}

ObjectTable¶

ObjectTable Properties¶

DataPaging¶

DataSubscriptions¶

EmptySection¶

Footer¶

Header¶

HighlightSelectedItem¶

MaxItemCount¶

ObjectCell¶

ObjectCells¶

ObjectCell¶

OnSelectionChanged¶

OnSelectionModeChanged¶

Search¶

Selection¶

Separators¶

Target¶

Visible¶

_Name¶

_Type¶

Examples¶

Full Page¶

Full Page With Search¶

Max Item Count (Preview Mode)¶

Full Page With DetailButton and Handler¶

Full Page With DetailDisclosureButton and Handler¶

Full Page With Swipe¶

Static (Single Column Facet)¶

Full Page with font icon and style¶

Style Classes Definition¶