Skip to content

ObjectTable

This is a table style UI component for displaying information about an object. Filtering and Sorting are only enabled on ObjectTable 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
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.


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 Optional

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.


Selection

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


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 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",
          "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",
            "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"
            }
          },
          "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;
}