Display User Information in Your Custom Widget

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

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

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)

1. Pass the widget API element as a property to your custom widget component.

Copy To Clipboard
1const factory = (Base, widgetApi) => {
2  return class CustomBlock extends BaseBlockClass implements BaseBlock {
3    constructor() {
4      super();
5    }
6    ...
7    renderBlock(container): void {
8      ReactDOM.render(
9        <CustomWidget {...this.props} widgetApi={widgetApi} />, container
10      );
11    }
12    ...
13  };
14};

2. Fetch the current user accessing the custom widget and display the user's attributes.

Copy To Clipboard
1import React, { useEffect, useState, FunctionComponent, ReactElement } from "react";
2import { SBUserProfile, WidgetApi } from "widget-sdk";
3
4export interface CustomWidgetProps {
5  widgetApi: WidgetApi;
6}
7
8export const CustomWidget: FunctionComponent<CustomWidgetProps> = ({ widgetApi }: CustomWidgetProps): ReactElement | null => {
9
10  const [user, setUser] = useState<SBUserProfile | null>(null);
11  
12  useEffect(() => {
13    widgetApi.getUserInformation().then((user) => {
14      setUser(user);
15    });
16  }, []);
17
18  return <>
19    { user ? 
20      <div>
21        <h1 style={{ marginBottom: 10 }}>
22           {user.firstName} {user.lastName} 🎉
23        </h1>
24        <p>is from the {user.location} office and works in the {user.department} department.</p>
25      </div>
26      : 
27      null 
28    }
29  </>
30};

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.

Copy To Clipboard
1const factory = (Base, widgetApi) => {
2  return class CustomBlock extends BaseBlockClass implements BaseBlock {
3    constructor() {
4      super();
5    }
6    ...
7    renderBlock(container): void {
8      ReactDOM.render(
9        <CustomWidget {...this.props} widgetApi={widgetApi} />, container
10      );
11    }
12    ...
13  };
14};

2. Fetch custom profile fields.

Copy To Clipboard
1import React, { useEffect, useState, FunctionComponent, ReactElement } from "react";
2import { SBUserProfile, WidgetApi } from "widget-sdk";
3
4export interface CustomWidgetProps {
5  widgetApi: WidgetApi;
6}
7
8export const CustomWidget: FunctionComponent<CustomWidgetProps> = ({ widgetApi }: CustomWidgetProps): ReactElement => {
9
10  const [user, setUser] = React.useState<UserListItem[]>();
11  
12  useEffect(() => {
13    widgetApi.getUserInformation().then((info) => {
14      setUser(info);
15    });
16  }, []);
17  
18  return user ? (
19    <div>
20      <p style={{ marginBottom: 10 }}>All user attributes:</p>
21      <ul>
22        {Object.entries(user).map(([key, value]) => (
23          <li>{`${key}: ${value}`}</li>
24        ))}
25      </ul>
26    </div>
27  ) : null;
28};

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