ObjectCell¶

ObjectCell Properties¶

Property	Type	Required	Default
AccessoryButtonIcon	Image	No
AccessoryButtonText	`string`	No
AccessoryType	`enum`	No
AvatarGrid	AvatarGrid	No
AvatarStack	AvatarStack	No
ContextMenu	ContextMenu	No
Description	`string`	No
DetailImage	Image	No
DetailImageIsCircular	`boolean`	No	`false`
DetailImageText	`string`	No
DisplayDescriptionInMobile	`boolean`	No	`true`
Footnote	`string`	No
HorizontalIcons	Image	No
Icons	Image	No
OnAccessoryButtonPress	ActionOrRule	No
OnPress	ActionOrRule	No
PreserveIconStackSpacing	`boolean`	No	`true`
ProgressIndicator	`enum`	No
Selected	`boolean`	No	`false`
StatusImage	Image	No
StatusText	`string`	No
Styles	`object`	No
Subhead	`string`	No
SubstatusImage	Image	No
SubstatusText	`string`	No
Tags	`object[]`	No
Title	`string`	No
Visible	`boolean`	No	`true`
_Name	`string`	No
_Type	`enum`	No

AccessoryButtonIcon¶

Optional accessory button icon to be displayed in the cell. AccessoryButtonIcon would override the values defined on AccessoryButtonText, AccessoryType and ProgressIndicator.

type: Image

string

AccessoryButtonText¶

iOS and Web only. Optional accessory text button to be displayed in the cell. Maximum length for the value is 10 characters. AccessoryButtonText would override the values defined on AccessoryType and ProgressIndicator.

type: string

AccessoryType¶

Optional accessory icon to be displayed in the cell. If both AccessoryType and ProgressIndicator are set, only the ProgressIndicator is shown.

type: enum

The value of this property must be one of the known values listed below.

Value	Description
`Checkmark`	A checkmark icon.
`DetailButton`	An information icon.
`DetailDisclosureButton`	An information icon and a disclosure (chevron) control on iOS and web. An information icon only on Android.
`DisclosureIndicator`	A chevron-shaped control for presenting new content on iOS and web. Display as blank on Android.
`None`	No accessory view.

AvatarGrid¶

AvatarGrid contains avatars to be displayed below tags.

Properties can be defined and applied to all the displayed avatars in the grid.

type: AvatarGrid

AvatarStack¶

AvatarStack contains avatars to be displayed at the image portion on the left hand side of the object cell. Either 1 or 2 avatar(s) will be rendered.

1 Avatar is displayed in AvatarStack if array contain 1 avatar. 2 Avatars are displayed if array has more than 2 avatars. (Double Avatar display is not supported on web).

Properties can be defined and applied to the displayed avatars in the stack.

type: AvatarStack

ContextMenu¶

Define the contextmenu for the Object Cell. This item is only applicable for the dynamic ObjectTable.

type: ContextMenu

Description¶

Would not be displayed if control is rendered within FlexibleColumnLayout (except for last column). Specifically, in regular mode on iOS (iPhone in landscape, or iPad), it will not be displayed if Larger Accessibility Sizes are used.

type: string

DetailImage¶

This property is deprecated, use Image property of Avatar in AvatarStack. Image to be displayed in the cell.

type: Image

DetailImageIsCircular¶

This property is deprecated, use ImageIsCircular property of Avatar in AvatarStack. If the value is true, the image is displayed in a circular shape.

type: boolean
default: false

DetailImageText¶

This property is deprecated, use ImageText property of Avatar in AvatarStack. Text to be shown in image container when detail image is not present

type: string

DisplayDescriptionInMobile¶

If the value is true, description will be displayed on mobile.

type: boolean
default: true

Footnote¶

Text of footnote, which is initially hidden. Setting a non-empty string would no longer hide the label.

type: string

HorizontalIcons¶

Array of images to be rendered in a horizontal icons row under substatus. Each icon/image size is set to be 16px by 16px. Maximum number of images is 4.

type: Image[]

All array items must be of the type: Image

Icons¶

Array of images to be rendered in Icons Stack. Each icon/image size is set to be 16px by 16px. Count of visible images is limited to the count of active labels in the main stack.

type: Image[]

All array items must be of the type: Image

OnAccessoryButtonPress¶

Action or rule to be performed when an accessory button is pressed, i.e. AccessoryType (DetailButton or DetailDisclosureButton), ProgressIndicator, AccessoryButtonIcon or AccessoryButtonText.

type: ActionOrRule
Formatter and Binding are not supported

OnPress¶

Action/Rule to be triggered when the object cell is pressed.

type: ActionOrRule
Formatter and Binding are not supported

PreserveIconStackSpacing¶

When it’s set to true, spacing is preserved for iconStack even when there’s no icons/images added to the icon stack.

type: boolean
default: true

ProgressIndicator¶

Shows progress indicator icon in the cell. If both AccessoryType and ProgressIndicator are set, only the ProgressIndicator is shown. It is not supported when being used in ObjectCollection.

type: enum

The value of this property must be one of the known values listed below.

ProgressIndicator Known Values¶

Value	Description
`InProgress`
`ToDownload`
`Open`

Selected¶

The cell will be automatically selected when the list has been switched to Mulitple Selection Mode. More information please refer to Selection property of the ObjectTable.

type: boolean
default: false

StatusImage¶

A status image displayed in the status view.

type: Image

StatusText¶

A status label displayed in the status view. Would not be displayed if control is rendered within FlexibleColumnLayout (except for last column), use StatusImage instead.

type: string

Styles¶

A style to be applied on the title

type: object with following properties.

Property	Type	Required
Description	string	No
Footnote	string	No
StatusText	string	No
Subhead	string	No
SubstatusText	string	No
Title	string	No
DetailImage	string	No
DetailImageText	string	No
StatusImage	string	No
SubstatusImage	string	No
AccessoryButtonIcon	string	No
Icons	string	No
HorizontalIcons	string	No
BackgroundColor	string	No

Description¶

The string value is a style class name of Description. It is supported only for Android, if it is used in ObjectCollection.

TextPaint style class

Footnote¶

The string value is a style class name of Footnote.

TextPaint style class

StatusText¶

The string value is a style class name of StatusText.

Value style class

Subhead¶

The string value is a style class name of Subhead.

TextPaint style class

SubstatusText¶

The string value is a style class name of SubstatusText.

Value style class

Title¶

The string value is a style class name of Title.

TextPaint style class

DetailImage¶

The string value is a style class name of DetailImage.

Image style class

DetailImageText¶

The string value is a style class name of DetailImageText. Supported CSS properties are color and background-color.

Avatar style class

StatusImage¶

The string value is a style class name of StatusImage.

Image style class

SubstatusImage¶

The string value is a style class name of SubstatusImage.

Image style class

AccessoryButtonIcon¶

The string value is a style class name of AccessoryButtonIcon.

Image style class

Icons¶

The string value is a style class name of Icons.

Image style class

HorizontalIcons¶

The string value is a style class name of HorizontalIcons.

Image style class

BackgroundColor¶

The string value is a style class name of BackgroundColor.

Background style class

Subhead¶

A sub-header label in the main view.

type: string

SubstatusImage¶

A substatus image displayed below status view.

type: Image

SubstatusText¶

A substatus label displayed below status view. Would not be displayed if control is rendered within FlexibleColumnLayout (except for last column), use SubStatusImage instead.

type: string

Tags¶

An array of tags related to object cell to be displayed below footnote.

type: object[]

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

Property	Type	Required
`Color`	string	No
`Text`	string	Yes

Color¶

Only these 8 colors are available for tags. By default if no color is defined, tag color will be grey.

type: enum

The value of this property must be one of the known values listed below.

Value	Description
`Red`
`Blue`
`Green`
`Pink`
`Indigo`
`Mango`
`Teal`
`Grey`

Text¶

The text to be displayed in the tag

type: string

Title¶

Title text to be displayed on the cell

type: string

Visible¶

Only valid for static section, will be ignored in dynamic sections and List pickers.

type: boolean
default: true

_Name¶

type: string

_Type¶

The types supported for ObjectCell

type: enum

The value of this property must be one of the known values listed below.

_Type Known Values¶

Value	Description
`ObjectTable.Type.ObjectCell`
`ObjectCollection.Type.ObjectCell`

Examples¶

{
  "_Type": "Page",
  "_Name": "SectionedTablePage",
  "Caption": "Work Orders",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ObjectTable",
      "Visible": true,
      "ObjectCell": {
        "_Type": "ObjectTable.Type.ObjectCell",
        "_Name": "ObjectCell",
        "AccessoryType": "DisclosureIndicator",
        "Description": "{OrderDescription}",
        "DisplayDescriptionInMobile": false,
        "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}",
        "Styles": {
          "Title": "ObjectCellTitle",
          "Subhead": "ObjectCellSubhead",
          "Footnote": "ObjectCellFootnote",
          "Description": "ObjectCellDescription",
          "StatusText": "ObjectCellStatusText",
          "SubstatusText": "ObjectCellSubstatusText"
        }
      },
      "Target": {
        "EntitySet": "MyWorkOrderHeaderCollection",
        "Service": "/MDKApp/Services/Amw.service",
        "QueryOptions": "$expand=Operations&$orderby=OrderId"
      }
    }]
  }]
}

{   "_Type": "Page",
    "_Name": "SectionedTablePage",
    "Caption": "Accessory Button Examples",
    "Controls": [
        {
            "Sections": [
                {
                    "Header": {
                        "Caption": "4 different Accessory Button Image Types"
                    },
                    "ObjectCells": [
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell1",
                                "AccessoryButtonIcon": "/MDKDevApp/Images/workorder.png",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message1.action",
                                "Title": "Local Image Path"
                            }
                        },
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell2",
                                "AccessoryButtonIcon": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message3.action",
                                "Title": "Https Image Path"
                            }
                        },
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell3",
                                "AccessoryButtonIcon": "res://icon.png",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message3.action",
                                "Title": "res:// Image Path"
                            }
                        },
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell4",
                                "AccessoryButtonIcon": "sap-icon://home",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message3.action",
                                "Title": "sap-icon Image Path"
                            }
                        }
                    ],
                    "_Type": "Section.Type.ObjectTable"
                },
                {
                    "Header": {
                        "Caption": "Accessory Button Text"
                    },
                    "ObjectCells": [
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell5",
                                "AccessoryButtonText": "Click Here",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message1.action",
                                "Title": "Accessory Button Text"
                            }
                        }
                    ],
                    "_Type": "Section.Type.ObjectTable"
                }
            ],
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable"
        }
    ],
}

{   "_Type": "Page",
    "_Name": "SectionedTablePage",
    "Caption": "Accessory Button Examples with Style",
    "Controls": [
        {
            "Sections": [
                {
                    "Header": {
                        "Caption": "Accessory Button SAP Icon with Style"
                    },
                    "ObjectCells": [
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell1",
                                "AccessoryButtonIcon": "sap-icon://home",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message3.action",
                                "Title": "Accessory Button SAP Icon with Style",
                                "Styles":{
                                  "AccessoryButtonIcon": "font-icon-class"
                                }
                            }
                        }
                    ],
                    "_Type": "Section.Type.ObjectTable"
                },
                {
                    "Header": {
                        "Caption": "Accessory Button Text with Style"
                    },
                    "ObjectCells": [
                        {
                            "ObjectCell": {
                                "_Type": "ObjectTable.Type.ObjectCell",
                                "_Name": "ObjectCell2",
                                "AccessoryButtonText": "Click Here",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message1.action",
                                "Title": "Accessory Button Text with Style",
                                "Styles":{
                                  "AccessoryButtonText": "fa-brands"
                                }
                            }
                        }
                    ],
                    "_Type": "Section.Type.ObjectTable"
                }

            ],
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable"
        }
    ],
}

{
    "_Type": "Page",
    "_Name": "StaticObjectTable",
    "Caption": "Static ObjectTable with individual avatar styling",
    "Controls": [{
        "_Type": "Control.Type.SectionedTable",
        "_Name": "Sections",
        "Sections": [{
            "_Type": "Section.Type.ObjectTable",
            "ObjectCells": [
                {
                    "ObjectCell": {
                        "_Type": "ObjectTable.Type.ObjectCell",
                        "_Name": "ObjectCell1",
                        "HorizontalIcons": [
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png"
                        ],
                        "Tags": [
                            {
                                "Text": "tag 1",
                                "Color": "Red"
                            },
                            {
                                "Text": "tag 2",
                                "Color": "Blue"
                            }
                        ],
                        "AvatarStack": {
                            "Avatars": [
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "A",
                                    "Style": "avatar"
                                },
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "B",
                                    "Style": "avatar"
                                },
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "C",
                                    "Style": "avatar"
                                },
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "D",
                                    "Style": "avatar"
                                },
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "E",
                                    "Style": "avatar"
                                },
                                {
                                    "Image": "sap-icon://customer",
                                    "ImageText": "F",
                                    "Style": "avatar"
                                }
                            ],
                            "ImageIsCircular": true,
                            "ImageHasBorder": true,
                            "BadgeImage": "sap-icon://settings",
                            "OverflowToGrid": {
                                "Enabled": true,
                                "GridMax": 3,
                                "ImageIsCircular": false
                            }
                        }
                    }
                }
            ],
            "_Name": "Section"
        }]
    }]
}

{
    "_Type": "Page",
    "_Name": "StaticObjectTable",
    "Caption": "Static ObjectTable",
    "Controls": [{
        "_Type": "Control.Type.SectionedTable",
        "_Name": "Sections",
        "Sections": [{
            "_Type": "Section.Type.ObjectTable",
            "ObjectCells": [
                {
                    "ObjectCell": {
                        "_Type": "ObjectTable.Type.ObjectCell",
                        "_Name": "ObjectCell1",
                        "HorizontalIcons": [
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png",
                            "/TestApp/Images/action.png"
                        ],
                        "Tags": [
                            {
                                "Text": "tag 1",
                                "Color": "Pink"
                            },
                            {
                                "Text": "tag 2",
                                "Color": "Mango"
                            }
                        ],
                        "AvatarStack": {
                            "Avatars": [
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "A"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "B"
                                }
                            ],
                            "ImageIsCircular": true,
                            "ImageHasBorder": true,
                            "BadgeImage": "sap-icon://settings"
                        },
                        "AvatarGrid": {
                            "Avatar": [
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "G"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "H"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "I"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "J"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "K"
                                },
                                {
                                    "Image": "/MDKApp/Images/workorder.png",
                                    "ImageText": "L"
                                }
                            ],
                            "GridMax": 4,
                            "ImageIsCircular": false
                        }
                    }
                }
            ],
            "_Name": "Section"
        }]
    }]
}

{
    "_Type": "Page",
    "_Name": "ObjectCellBindingCollection",
    "Caption": "ObjectCell Binding Collection",
    "Controls": [{
        "Sections": [{
            "ObjectCell": {
                "_Type": "ObjectTable.Type.ObjectCell",
                "_Name": "ObjectCell",
                "AccessoryType": "DisclosureIndicator",
                "Description": "{OrderDescription}",
                "DetailImage": "/MDKDevApp/Images/workorder.png",
                "DetailImageIsCircular": false,
                "Icons": [
                    "/MDKDevApp/Images/icon_severity_medium.png",
                    "/MDKDevApp/Images/open.png"
                ],
                "StatusImage": "/MDKDevApp/Images/workorder_details.png",
                "Title": "{OrderId}",
                "AvatarStack": {
                    "Avatar": {
                        "Image": "/MDKDevApp/Rules/Odata/GetAvatarsForStack.js",
                        "ImageText": "{OperationNo}"
                    },
                    "BindingCollection": "{Operations}",
                    "ImageIsCircular": true,
                    "ImageBorder": true,
                    "BadgeImage": "/MDKDevApp/Images/Open.png",
                    "OverflowToGrid": {
                        "Enabled": false
                    }
                },
                "AvatarGrid": {
                    "GridMax": 3,
                    "ImageIsCircular": true,
                    "Avatar": {
                        "Image": "/MDKDevApp/Rules/Odata/GetAvatarsForGrid.js",
                        "ImageText": "{OperationNo}"
                    },
                    "BindingCollection": "{Operations}"
                }
            },
            "Target": {
                "EntitySet": "MyWorkOrderHeaders",
                "Service": "/MDKDevApp/Services/Amw.service",
                "QueryOptions": "$expand=Operations&$top=5&$orderby=OrderId"
            },
            "_Type": "Section.Type.ObjectTable"
        }],
        "_Type": "Control.Type.SectionedTable",
        "_Name": "SectionedTable"
    }]
}

Style Classes Definition¶

/* Object Cell - Title */
.ObjectCellTitle {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
  text-decoration: underline;
}

/* Object Cell - Subhead */
.ObjectCellSubhead {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
  text-decoration: line-through;
}

/* Object Cell - Footnote */
.ObjectCellFootnote {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* Object Cell - Description */
.ObjectCellDescription {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* Object Cell - StatusText */
.ObjectCellStatusText {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* Object Cell - SubstatusText */
.ObjectCellSubstatusText {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

.font-icon-class {
  font-size: 8;
  color: red;
  background-color: grey;
}

/* fa-brands-400.ttf */
.fa-brands {
  color: #E9967A;
}

/* Object Cell - Individual Avatar Styling in AvatarStack and AvatarGrid */
.avatar {
  background-color: yellow; /* For ImageText Only */
  color: black;
  font-size: 16; /* For Image Only, applicable only for SAP icon and font icon types */
}