Skip to content

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.


DataSubscriptions

Array of data change events to subscribe to.


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.


Footer bar to be displayed below this control's content section.


Header bar to be displayed above this control's content section.


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


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


OnSelectionChanged

The event handler that will be triggered when the user select or deselect the item on the list.


OnSelectionModeChanged

The event handler that will be triggered when the user toggle on or off the selection mode for the list.


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.


Selection

Definition of the section that can enable or disabled multiple selection.


Separators

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.


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.


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": {
            "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"
        }
      ]
    }
  ]
}
{
  "_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"];
  }
}

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": {
                "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://",
              "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;
}