Display User Information in Your Custom Widget

Learn how to configure your custom widget to display the user information for different use cases.

Employee App
Front Door Intranet

The Custom Widget SDK allows you to configure your custom widget to display various user information based on your business use cases.

This tutorial is for advanced developers.


You must have already created a custom widget before proceeding with this tutorial.

In this tutorial, you will learn to display the following in your custom widget:

  • Information of the signed-in user
  • Custom profile fields of the signed-in user

As this tutorial is designed to help you get started retrieving user information, only a simple use case is shown. You can use this as a base and customize your widget further based on your business use case.

You can configure your custom widget to display user information. Use one of the following functions to retrieve the current user information:

  • getUserInformation()
    • returns the current user when no parameter is used
    • use Staffbase User ID as parameter to fetch a specific user: getUserInformation(userId)
  • getUserInformationByExternalId()
    • use external ID of user as parameter to fetch a specific user: getUserInformationByExternalId(externalId)

On completing these steps, you will be familiar with the properties and functions required to fetch user information.

  1. Pass the widget API element as a property to your custom widget component.
const factory = (Base, _widgetApi) => {
  return class CustomBlock extends BaseBlockClass implements BaseBlock {
    private _root: ReactDOM.Root | null = null;


    constructor() {
      super();
    }
    ...
    public renderBlock(container: HTMLElement): void {
      this._root ??= ReactDOM.createRoot(container);
      this._root.render(<CustomWidget {...this.props} widgetApi={_widgetApi} />);
    }
    ...
  };
};

The following user attributes are fetched:

  • avatar
  • department
  • externalId
  • firstName
  • id
  • lastName
  • location
  • phoneNumber
  • position
  • groupIds

The attributes represent the system profile fields within the Staffbase App or Intranet.
Read more about the Staffbase User Model here and about the Staffbase User Identifier (external ID) here.

In addition to the above attributes, if you want the widget to display the attributes primaryEmail and primaryUsername, you need to reach out to your Customer Success Manager to activate the option for you.

  1. Fetch the current user accessing the custom widget and display the user’s attributes.
import React, { useEffect, useState, ReactElement } from "react";
import { SBUserProfile, WidgetApi } from "widget-sdk";


export interface CustomWidgetProps extends BlockAttributes {
  widgetApi: WidgetApi;
}


export const CustomWidget = ({ widgetApi }: CustomWidgetProps): ReactElement => {


  const [user, setUser] = useState<SBUserProfile | null>(null);


  useEffect(() => {
    widgetApi.getUserInformation().then((user) => {
      setUser(user);
    });
  }, []);


  return <>
    { user ?
      <div>
        <h1 style={{ marginBottom: 10 }}>
           {user.firstName} {user.lastName} 🎉
        </h1>
        <p>is from the {user.location} office and works in the {user.department} department.</p>
      </div>
      :
      null
    }
  </>
};

You have configured your widget to display user information.

You can also display custom profile fields of users in your widget by using the custom profile field ID as an attribute key, example {user.customProfileFieldId}.

On completing these steps, you will be familiar with the properties and functions required to display custom profile fields of a user.

  1. Pass the widget API element as a property to your custom widget component.
const factory = (Base, _widgetApi) => {
  return class CustomBlock extends BaseBlockClass implements BaseBlock {
    private _root: ReactDOM.Root | null = null;


    constructor() {
      super();
    }
    ...
    public renderBlock(container: HTMLElement): void {
      this._root ??= ReactDOM.createRoot(container);
      this._root.render(<CustomWidget {...this.props} widgetApi={_widgetApi} />);
    }
    ...
  };
};
  1. Fetch custom profile fields.
import React, { useEffect, useState, ReactElement } from "react";
import { SBUserProfile, WidgetApi } from "widget-sdk";


export interface CustomWidgetProps extends BlockAttributes {
  widgetApi: WidgetApi;
}


export const CustomWidget = ({ widgetApi }: CustomWidgetProps): ReactElement => {


  const [user, setUser] = React.useState<UserListItem[]>();


  useEffect(() => {
    widgetApi.getUserInformation().then((user) => {
      setUser(user);
    });
  }, []);


  return <>
    {
      user ? (
        <div>
          <p style={{ marginBottom: 10 }}>All user attributes:</p>
          <ul>
            {Object.entries(user).map(([key, value]) => (
              <li key={key}>{`${key}: ${value}`}</li>
            ))}
          </ul>
        </div>
      ) : null
    }
  </>
};

You have configured your the custom widget to display custom fields.