Resource Selector
The resource selector is an out of the box component offered by GoMeddo to it’s customers. The resource selectors allows customers to select single or multiple different resources.
Props
The Resource selector requires seven props:
Prop | Description |
---|---|
| GoMeddo instance for API calls to salesforce |
| Defines if single or multiple resources can be selected using Mode enum |
| Defines which type of resource to be fetched |
| Field name for resource image |
| Field name for resource description |
| Custom CSS calls for controlling how resources are displayed |
| Function that is called when a resource is selected |
Step-by-Step
The resource object comes with description and image URL field out of the box and visible to the API.
If you prefer to create your own fields with custom name ensure the custom fields are provided through the appropriate props and is visible through the api
Navigate to fields and relationships
To create custom fields under the resource object you need to navigate to fields and relationships
Setup > Object Manager > Resource > Fields & Relationships > new
Create the custom fields under resource object:
Add the following custom fields to the resource object
B25_Descriptions__c
(Long Text Area Field)B25_Image_URL__c
(URL Field)
CSS Variables
The resource selector has three CSS variables:
Name | Description |
---|---|
| Changes the background color of the resource information |
| Changes the border color of the selected resource |
| Changes the border color when a resource is hovered over |
Returned Data
Return data is a Resource
object type
Example use case
.your-custom-class {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
justify-items: center;
--information-background-color: white;
--selected-border-color: purple;
--hover-border-color: blue;
}
import GoMeddo, {Resource} from "@gomeddo/sdk";
import ResourceSelector from "./components/ResourceSelector.tsx";
import Mode from "./enums/Mode.ts";
import '/path/to/your/css';
const gm = new GoMeddo('Your API Key');
const onHandle = (resource: Resource[]) => {
console.log(resource);
}
<ResourceSelector gm={gm}
mode={Mode.multiple}
type={'location'}
imageFieldName={'Your image field name'}
descriptionFieldName={'Your description field name'}
className={'your-custom-class'}
handleSelection={onHandle}
/>