Skip to content

ContactCellItem

ContactCellItem Properties

Property Type Required Default
ActivityItems ActivityItem No
ContextMenu ContextMenu No
Description string No
DetailImage Image No
Headline string No
OnPress ActionOrRule No
Styles object No
Subheadline string No
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


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 No
Headline string No
Subheadline string No
DetailImage string No

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.


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": "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

{
  "_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": "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"
        }
      }]
    }]
  }]
}
/* 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;
}