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    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 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, FunctionComponent, ReactElement } from "react";
2import { UserListItem, 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 [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 users ? (
19    <div style={{ marginTop: 10 }} className="users-dropdown">
20      <label htmlFor="users">
21        {"User: "}
22        <select name="users" id="users" defaultValue="none">
23          <option value="none" disabled>
24            - Select User -
25          </option>
26          {users.map((user) => (
27            <option
28              key={user.id}
29              value={user.id}
30            >{`${user.firstName} ${user.lastName}`}</option>
31          ))}
32        </select>
33      </label>
34    </div>
35  ) : null;
36};

You have added user dropdown field to your custom widget.