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 |
---|---|
| GoMeddo instance for API calls to salesforce |
| Defines if single or multiple staff can be selected using the mode enum |
| Field name for staff image |
| Id of the resource that staff member(s) are associated with |
| Field name for staff role |
| Custom placeholder message in dropdown |
| Custom placeholder message in input field |
| Custom placeholder message for no staff role |
| Custom CSS for controlling how input and staff are displayed |
| Custom CSS for controlling input field |
| Custom CSS for controlling how staff members are displayed |
| Function called when a staff member is selected |
CSS Variables
The staff selected has eight CSS variables:
Name | Description |
---|---|
| Changes the background color when a dropdown item is hovered over |
| Changes the background color of staff infromation |
| Changes the border style of staff card |
| Changes the border width of staff card |
| Changes the border color of staff card |
| Changes the border color of search input |
| Changes the background color of the search input |
| 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
[
{
id: Salesforce ID,
name: Name,
role: Staff_Role__c,
image: Staff_Image__c,
}
]
Example use case
.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;
}
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}
/>