THIS SOFTWARE IS COVERED BY THIS DISCLAIMER.
This package contains a demo Lightning component for showing package shipment details. The component uses the EasyPost API service and specifically utilizes their Tracker API for retrieving shipment details and date/time activities. The approach I used was to see the default EasyPost tracker page and just scrape out the HTML in to a Lightning Web Component to show the same view. This required some "jiggering" of the original EasyPost HTML which is based on Bootstrap.
The focus of the component is to be added to a record page that has 2 fields to drive the component. One field the carrier name and other is the carrier tracking id. Below is sample of the component in action.
This component utilizes:
- EasyPost API service
- Moment.js javascript date/time library
- Bootstrap which was included from the EasyPost HTML scrape
Here are the configuration options for PSEasyPostTracker component:
| Parameter | Definition |
|---|---|
| Loading Message | [Optional] A text string to show while the component loads the tracking info from EasyPost |
| Tracking ID Field API Name | The field API name to use to retrieve the tracking number |
| Carrier Field API Name | The field API name to retrieve the carrier name |
| Show Tracking Details | Boolean/checkbox field to show tracking data/time details by default. Showing details can be toggled by clicking on progress bar or delivery date areas |
| Handler Class Name | [Optional] Name of Apex class that implements PSEasyPostHandlerInterface Apex interface (I use this for customized logic) |
And here is a sample configuration for a PSEasyPostTracker:
Here are steps to setup and configure this component:
- Go to EasyPost and sign up for a free account.
- Login to account in top-left of screen, click your username and select API Keys.
- Note down your production and test API keys.
- Install the PSEasyPostTracker component per the Deploy to Salesforce button below.
- Next we need to configure your API keys that you retrieved above.
- Go to Setup > Custom Code > Customer Metadata Types and select Manage Records next to the "PSEasyPostTracker" entry.
- Click New and create a new entry named "EasyPost" (it must be named this exactly) and enter your production and test API keys.
- For the SObject that you will place this component on, create two custom fields (these can be named whatever you like as you reference them in the component configuration):
- Carrier field - create a picklist field with following values (UPS, FedEx, USPS, DHL). EasyPost supports many more but I've mainly used FedEx and UPS for my testing.
- Tracking ID field - create a text field to store the carrier tracking id
- Assign the PSEasyPostTracker permission set to any user that will utilize the component
- Edit the record page for the object you want to place the wheel component on. Drag the PSEasyPostTracker component to area on the page. Configure the component per the above defined parameters.
- Suggest to create visibility rule on the component to only show if you have a value for "Carrier" and "Tracking ID"
- That is it.
