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
`gm`	GoMeddo instance for API calls to salesforce
`mode`	Defines if single or multiple resources can be selected using Mode enum
`type`	Defines which type of resource to be fetched
`imageFieldName`	Field name for resource image
`descriptionFieldName`	Field name for resource description
`className`	Custom CSS calls for controlling how resources are displayed
`handleSelection`	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
`--information-background-color`	Changes the background color of the resource information
`--selected-border-color`	Changes the border color of the selected resource
`--hover-border-color`	Changes the border color when a resource is hovered over

Returned Data

Return data is a Resource object type

Example use case

CSS

.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;
}

JSX

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