Skip to content

ObjectCell

ObjectCell Properties

Property Type Required Default
AccessoryButtonIcon Image Optional
AccessoryButtonText string Optional
AccessoryType enum Optional
ContextMenu ContextMenu Optional
Description string Optional
DetailImage Image Optional
DetailImageIsCircular boolean Optional false
DetailImageText string Optional
Footnote string 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
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.

ContextMenu

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


Description

Would not be displayed if control is rendered within FlexibleColumnLayout (except for last column).

  • type: string

DetailImage

Image to be displayed in the cell.


DetailImageIsCircular

If the value is true, the image is displayed in a circular shape.

  • type: boolean
  • default: false

DetailImageText

Text to be shown in image container when detail image is not present

  • type: string

Footnote

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

  • type: string

Icons

Arrary 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.


OnPress

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


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.

  • 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. It’s expected to either set StatusText or StatusImage to display either one as the same position. When both are set, StatusImage would be displayed in priority.


StatusText

A status label displayed in the status view. It’s expected to either set StatusText or StatusImage to display either one as the same position. When both are set, StatusImage would be displayed in priority. 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 Default
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
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.

Footnote

The string value is a style class name for Footnote.

StatusText

The string value is a style class name for StatusText.

Subhead

The string value is a style class name for Subhead.

SubstatusText

The string value is a style class name for SubstatusText.

Title

The string value is a style class name for Title.

DetailImage

The string value is a style class name for DetailImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

DetailImageText

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

StatusImage

The string value is a style class name for StatusImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

SubstatusImage

The string value is a style class name for SubstatusImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

BackgroundColor

The string value is a style class name for BackgroundColor.


Subhead

A sub-header label in the main view.

  • type: string

SubstatusImage

A substatus image displayed below status view. It’s expected to either set SubStatusText or SubStatusImage to display either one as the same position. When both are set, SubStatusImage would be displayed in priority.


SubstatusText

A substatus label displayed below status view. It’s expected to either set SubStatusText or SubStatusImage to display either one as the same position. When both are set, SubStatusImage would be displayed in priority. Would not be displayed if control is rendered within FlexibleColumnLayout (except for last column), use SubStatusImage instead.

  • 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}",
        "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"
        }
    ],
}

Style Classes Definition

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

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

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

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

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

/* Object Cell - SubstatusText */
.ObjectCellSubstatusText {
  background-color: #0000FF;
  color: black;
  font-style: UIFontTextStyleBody;  /* 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;
}