USE CASE
Users need to control the crypto market directly from the home page. For that, custom components have to be built on the Salesforce platform.
REQUIREMENTS
- Ability to view trending crypto
- Ability to view my tracked crypto
- Ability to search top market crypto
- Ability to add crypto to my tracking list
We will use the following components:
- OmniScripts: a guided path to complete a business process
- OmniStudio DataRaptors: configurable services for retrieving, transforming, and updating data
- OmniStudio Integration Procedures: declarative, server-side processes that execute multiple actions in a single server call
SOLUTION
We will use CoinGecko API V3 to retrieve the information on the trending crypto and search for the top market crypto. The CoinGecko main page looks like this:
API provides passwordless authentication.
Here are sample calls:
TRENDING CALL
TOP MARKET CALL
We will review the structure for the Tracking Crypto component.
Script configuration: each OmniScript starts with this component, it contains configuration parameters for the page, such as name, description, LWC enabled, save options, cancel options, step chart options.
Two options are available for the components preview:
- PREVIEW: this will render the Angular version of the page. It can be used to save time and prototype or test something
- LWC PREVIEW: this will render the LWC version of the page. It should be used to see how your page will look in the release version
OmniScript data on the page is saved in the JSON format and can be seen until you are viewing the component on the OmniScript Designer page.
InitialFetchTrackedCryptoIP: Integration procedure (IP) is used to populate the tracked crypto table with data. IP is usually used when you need to transform data or in the case of a multi-step action.
Main: The component is usually used in guided selling steps where content may vary depending on the user's responses.
TASearchCrypto: The Type Ahead component acts as a lookup in Salesforce. We can specify a Typeahead Key, which will map to the node in the object array to filter data.
HttpGetTopMarketCapCrypto: Http Action is used to call an external service. Available endpoint types are Web, APEX, named credential, SOAP/XML. We don’t need to handle authorization, so we will use the web. Http Action inside Type Ahead will be executed each time a user types inside the box.
CryptoContainerBlock: The Block component is used to visually group components on the page. When Block has a label populated, it acts like an accordion section. Without a label, it’s displayed as a block with some padding. It can also be used to display repeatable sections of data. We will use this component for the trending crypto blocks. This block is displayed only when a user selects a row from the suggested.
PriceChangePercentFormula: Formula is commonly used to adjust displayed data, evaluate a condition or merge data. Formula is dynamic and can be recalculated depending on the merge fields change. We are using this formula to round the 24h price change percentage.
CryptoLogoTB: Text Block is a rich text editor with merge text support. It’s driven by TinyMCE html editor, so if you can’t style components with a few clicks, you can always paste html markup directly into it.
We are using this component to display a crypto logo returned from an API call.
One important and interesting feature of OmniScript is versioning. Integration Procedures also support versioning, but DataRaptors do not. Let’s disable some of the components in the script to view what we built at this point. We can always switch to the desired version of the OmniScript.
The table below lookup disappeared because we disabled its components in the OmniScript structure.
On the row selection, a card is displayed with a crypto icon, market cap rank, symbol, price, and 24h price percent change. The track button is used to mark the current record as tracked and then it can appear in the table. This is the standard behaviour of Integration Procedure, between steps it acts as a background processing step, but on the page, it’s displayed as a button.
DATA MODEL
Objects:
| Crypto_Currency__c | Created to record tracked cryptos |
Fields:
| Name: | Crypto Name |
| External_Id__c | External id to upsert records by crypto id |
| Logo_Url__c | Crypto image url |
| Logo_DIsplay__c | Formula to display an image on record and list view |
| Market_Cap_Rank__c | Market Cap Rank |
| Price__c | Price in $ |
| Symbol__c | Crypto unique symbol |
| Tracking__c | Field to indicate we want to see this record on the tracking table |
Object configuration
Standard Salesforce list view
Now let’s delete the last OmniScript version with the components disabled. Only one version of OmniScript can be active for a specific type.
Here’s our table displayed! We can save time on enabling table components just by switching to the right OmniScript version! Let’s dig into the components driving this table.
CryptoTable: Edit block component is used to display editable fields, but it can also display read only data. We also added the “Untrack'' row action to have the ability to remove rows right from the table. We can modify UX with just one click on the Edit block mode: Inline, Table, FS, Card, LongCards.
Here’s what a user can see when the Edit Block mode is set to Card.
FINAL VIEW
.