ContactCellItem¶

When assigning a rule to a property of ContactCellItem, the rule will be passed an instance of the following proxy class as an argument:

BindableSectionProxy

ContactCellItem Properties¶

Property	Type	Required	Default
ActivityItems	ActivityItem	No
BadgeImage	Image	No
ContextMenu	ContextMenu	No
Description	`string`	No
DetailImage	Image	No
DetailImageIsCircular	`boolean`	No	`true`
DetailImageText	`string`	No
Headline	`string`	No
OnPress	ActionOrRule	No
Styles	`object`	No
Subheadline	`string`	No
UseHeadlineForDetailImage	`boolean`	No	`false`
Visible	`boolean`	No	`true`
_Name	`string`	No

ActivityItems¶

Activity items to be displayed in the control.

For iOS devices, a defined iOS app is used on the client app for video calls when you set the VideoCall parameter.

For Android devices, there’s no standard app that is used for a video call on the client app when you set the VideoCall parameter.

type: ActivityItem[]

All array items must be of the type: ActivityItem

BadgeImage¶

Badge image to be attached to DetailImage of ContactCell. If DetailImage or DetailImageText is not present, the Badge image will not be shown as well.

If image is not provided or invalid, the view will be empty.

type: Image

ContextMenu¶

Define the contextmenu for the Contact Cell. This item is only applicable for the dynamic ContactTable.

type: ContextMenu

Description¶

Description text

type: string

DetailImage¶

Image of ContactCell.

If image is not provided, for mobile, the view will be empty but in webclient, the view displays Headline text based avatar image.

type: Image

DetailImageIsCircular¶

If false, the image is displayed in a rounded rectangular shape. If true, the image is displayed in a circular shape.

type: boolean
default: true

DetailImageText¶

Text to be shown in image container when detail image is not present. Max character that can be shown is 2~4 depending on the width of each character.

type: string

Headline¶

The label holds headline text.

type: string

OnPress¶

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

type: ActionOrRule
Formatter and Binding are not supported

Styles¶

type: object with following properties.

Property	Type	Required
Description	string	No
Headline	string	No
Subheadline	string	No
BadgeImage	string	No
DetailImage	string	No
DetailImageText	string	No

Description¶

The string value is a style class name of Description.

TextPaint style class

Headline¶

The string value is a style class name of Headline.

TextPaint style class

Subheadline¶

The string value is a style class name of Subheadline.

TextPaint style class

BadgeImage¶

The string value is a style class name of BadgeImage.

Image 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. Also applicable to text used when UseHeadlineForDetailImage is set to true.

Avatar style class

Subheadline¶

The label holds subheadline text.

type: string

UseHeadlineForDetailImage¶

If true and no DetailImage is provided, the first two initials from the Headline will be shown in the image container. Have precedence over DetailImageText.

type: boolean
default: false

Visible¶

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

type: boolean
default: true

_Name¶

type: string

Examples¶

{
  "_Type": "Page",
  "_Name": "ContactCellPage",
  "Caption": "Contact Cell Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ContactCell",
      "ContactCell": [{
        "DetailImage": "/MDKApp/Images/icon.png",
        "BadgeImage": "sap-icon://sys-enter-2",
        "Headline": "John Doe",
        "Subheadline": "Software Developer",
        "Description": "3010 Highland Pkwy, Suite 900, Downers Grove, IL 60515",
        "Visible": true,
        "ActivityItems": [{
          "ActivityType": "VideoCall",
          "ActivityValue": "630-667-7983"
        },
        {
          "ActivityType": "Email",
          "ActivityValue": "john.doe@sap.com"
        },
        {
          "ActivityType": "Detail",
          "ActivityValue": "This is an alert"
        }],
        "Styles": {
          "Headline": "ContactCellHeadline",
          "Subheadline": "ContactCellSubheadline",
          "Description": "ContactCellDescription"
        }
      }]
    }]
  }]
}

Font icon and style - DetailImage and BadgeImage¶

{
  "_Type": "Page",
  "_Name": "ContactCellPage",
  "Caption": "Contact Cell Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ContactCell",
      "ContactCell": [{
        "DetailImage": "sap-icon://home",
        "BadgeImage": "sap-icon://sys-enter-2",
        "Headline": "John Doe",
        "Subheadline": "Software Developer",
        "Description": "3010 Highland Pkwy, Suite 900, Downers Grove, IL 60515",
        "Visible": true,
        "ActivityItems": [{
          "ActivityType": "VideoCall",
          "ActivityValue": "630-667-7983"
        },
        {
          "ActivityType": "Email",
          "ActivityValue": "john.doe@sap.com"
        },
        {
          "ActivityType": "Detail",
          "ActivityValue": "This is an alert"
        }],
        "Styles": {
          "Headline": "ContactCellHeadline",
          "Subheadline": "ContactCellSubheadline",
          "Description": "ContactCellDescription",
          "DetailImage": "font-icon-class",
          "BadgeImage": "font-icon-class-badge"
        }
      }]
    }]
  }]
}

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

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

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

/* Contact Cell - DetailImageText */
.ContactCellDetailImageText {
  color: #fff;
  background-color: #007aff;
}

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

.font-icon-class-badge {
  font-size: 12;
  color: blue;
  background-color: #39ff0d;
}

DetailImageText and Circular Avatar¶

{
  "_Type": "Page",
  "_Name": "ContactCellPage",
  "Caption": "Contact Cell Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ContactCell",
      "ContactCell": [{
        "Headline": "Jane Smith",
        "DetailImageText": "JS",
        "DetailImageIsCircular": false,
        "BadgeImage": "sap-icon://sys-enter-2",
        "Description": "Some description",
        "Visible": true,
        "Styles": {
          "DetailImageText": "ContactCellDetailImageText",
          "BadgeImage": "font-icon-class-badge"
        }
      }]
    }]
  }]
}

UseHeadlineForDetailImage¶

{
  "_Type": "Page",
  "_Name": "ContactCellPage",
  "Caption": "Contact Cell Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ContactCell",
      "ContactCell": [{
        "Headline": "John Doe",
        "UseHeadlineForDetailImage": true,
        "Description": "Some description",
        "Visible": true,
        "Styles": {
          "DetailImageText": "ContactCellDetailImageText"
        }
      }]
    }]
  }]
}