ProfileHeader

It is used to give quick information of a contact in the header and access to the various methods of communicating with a contact.

ProfileHeader Properties

Property	Type	Required	Default
DataSubscriptions	DataSubscriptions	Optional
ProfileHeader	object	Optional
Visible	boolean	Optional	true
_Name	string	Optional
_Type	const	Required

---

DataSubscriptions

Array of data change events to subscribe to.

• type: DataSubscriptions

---

ProfileHeader

• type: object with following properties.

Property	Type	Required	Default
Headline	string	Optional
Subheadline	string	Optional
Description	string	Optional
DetailImage	Image	Optional
DetailImageIsCircular	boolean	Optional
ActivityItems	array	Optional
Styles	object	Optional
Target	Target	Optional

Headline

Text for headline label.

Subheadline

Text for sub headline label.

Description

Description text displayed on the cell.

DetailImage

Image to be displayed for the Profile. Supports rendering of both locally saved images and images from Web (https only).

• Image

DetailImageIsCircular

If the value is True, the image is displayed in a circular shape.

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.

All array items must be of the type:

• ActivityItem

Styles

A style to be applied to the Profile Header.

• type: object with following properties.

Property	Type	Required	Default
Description	string	Optional
Headline	string	Optional
Subheadline	string	Optional
BackgroundColor	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

BackgroundColor

The string value is a style class name for BackgroundColor.

• Background style class

DetailImage

The string value is a style class name for DetailImage. It is only applicable to SAP icon or font icon types (supported CSS properties are font-size and color).

• Image style class

Target

Only the first record of any entity set returned by the target will be used.

• Target

---

Visible

Set the visibility of this control.

• type: boolean
• default: true

---

_Name

• type: string

---

_Type

• type: const

The value of this property must be equal to:

"Section.Type.ProfileHeader"

---

Examples

{
  "_Type": "Page",
  "_Name": "ProfileHeaderPage",
  "Caption": "Profile header Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "_Type": "Section.Type.ProfileHeader",
      "Visible": true,
      "ProfileHeader": {
        "DetailImage": "sap-icon://home",
        "DetailImageIsCircular": true,
        "Headline": "John Doe",
        "Subheadline": "Software Developer",
        "Description": "3010 Highland Pkwy, Suite 900, Downers Grove, IL 60515",
        "Target": {
          "EntitySet": "MyWorkOrderHeaders",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$top=1"
        },
        "ActivityItems": [{
          "ActivityType": "VideoCall",
          "ActivityValue": "630-667-7983"
        },
        {
          "ActivityType": "Email",
          "ActivityValue": "john.doe@sap.com"
        },
        {
          "ActivityType": "Detail",
          "ActivityValue": "This is an alert"
        }],
        "Styles": {
          "Headline": "ProfileHeaderHeadline",
          "Subheadline": "ProfileHeaderSubheadline",
          "Description": "ProfileHeaderDescription",
          "BackgroundColor":"ProfileHeaderBackgroundColor",
          "DetailImage": "font-icon-class"
        }
      }
    },
    {
      "_Type": "Section.Type.ProfileHeader",
      "ProfileHeader": {
        "Headline": "{FullName}",
        "DetailImage": "/MDKApp/Rules/Profile/GetSelfPhoto.js",
        "ActivityItems": [
          {
            "ActivityType": "Message",
            "ActivityValue": "{PrimaryPhoneNumber}"
          },
          {
            "ActivityType": "Phone",
            "ActivityValue": "{PrimaryPhoneNumber}"
          },
          {
            "ActivityType": "VideoCall",
            "ActivityValue": "{PrimaryPhoneNumber}"
          },
          {
            "ActivityType": "Email",
            "ActivityValue": "{Email}"
          }
        ],
        "Target": "{MemberProfile/PhoneNumbers}"
      },
      "Visible": "/MDKApp/Rules/Profile/IsProfileHeaderVisible.js"
    }]
  }]
}

Style Classes Definition

/* ProfileHeader - Headline */
.ProfileHeaderHeadline {
  color: white;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* ProfileHeader - Subheadline */
.ProfileHeaderSubheadline {
  color: white;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* ProfileHeader - Description */
.ProfileHeaderDescription {
  color: white;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* ProfileHeader - BackgroundColor */
.ProfileHeaderBackgroundColor {
  background-color: #0000FF;
}

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