Skip to main content
Skip table of contents

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

  1. 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

  2. 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}
/>
JavaScript errors detected

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

If this problem persists, please contact our support.