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.

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.

Custom Widget Staffbase App Intranet User Dropdown

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.
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};
  1. 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
  1. To display users in a dropdown list, use the following code snippet:
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.