Skip to content

ObjectCollection

ObjectCollection Properties

Property Type Required Default
DataPaging DataPaging Optional
DataSubscriptions DataSubscriptions Optional
EmptySection EmptySection Optional
Extension complex Optional
Footer Footer Optional
Header Header Optional
Layout Layout Optional
MaxItemCount integer Optional
ObjectCell ObjectCell Optional
ObjectCells object[] Optional
OnPress ActionOrRule Optional
Search Search 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.


Extension

  • type: complex

Extension Value

All of the following requirements need to be fulfilled.

Requirement 1

object with following properties:

Property Type Required
DimensionRatio string Optional
Height integer Optional
MaxWidth integer Optional

DimensionRatio

The ratio between width and height, only accept value in the format of "width:height" e.g. "8:5", "2:4", "16:9", etc.

  • type: string

Height

The height of each extension in an object collection column in Device Independent Pixel. The value (DIP) will be converted to pixels of the platform (based on scale and on density for iOS and Android respectively). This property will not be applied if DimensionRatio is defined.

  • type: integer

MaxWidth

The maximum width of each extension in an object collection column in Device Independent Pixel. The DIP value will be converted to pixels of the platform (based on scale and on density for iOS and Android respectively).

If there's not enough space to fit all extensions in their maximum width, then this property will not be applied and width will be automatically calculated to fit the space evenly.

  • type: integer

Requirement 2


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


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


Layout


MaxItemCount

The maximum number of items to be displayed in the section. If MaxItemCount is not specified, then all records are displayed in the section.

  • type: integer

ObjectCell

Description and ProgressIndicator are not supported.


ObjectCells

  • type: object[]

All items must be of the type: object with following properties:

Property Type Required
ObjectCell Optional

ObjectCell


OnPress

Action or rule to be performed when the event is triggered.


Defines if search is to be enabled in the ObjectCollection. 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.


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.ObjectCollection"

Examples

Full Page

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "Layout": {
            "NumberOfColumns": 1
          },
          "DataPaging": {
            "ShowLoadingIndicator": true,
            "LoadingIndicatorText": "Loading more items, please wait…"
          },
          "ObjectCell": {
            "AccessoryType": "disclosureIndicator",
            "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": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "MaxItemCount" : 6,
          "ObjectCell": {
            "AccessoryType": "disclosureIndicator",
            "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"
          }
        }
      ]
    }
  ]
}

Static (Two Column Facet)

{
  "_Type": "Page",
  "_Name": "StaticObjectCollectionPage",
  "Caption": "Static Object Collection Page",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "StaticObjectCollectionTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "ObjectCells": [
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "Distance Unit",
                "OnPress": "/MDKApp/Actions/Messages/Message1.action",
                "Visible": true
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "Hidden object cell",
                "OnPress": "/MDKApp/Actions/Messages/Message.action",
                "Visible": false
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "Touch ID & Passcode",
                "OnPress": "/MDKApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "Support",
                "OnPress": "/MDKApp/Actions/Messages/Message3.action"
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "About",
                "OnPress": "/MDKApp/Actions/Messages/Message4.action"
              }
            }
          ]
        },
        {
          "_Type": "Section.Type.ObjectCollection",
          "ObjectCells": [
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "Support",
                "OnPress": "/MDKApp/Actions/Messages/Message1.action"
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead": "About",
                "OnPress": "/MDKApp/Actions/Messages/Message2.action"
              }
            }
          ]
        },
        {
          "_Type" : "Section.Type.ObjectCollection",
          "ObjectCells": [
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Subhead" : "Notes",
                "StatusText" : "4",
                "OnPress": "/MDKApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ObjectCell": {
                "AccessoryType" : "disclosureIndicator",
                "AttributeLabel": "",
                "Subhead" : "Documents",
                "StatusText" : "4",
                "OnPress": "/MDKApp/Actions/Messages/Message2.action"
              }
            }
          ]
        }
      ]
    }
  ]
}

Extension views in each cell

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "Layout": {
            "NumberOfColumns": 4
          },
          "MaxItemCount" : 3,
          "Extension": {
            "MaxWidth": 300,
            "DimensionRatio": "8:5",
            "Module": "MeasuringPoints",
            "Control": "MeasuringPoints",
            "Class": "MyMPClass",
            "_Name": "MeasuringPoints",
            "ExtensionProperties": {
              "Configuration": {
                "EnableCurrentLocation": "True",
                "EnableDynamicLayers": "True",
                "EnableNearMe": "True",
                "EnableFeatureLayers": "True",
                "EnableBaseMaps": "True"
              },
              "Type": "Equipment",
              "Title": "Equipment",
            },
            "OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
          },
          "Target": {
            "EntitySet": "MyWorkOrderHeaderCollection",
            "Service": "/MDKApp/Services/Amw.service",
            "QueryOptions": "$expand=Operations&$orderby=OrderId"
          }
        }
      ]
    }
  ]
}

Extension with Horizontal Scrolling

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "Layout": {
            "LayoutType": "HorizontalScroll"
          },
          "MaxItemCount" : 3,
          "Extension": {
            "MaxWidth": 300,
            "DimensionRatio": "8:5",
            "Module": "MeasuringPoints",
            "Control": "MeasuringPoints",
            "Class": "MyMPClass",
            "_Name": "MeasuringPoints",
            "ExtensionProperties": {
              "Configuration": {
                "EnableCurrentLocation": "True",
                "EnableDynamicLayers": "True",
                "EnableNearMe": "True",
                "EnableFeatureLayers": "True",
                "EnableBaseMaps": "True"
              },
              "Type": "Equipment",
              "Title": "Equipment",
            },
            "OnPress": "/MDKApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
          },
          "Target": {
            "EntitySet": "MyWorkOrderHeaderCollection",
            "Service": "/MDKApp/Services/Amw.service",
            "QueryOptions": "$expand=Operations&$orderby=OrderId"
          }
        }
      ]
    }
  ]
}

Full Page with font icon and styles

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ObjectCollection",
          "Layout": {
            "NumberOfColumns": 1
          },
          "DataPaging": {
            "ShowLoadingIndicator": true,
            "LoadingIndicatorText": "Loading more items, please wait…"
          },
          "ObjectCell": {
            "AccessoryType": "disclosureIndicator",
            "DetailImage": "sap-icon://home",
            "Icons": [
              "/MDKApp/Images/icon_severity_medium.png",
              "/MDKApp/Images/open.png"
            ],
            "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"
            }
          },
          "Search": {
            "Enabled": true,
            "Placeholder": "Search",
            "BarcodeScanner": false
          },
          "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;
}