Add a User Dropdown Field in Your Custom Widget

In this tutorial, you will learn how to add a custom dropdown field, with a list of users to select from, to your custom widget.

On completing this tutorial, you will be familiar with the properties and functions required to fetch users in order to display them in a dropdown field.

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    private _root: ReactDOM.Root | null = null;
4
5    constructor() {
6      super();
7    }
8    ...
9    public renderBlock(container: HTMLElement): void {
10      this._root ??= ReactDOM.createRoot(container);
11      this._root.render(<CustomWidget {...this.props} widgetApi={_widgetApi} />);
12    }
13    ...
14  };
15};

2. Fetch users of your Staffbase App using the following function: getUserList()

3. To display users in a dropdown list, use the following code snippet:

Copy To Clipboard
1import React, { useEffect, useState, ReactElement } from "react";
2import { UserListItem, WidgetApi } from "widget-sdk";
3
4export interface CustomWidgetProps extends BlockAttributes {
5  widgetApi: WidgetApi;
6}
7
8export const CustomWidget = ({ widgetApi }: CustomWidgetProps): ReactElement => {
9  
10  const [users, setUsers] = useState<UserListItem[] | null>(null);
11  
12  useEffect(() => {
13    widgetApi.getUserList({ limit: 5 }).then((users) => {
14      setUsers(users.data);
15    });
16  }, []);
17
18  return <>
19    {
20      users ? (
21        <div style={{ marginTop: 10 }} className="users-dropdown">
22          <label htmlFor="users">
23            {"User: "}
24            <select name="users" id="users" defaultValue="none">
25              <option value="none" disabled>
26                - Select User -
27              </option>
28              {users.map((user) => (
29                <option
30                  key={user.id}
31                  value={user.id}
32                >{`${user.firstName} ${user.lastName}`}</option>
33              ))}
34            </select>
35          </label>
36        </div>
37      ) : null
38    }
39  </>
40};

You have added user dropdown field to your custom widget.