Skip to content

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 No
ProfileHeader object No
Visible boolean No true
_Name string No
_Type const Yes

DataSubscriptions

Array of data change events to subscribe to.

ProfileHeader

  • type: object with following properties.
Property Type Required Default
Headline string No
Subheadline string No
Description string No
DetailImage Image No
DetailImageIsCircular boolean No
ActivityItems array No
Styles object No
Target Target No

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

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:

Styles

A style to be applied to the Profile Header.

  • type: object with following properties.
Property Type Required Default
Description string No
Headline string No
Subheadline string No
BackgroundColor string No
DetailImage string No

Description

The string value is a style class name of Description.

Headline

The string value is a style class name of Headline.

Subheadline

The string value is a style class name of Subheadline.

BackgroundColor

The string value is a style class name of BackgroundColor.

DetailImage

The string value is a style class name of Image. The CSS property background-color is supported for all image types, while font-size and color are additionally supported for SAP icon and font icon types.

Target

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

Visible

Set the visibility of this control.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"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;
  background-color: grey;
}