ObjectCollection¶
This control includes a view that manages and displays an ordered collection of object cells. Object Collection supports multiple columns and extensions.
An Object Collection will only render in columns on a tablet and web browser. The control responsively changes the rendering to one cell per row on a phone device.
ObjectCollection Properties¶
Property | Type | Required | Default |
---|---|---|---|
DataPaging | DataPaging | No | |
DataSubscriptions | DataSubscriptions | No | |
EmptySection | EmptySection | No | |
Extension | complex | No | |
Footer | Footer | No | |
Header | Header | No | |
Layout | Layout | No | |
MaxItemCount | integer |
No | |
ObjectCell | ObjectCell | No | |
ObjectCells | object[] |
No | |
OnPress | ActionOrRule | No | |
Search | Search | 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
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 | No |
Height |
integer | No |
MaxWidth |
integer | No |
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¶
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
Layout¶
- type: 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.
- type: ObjectCell
ObjectCells¶
- type:
object[]
All items must be of the type: object
with following properties:
Property | Type | Required |
---|---|---|
ObjectCell |
No |
ObjectCell¶
- type: ObjectCell
OnPress¶
Action or rule to be performed when the event is triggered.
- type: ActionOrRule
- Formatter and Binding are not supported
Search¶
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. In iOS, when an ObjectCollection is used alongside a header control (KPIHeader/ProfileHeader/ObjectHeader),
search bar is not enabled.
- type: Search
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.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": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "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": {
"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": "ObjectCollectionPage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ObjectCollection",
"MaxItemCount": 6,
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "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": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell1",
"AccessoryType": "disclosureIndicator",
"Subhead": "Distance Unit",
"OnPress": "/MDKApp/Actions/Messages/Message1.action",
"Visible": true
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell2",
"AccessoryType": "disclosureIndicator",
"Subhead": "Hidden object cell",
"OnPress": "/MDKApp/Actions/Messages/Message.action",
"Visible": false
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell3",
"AccessoryType": "disclosureIndicator",
"Subhead": "Touch ID & Passcode",
"OnPress": "/MDKApp/Actions/Messages/Message2.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell4",
"AccessoryType": "disclosureIndicator",
"Subhead": "Support",
"OnPress": "/MDKApp/Actions/Messages/Message3.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell5",
"AccessoryType": "disclosureIndicator",
"Subhead": "About",
"OnPress": "/MDKApp/Actions/Messages/Message4.action"
}
}
]
},
{
"_Type": "Section.Type.ObjectCollection",
"ObjectCells": [
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell1",
"AccessoryType": "disclosureIndicator",
"Subhead": "Support",
"OnPress": "/MDKApp/Actions/Messages/Message1.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell2",
"AccessoryType": "disclosureIndicator",
"Subhead": "About",
"OnPress": "/MDKApp/Actions/Messages/Message2.action"
}
}
]
},
{
"_Type": "Section.Type.ObjectCollection",
"ObjectCells": [
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell1",
"AccessoryType": "disclosureIndicator",
"Subhead": "Notes",
"StatusText": "4",
"OnPress": "/MDKApp/Actions/Messages/Message2.action"
}
},
{
"ObjectCell": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell2",
"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": {
"_Type": "ObjectCollection.Type.ObjectCell",
"_Name": "ObjectCell",
"AccessoryType": "disclosureIndicator",
"DetailImage": "sap-icon://home",
"Icons": [
"/MDKApp/Images/icon_severity_medium.png",
"/MDKApp/Images/open.png"
],
"AccessoryButtonIcon": "sap-icon://settings",
"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"
}
},
"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"
}
}
]
}
]
}
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;
}