Skip to main content
Skip table of contents

Staff Selector

The staff selector is an out of the box component offered by GoMeddo to it’s customers. The staff selectors allows customers to search and select different staff members from a dropdown list. The components allows the selection of single or multiple staff members.

Props

The Staff selector requires twelve props:

Prop

Description

gm

GoMeddo instance for API calls to salesforce

mode

Defines if single or multiple staff can be selected using the mode enum

imageFieldName

Field name for staff image

parentId

Id of the resource that staff member(s) are associated with

roleFieldName

Field name for staff role

dropdownPlaceholder

Custom placeholder message in dropdown

inputPlaceholder

Custom placeholder message in input field

staffRolePlaceholder

Custom placeholder message for no staff role

className

Custom CSS for controlling how input and staff are displayed

inputStyle

Custom CSS for controlling input field

staffCardStyle

Custom CSS for controlling how staff members are displayed

handleSelection

Function called when a staff member is selected

CSS Variables

The staff selected has eight CSS variables:

Name

Description

--hover-background-color

Changes the background color when a dropdown item is hovered over

--information-background-color

Changes the background color of staff infromation

--staff-card-border-style

Changes the border style of staff card

--staff-card-border-width

Changes the border width of staff card

--staff-card-border-color

Changes the border color of staff card

--staff-input-border-color

Changes the border color of search input

--staff-input-background-color

Changes the background color of the search input

--option-border-color

Changes the border color of the dropdown menu containing list of staff

Step-by-Step/Setup

The staff object does not contain role and image field out of the box.

When creating the required field ensure the fields are visible through the API.

The field names can be set to your own preference

  1. Create custom fields under the Staff Object

    • Add the following fields to the staff object.

      • Staff_Role__c (Text field)

      • Staff_Image__c (URL field)

Returned Data

Return data example

JS
[
  {
    id: Salesforce ID,
    name: Name,
    role: Staff_Role__c,
    image: Staff_Image__c,
  }
]

Example use case

CSS
.your-custom-class {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 80%
    
  --information-background-color: white;
  --hover-background-color: blue;
  --staff-card-border-width: 10px;
  --staff-card-border-color: purple;
}

.your-input-wrapper {
  width: 20%;
  height: 100%;
  gap: 0.3rem;
}

.your-staff-card-wrapper {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
}
JSX
import GoMeddo from "@gomeddo/sdk";
import StaffSelector from "./components/StaffSelector.tsx";
import {Staff} from "./StaffCard.tsx";
import Mode from "./enums/Mode.ts";
import "path/to/your/css";

const gm = new GoMeddo('Your API Key');

const handleSelection = (staff: Staff[]) => {
    console.log(staff)
}

<StaffSelector gm={gm}
               mode={Mode.multiple}
               imageFieldName={'Your image field name'}
               roleFieldName={'Your role field name'}
               dropdownPlaceholder={'Your placeholder message in dropdown'}
               inputPlaceHolder={'Your placeholder message in search field'}
               staffRolePlaceholder={'Your placeholder message '}
               className={'your-custom-class'}
               inputStyle={'your-input-wrapper'}
               staffCardStyle={'your-staff-card-wrapper'}
               handleSelection={handleSelection}
/>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.