It has recently been revealed that you can now create a Typeahead search on a FlexCard! This feature was introduced by Salesforce to allow developers to create Lookup fields for FlexCard, which is not readily available in FlexCard design elements.
This article gives you a step-by-step approach to configuring Typeahead searches in FlexCard.
What Is OmniStudio and What Is a FlexCard?
OmniStudio is a Salesforce Industry Cloud feature used by various organizations to build digital-first experiences tailored for different industries. OmniStudio comprises the following components: FlexCards, OmniScript, DataRaptors, and Integration Procedures.
The goal of using OmniStudio as an Industry Cloud solution is to create digital-first experiences for end customers without the need to write Lightning Web Components. FlexCards and OmniScripts provide users with step-by-step guidance to complete this process.
For example, a company may want to use OmniScripts and FlexCards to allow their users to enter their details on a web portal, such as Know Your Customer (KYC) information. This could include their contact information, billing details, and specific security questions tailored to the user’s geographic region.
For step-by-step guidance with complex branching and conditional rendering, you can either choose custom Lightning Web Components or use OmniScripts and FlexCards (part of the Salesforce Industry Cloud Package). The latter is more declarative and does not need any coding experience.
What Is Typeahead All About?
In simple terms, Typeahead means type to search. When you type, it gathers results and provides you with choices, reducing overall clicks and making the search process easier – it acts as a great substitute for Salesforce Lookup.
This feature is already in OmniScripts and is much more powerful there. However, if the requirement is to display Lookup inside a FlexCard component – due to its styling or collapsible block capability – this is a good option to explore.
What are FlexCard Input Data Types?
A FlexCard in OmniStudio allows you to create Lightning Web Components declaratively and deploy them anywhere on the Lightning Web page or Community page. A FlexCard allows a developer to apply CSS styling and branding through clicks and not code. They also provide the developer with several input data types. Here are some of the Data Types that are shipped with FlexCard:
Since the Lookup field is not available as a FlexCard input data type (as seen above), developers building Lightning Components using FlexCards would need to use the Typeahead Feature in FlexCard.
To illustrate the use of Typeahead search in FlexCard, consider for instance displaying Account Detail record on a Contact Record Page with Owner field as a Typeahead field. This set up provides the end user with an experience similar to that of a standard Owner Lookup field.
Creating an Account Detail FlexCard
Let’s say you have a requirement where a business has asked you to create a simple FlexCard that displays Account Information with fields like Name, Industry, and Owner (lookup field) for a given Contact Record. To do so, we will first create a DataRaptor within the OmniStudio platform to grab the account detail information for a given contact.
Create a DataRaptor
First we create a DataRaptor and then query Account Information based on the Account Id (which we will get from the Contact Record).
Next, we map fields like Name, Industry, OwnerId, and Owner.Name from Account. We also Query User object for the Account to pull all Users associated within the Salesforce instance – which are Active and not Site Users. Your DataRaptor Extract should look like the below image:
Mappings for the Extract should be like this:
You can then plug in the Account Id in the Preview to see how the JSON response shows up:
It’s worth noting that the response is a JSON response with Account Details, however, the users are displayed as a JSON Array of String.
{
"accounts": {
"Name": "Express Logistics and Transport",
"OwnerId": "005Hu00000OMbOMIA1",
"OwnerName": "Deepak Malkani",
"usersNames": [
"Deepak Malkani",
"Integration User",
"Automated Process",
"System",
"Standard OmniStudio User",
"Platform Integration User",
"Data.com Clean",
"Chatter Expert",
"Security User"
],
"Industry": "Transportation"
}
}
Now that the DataRaptor is ready and the JSON data shows Account Details and OwnerIds as a JSON array, we are ready to plug this into our FlexCard and see it in action!
Creating a FlexCard
It’s now time to go to OmniStudio Console and create a FlexCard. This should open up the FlexCard creation wizard as shown below:
Then, select the data source for the FlexCard as DataRaptor and select the DataRaptor which was created earlier:
In the next screen, you can click Fetch to see the test results. The Data JSON should show up:
You can now click save. Now that your FlexCard is created, let’s map the fields and see this in action. Navigate to the created FlexCard and click on Setup. Ensure that the data source is configured correctly so that when Fetch is clicked, the data source fetches results properly, as shown below:
Now that the data source is configured, once you navigate to the FlexCard Build Panel (on the right-hand side) you should see all the fields that were queried.
Let’s now start mapping input fields for the FlexCard. On the right-hand side of the Build Panel, you will see the input section. Drag the text field here for Name and Industry Typeahead Lookup field for Owner as shown below:
It’s important that field binding is done properly so that it maps the data from the Data JSON construct which we saw earlier.
For the Typeahead, drag the Typeahead input from the input panel as shown below:
The field binding for Typeahead should be mapped to OwnerName from the data JSON.
Do not map Options – Options are for Select Picklist. For Dynamic Typeahead search, create an entry in Custom Attributes with:
Attribute = options
Value = {userNames}
This is the data JSON Property which has Usernames as a JSON Array.
Now click on Preview. This should show you the FlexCard created in Preview Mode, just before you plan to activate and deploy this to the Lightning Page.
Once you click on Preview, OmniStudio will create a Lightning Web Component (LWC) behind the scenes:
Now, clear up the Owner. You will see the JSON Array data of all the Users in the drop-down:
You may type in the User Name from this drop-down and the Typeahead will populate the User based on your choice:
Typeahead in FlexCard works when you prefill the data by querying it before and then display it as a dropdown; just like a Lookup. You can then choose from one of the selected Options, just like a Lookup.
Final Thoughts
Typeahead is a great substitute for Salesforce Lookup. This feature is already exposed in OmniScripts and is much more powerful there. However, if the requirement is to display Lookup inside a FlexCard component, this is a good option to explore.
Once again, OmniStudio (or Salesforce Vlocity) is an Industry Cloud solution used to build Web components with ease leveraging Salesforce drag and drop functionality rather than writing JS and Apex code for LWC.
Hopefully, this guide has given you a better understanding of how to configure Typeahead searches in FlexCard!