Author: Ashwini H
FlexCards are a great way to display important data in a visually appealing manner in Salesforce. If you’re looking to build a Flexcard that displays data from an external source, DataRaptors can be a powerful tool to help you achieve this. In this tutorial, I’ll guide you through the steps to build a Flexcard using DataRaptors in Salesforce.
1) Create a DataRaptor
- Log in to your Omnistudio account and navigate to the “OMNISTUDIO DataRaptor” tab in the menu.
- Click on the “New DataRaptor” button and give your DataRaptor a name, such as “AccountDetail”.
- Select the interface type as extract and the input and output type as JSON, then click save. Now the DataRaptor will be loaded.
- In the “Extract” tab of the DataRaptor, you can select the Salesforce objects from which you want to retrieve data. Additionally, you can specify filters to limit the data returned from the objects.
- In the Extract tab, Click on “Add Extra Step.”
- Give Account as a source object in the drop-down list of objects.
- Now Configure settings for the source object.
Extract Output Path: Account
Filter : Id
Operator : <>
Value : "$Vlocity.Null"
- In the Output tab, Click On the + button
- Give the following detail to get the Output fields.
Extract JSON Path : Account: Id
Output JSON Path: Id - Similarly, give the same for necessary fields to retrieve.
- In the “Preview” tab, click on the “Execute” button to test your DataRaptor and ensure it returns the desired results.
- If you want to retrieve specific account details, click on the “Edit as Params” link and add a new key/value pair for the input parameter with the key as “InputId” and the value as a valid Salesforce Account object ID (e.g., Id – 0016100001OAOB).
- Now Click On Execute button.
- Verify that the Response panel displays a JSON structure containing the desired output.
2. Create a Flex Card and Load the DataRaptor
- Once your DataRaptor is set up and tested, you can create a FlexCard by clicking on “New” under the Omnistudio FlexCard tab.
- Give your FlexCard a name. Let’s call it “AccountDetail_FC”.
- Give a Theme to your FlexCard.
- Select Lightning in the dropdown to use SLDS (Salesforce Lightning Design System), or Newport to use the Newport Design System.
- Give value to the Author field.
- (Optional) Enable the Is Child Card toggle button if we have to embed one FlexCard into another FlexCard.
- (Optional) Enter the Description.
- Click Next
- Select Source Type as DataRaptor and click Next.
- Now select the DataRaptor Name that we want to use in the FlexCard.
In this example, click on “AccountDetail”. A new window will open, loading the FlexCard.
- In order to configure the data source from the Setup Panel in the FlexCard Designer, click Setup.
- To pass a variable to the DataRaptor, click + Add New next to Input Map and pass the ContextId.
- Once you have configured the data source and passed any necessary variables, click on the “Save & Fetch” button to retrieve the data from the DataRaptor. This action will populate the fields in the “Build” tab with the data from the DataRaptor.
3) Design the FlexCard
- You can now design your FlexCard by dragging and dropping the necessary fields from the “Build” tab. Utilize the various formatting options and tools available in the “Properties” tab to customize the look and feel of your FlexCard.
- Finally, click on the “Preview” button to see how your FlexCard will look and function with the data from the DataRaptor.
By following these steps, you can create a FlexCard that displays data extracted from a Salesforce object using a DataRaptor.