Type Ahead Block Element in OmniScript

Gayathiri Mohan
Dec 5, 2023
4 min read

What is a Type Ahead Block?

A ‘Type Ahead Block’ element in OmniScript allows the user to type some input value and then select a value from the list of results filtered based on the user input (search term).

It can also fetch and display additional information related to the record selected by the user.

To support this behaviour, it has an input field inside the block and a data source to fetch the results.

Examples:

Let’s see a few examples on how to use a Type Ahead block element in the OmniScript for two data sources -

Data Raptor Extract Action
Data JSON

1) Using ‘Data Raptor Extract Action’ as the data source:

In the below example, two Type Ahead Blocks are used: ‘Account Type Ahead Block’ and ‘Contact Type Ahead Block’.

Account Type Ahead Block: This extracts the ‘Active’ accounts and displays the results to the user.

Adding a ‘Data Raptor Extract’ action inside the block:

After adding a Type Ahead Block, drag and drop the Data Raptor Extract action inside it.

Here, ‘DRExtractAccounts’ is the Data Raptor Extract action that retrieves the accounts matching the criteria ‘Active__c’ = ‘Yes’.

In the Output tab, we need to make sure that the required Account fields are mapped to the output fields in the below JSON format.

[
	{
		“AccountName”: “Test Account A” ,
	  	“AccountId”: “0015i00000ecMumAAE”,
		“AccountBillingCity”: “New York”
	},
	{
		“AccountName”: “Test Account B” ,  
		“AccountId”: “0015i00000ecMumAAJ”,
		“AccountBillingCity”: “Paris”
	}
]

NOTE: There should not be any parent nodes in the output structure to make sure the Type Ahead block works.

In the Type Ahead Block properties section, the following details are entered:

Typeahead Key: ‘AccountName’ to display the names of the accounts from the Data Raptor Extract output. Based on the attribute name entered in this property, the corresponding values will be displayed to the user in the list of results.
Hide Edit Button: ‘checked’, this ensures the Edit (‘pencil icon’) button is not visible in the input field.
Edit Mode: ‘checked’, this ensures the fields in the block are displayed automatically without requiring the user to click the pencil icon to edit the fields.

Adding a ‘Text’ input element inside the block:

Optionally, we can also add Text input elements inside the Type Ahead Block, based on the need.

In the ‘Text’ properties section, ensure the ‘Name’ field matches any of the attribute values from the DR Extract output.

In this example, ‘AccountBillingCity’ is entered as the ‘Name’ field value.

This will make sure that when the user selects an account name from the list of results, the corresponding ‘Billing City’ of that account appears in the Text field. The user can either view or edit the ‘Billing City’, based on the need.

Output:

Now, when we observe the output,

The ‘Account Name’ input field appears without a ‘pencil icon’. This is because the ‘Hide Edit Button’ property is enabled.
The ‘Account Billing City’ field appears by default since we have enabled the ‘Edit Mode’ property.

When the user starts typing the input (for example, ‘uni’), the account names matching the user input are displayed.

When the user selects one account, the corresponding account’s ‘Billing City’ value appears in the ‘Account Billing City’ input field.

Now in the ‘Data JSON’, observe that the appropriate values are populated in the ‘TypeAhead Block’ element based on the user selection.

If the user modifies the ‘Account Billing City’, (say, ‘Paris’), the corresponding value in the ‘TypeAhead Block’ element will be updated.

Contact Type Ahead Block: This extracts and displays the Contacts linked with the Account selected by the user in the previous block and allows the user to select the required contact from the list.

This is an example of creating dependent Type Ahead Block elements (using the result of one Type Ahead Block element inside the other).

To achieve this, a Data Raptor Extract Action ‘DRExractContacts’ is created, and in the ‘Input Parameters’ section, the following values are entered:

Data Source: ‘TypeAheadAccount-Block:AccountId’. This field holds the data source, in this case, the ‘Account Id’ of the selected account.
Filter Value: ‘AccountId’. This field stores the value from the ‘Data Source’ and passes it to the Data Raptor.

In the Data Raptor Extract, the filter value ‘AccountId’ is passed to ensure all the contacts linked to the user-selected Account are fetched.

In the output tab, the Contact fields are mapped to be in the below JSON format.

[
    {
        “ContactName”: “Test Contact A” ,  
        “ContactId”: “0035i00000QjiRrAAJ”
    },
    {
        “ContactName”: “Test Contact B” ,  
        “ContactId”: “0035i00000QjiRrAAL”
    }
]

In the Type Ahead Block properties section, the following details are entered:

Typeahead Key: ‘ContactName’. This displays the names of the contacts from the Data Raptor Extract output.
Lookup Mode: ‘checked’. When checked, the user will not be able to type the search term to filter the results. When the user clicks the input field, the available results from the data source will be displayed for selection automatically.

NOTE: When the ‘Lookup Mode’ is enabled, the ‘Edit Mode’ and ‘Hide Edit Button’ properties will not have any impact.

This means that even though the ‘Hide Edit Button’ property is unchecked, the ‘Edit’ button will not be visible in the Type Ahead Block’s input field.

Similarly, even if the ‘Edit Mode’ is enabled, the input fields added in the Type Ahead Block element will not be visible in the UI.

Output:

Now, when we observe the output,

The ‘Contact Name’ input field appears with a down arrow indicating the ‘Lookup Mode’ property is enabled.
On clicking the ‘Contact Name’ field, there will not be any result since the values are dependent on the Account Name field.

After selecting an Account and clicking the ‘Contact Name’ field, the child contacts for that account will be displayed.

After selecting the required contact name, the value will be displayed in the field.

Now in the ‘Data JSON’, observe that the selected Contact values are populated in the ‘TypeAhead Block’ element.

2) Using ‘Data JSON’ as the data source:

In the below example, we have an ‘Accounts’ array in the Data JSON.

In the Type Ahead Block properties section, the following details are entered:

Use Data JSON: ‘checked’. This denotes that the Type Ahead block uses Data JSON as the data source.
Data JSON Path: ‘Accounts’. This captures the Data JSON path containing the data source.