Skip to content

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

Activities supported by default including phone, email, message, videoCall and detail. Maximum 4 (top 4 from the list) items are shown on mobile devices whereas there is no limit on web.

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


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.


Headline

The label holds headline text.

  • type: string

OnPress

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


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.

Headline

The string value is a style class name for Headline.

Subheadline

The string value is a style class name for Subheadline.

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


Subheadline

The label holds subheadline text.

  • type: string

Visible

Set the visibility of this control.

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

Example with 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"
        }
      }]
    }]
  }]
}

Style Classes Definition

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

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

/* Contact Cell - Description */
.ContactCellDescription {
  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;
}