Profile Header

The Profile Header helps the user to recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details.

A Profile Header consists of a profile image, object name (headline, and sub-headline), description, and contact actions.

Examples

Profile Header on a tablet:

Profile Header on a phone:

Construction

Set up FioriProfileHeader:

val description = FioriProfileDescription(
        description = "Next 1:1 in 6 days",
        advancedDescription = "3 Recent Updates, 1 Urgent" // This parameter is optional. Only one line of description will be displayed if it is not set.
    )
val callAction = FioriProfileContactAction.CALL.onClick {
    // do something here on call action icon clicked
}
FioriProfileHeader(
    content = FioriProfileContent(
        name = "Michael Adams",
        title = "Senior Consultant", // This is optional.
        description = description, // This is optional.
    ),
    avatar = FioriProfileHeaderDefaults.defaultAvatar,
    maxLinesForName = 2,
    contactActions = listOf(callAction, FioriProfileContactAction.MESSAGE),
)

• content denotes the encapsulated content to be displayed in the profile header. title and description are optional when creating FioriProfileContent.

• avatar is the a FioriIcon object that holds the profile image of the profile header.

• maxLinesForName is the maximum number of lines for the name section. By default, it is one. Once it is set to a value lower than 1 or greater than 2, it will be coerced to be 1 at least and to 2 at most.
• contactActions is the list that contains all the contact actions that will be displayed in the bottom of the profile header. There can be at most five actions in the list. Each action will be displayed in order.

If the developer wants to show a customized view in the bottom of the profile header, FioriProfileHeader can also be set up using something similar to the following sample code:

var profileActionTitle by remember {
    mutableStateOf("START 1:1")
}

var profileActionStarted by remember {
    mutableStateOf(false)
}

val profileAction = @Composable {
    Text(
        text = profileActionTitle,
        style = MaterialTheme.fioriHorizonAttributes.textAppearanceBodyLarge.copy(fontWeight = FontWeight.Bold),
        modifier = Modifier.clickable {
            profileActionStarted = !profileActionStarted
            if(profileActionStarted){
                profileActionTitle = "END 1:1"
            }else{
                profileActionTitle = "START 1:1"
            }
        }
    )
}

val description = FioriProfileDescription(
    description = "Next 1:1 in 6 days",
    advancedDescription = "3 Recent Updates, 1 Urgent"
)
FioriProfileHeader(
    content = FioriProfileContent(
        name = "Michael Adams",
        title = "Senior Consultant",
        description = description,
    ),
    avatar = FioriProfileHeaderDefaults.defaultAvatar,
    maxLinesForName = 2,
    profileAction = profileAction
)

• profileAction can be an arbitrary composable function. Developers can assign any composable view here to customize the bottom section of the profile header.

---

Last update: June 15, 2023