Add a User Dropdown Field in Your Custom Widget

Learn how to add a custom dropdown field in your widget from which you can select users.

Employee App

Staffbase Intranet

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.

This tutorial is for advanced developers.

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

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.

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} />);
    }
    ...
  };
};

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

The following parameters are supported for getUserList() function:

limit number
offset number
filter string
sort enum: lastname, created, updated

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

import React, { useEffect, useState, ReactElement } from "react";
import { UserListItem, WidgetApi } from "widget-sdk";

export interface CustomWidgetProps extends BlockAttributes {
  widgetApi: WidgetApi;
}

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

  const [users, setUsers] = useState<UserListItem[] | null>(null);

  useEffect(() => {
    widgetApi.getUserList({ limit: 5 }).then((users) => {
      setUsers(users.data);
    });
  }, []);

  return <>
    {
      users ? (
        <div style={{ marginTop: 10 }} className="users-dropdown">
          <label htmlFor="users">
            {"User: "}
            <select name="users" id="users" defaultValue="none">
              <option value="none" disabled>
                - Select User -
              </option>
              {users.map((user) => (
                <option
                  key={user.id}
                  value={user.id}
                >{`${user.firstName} ${user.lastName}`}</option>
              ))}
            </select>
          </label>
        </div>
      ) : null
    }
  </>
};

You have added user dropdown field to your custom widget.