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

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}
/>