Customize the User Profile Widget

Learn how to customize the User Profile widget with custom CSS.

Employee App
Front Door Intranet

Widgets are design elements that you can add to Pages and News to display information in an appealing and engaging manner. When you add the User Profile widget to a page or news post, it adds a tile that displays details from the user profile including position, department, and location.

In this tutorial, you will learn how to customize the User Profile widget to display the user’s phone number instead of default details such as position, department, and location.

This tutorial is intended to help you learn how to change the default details and display other information instead. It only demonstrates how to display a telephone number. Feel free to use this as a starting point to display the information of your choice.

On completing this tutorial, you will be familiar with the CSS selectors required to customize the User Profile widget.

Using custom CSS should be approached with caution. Apply styles only if you have experience with CSS, and always preview the changes.

You need to hide the default details, such as position, department, and location before you include the new information.

  1. In the Studio, navigate to the Settings > Branding.
    The Branding page opens.
  2. Under Custom Styling, click Adjust the styling of your app.
    The Custom Styling editor opens.
  3. In the editor, copy and paste the CSS lines.
    user-profile-block .user-profile-summary-defaults {
      display: none;
    }
  1. Click Preview to test your CSS customizations.
  2. Click Save.

You have hidden the default information.

You can display any other user profile field instead of the telephone number. Ensure that the profile field you want to display is filled in correctly for it to display accurately.

You can display any profile field in the user profile, by inspecting the User Profile widget in your browser’s developer console to get its profile field attributes from the frontend code.

  1. In the Studio, navigate to the Settings > Branding.
    The Branding page opens.
  2. Under Custom Styling, click Adjust the styling of your app.
    The Custom Styling editor opens.
  3. In the editor, copy and paste the CSS lines.
    user-profile-block .user-profile-summary::before {
      content: attr(data-field-phoneNumber) "  ";
    }
  1. Click Preview to test your CSS customizations.
  2. Click Save.
    You have added the CSS code snippet to display the telephone number in the User Profile widget.

You have learned how to display the user’s telephone number instead of the default details in the User Profile widget.