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.

type: ContextMenu

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.

type: Image

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.

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.

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.

type: Image

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

type: Image

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