ContactCellItem

ContactCellItem Properties

Property	Type	Required	Default
ActivityItems	ActivityItem	Optional
ContextMenu	ContextMenu	Optional
Description	string	Optional
DetailImage	Image	Optional
Headline	string	Optional
OnPress	ActionOrRule	Optional
Styles	object	Optional
Subheadline	string	Optional
Visible	boolean	Optional	true
_Name	string	Optional

---

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

---

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

---

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	Default
Description	string	Optional
Headline	string	Optional
Subheadline	string	Optional
DetailImage	string	Optional

Description

The string value is a style class name for Description.

• TextPaint style class

Headline

The string value is a style class name for Headline.

• TextPaint style class

Subheadline

The string value is a style class name for Subheadline.

• TextPaint style class

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

• Image style class

---

Subheadline

The label holds subheadline text.

• type: string

---

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",
        "Headline": "Pathik Chitania",
        "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": "pathik.chitania@sap.com"
        },
        {
          "ActivityType": "Detail",
          "ActivityValue": "This is an alert"
        }],
        "Styles": {
          "Headline": "ContactCellHeadline",
          "Subheadline": "ContactCellSubheadline",
          "Description": "ContactCellDescription"
        }
      }]
    }]
  }]
}

Font icon and style

{
  "_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",
        "Headline": "Pathik Chitania",
        "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": "pathik.chitania@sap.com"
        },
        {
          "ActivityType": "Detail",
          "ActivityValue": "This is an alert"
        }],
        "Styles": {
          "Headline": "ContactCellHeadline",
          "Subheadline": "ContactCellSubheadline",
          "Description": "ContactCellDescription",
          "DetailImage": "font-icon-class"
        }
      }]
    }]
  }]
}

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

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