ObjectCell¶

ObjectCell Properties¶

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

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 equal to one of the known values 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).

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 equal to one of the known values 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	Optional
Footnote	string	Optional
StatusText	string	Optional
Subhead	string	Optional
SubstatusText	string	Optional
Title	string	Optional
DetailImage	string	Optional
DetailImageText	string	Optional
StatusImage	string	Optional
SubstatusImage	string	Optional
AccessoryButtonIcon	string	Optional
Icons	string	Optional
HorizontalIcons	string	Optional
BackgroundColor	string	Optional

Description¶

The string value is a style class name for 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 for Footnote.

TextPaint style class

StatusText¶

The string value is a style class name for StatusText.

Value style class

Subhead¶

The string value is a style class name for Subhead.

TextPaint style class

SubstatusText¶

The string value is a style class name for SubstatusText.

Value style class

Title¶

The string value is a style class name for Title.

TextPaint style class

DetailImage¶

The string value is a style class name for DetailImage.

Image style class

DetailImageText¶

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

Avatar style class

StatusImage¶

The string value is a style class name for StatusImage.

Image style class

SubstatusImage¶

The string value is a style class name for SubstatusImage.

Image style class

AccessoryButtonIcon¶

The string value is a style class name for AccessoryButtonIcon.

Image style class

Icons¶

The string value is a style class name for Icons.

Image style class

HorizontalIcons¶

The string value is a style class name for HorizontalIcons.

Image style class

BackgroundColor¶

The string value is a style class name for 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	Optional
`Text`	string	Required

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 equal to one of the known values 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

Examples¶

{
  "_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}",
        "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": {
                                "AccessoryButtonIcon": "/MDKDevApp/Images/workorder.png",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message1.action",
                                "Title": "Local Image Path"
                            }
                        },
                        {
                            "ObjectCell": {
                                "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": {
                                "AccessoryButtonIcon": "res://icon.png",
                                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action",
                                "OnAccessoryButtonPress": "/MDKDevApp/Actions/Messages/Message3.action",
                                "Title": "res:// Image Path"
                            }
                        },
                        {
                            "ObjectCell": {
                                "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": {
                                "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": {
                                "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": {
                                "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": {
                        "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": {
                        "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": {
                "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;
}

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

/* 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;
}

/* 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 */
}