OmniStudio FlexCard Project

In this lesson, we build the data source for a simple FlexCard that displays Opportunity records, a DataRaptor that extracts the open Opportunity records that belong to the currently logged-in user.

Key Lesson Concepts:

• Creating a DataRaptor Extract

• Using DataRaptor Environment Variables

• Using JSON data node names in a DataRaptor

• Using Relationship notation to extract fields from a related parent SObject

In this lesson, we build a simple FlexCard that displays Opportunity records and style it using custom CSS.

Key Lesson Concepts:

• Using OmniStudio FlexCard components to add data to the FlexCard

• Using merge fields in a FlexCard

• Using Custom CSS to add a shadow and hover feature to the card

• Troubleshooting the FlexCard viewer to display updates made to the FlexCard

• FlexCard publish options.

In this lesson, we build the data source for the Activites FlexCard, a DataRaptor that extracts the Tasks for a specific Opportunity.

Key Lesson Concepts:

• Creating a DataRaptor with an input parameter

• Extracting data from the Task object using WhoId

In this lesson, we create the Activites child FlexCard which displays the Task records returned.

Key Lesson Concepts:

• Creating a child FlexCard

• Displaying data using the Field component versus the Rich Text Component

• Using the Block component to visually group the data

• Adding an Action component that is displayed as an icon

• Using variant on an Icon field component to control its color

• Conditional rendering of an icon component

• Checking the responsiveness of the FlexCard

In this video, we build the Activities parent card and embed its child card into it.

Key Lesson Concepts:

• Embedding a child FlexCard into a parent FlexCard

• Passing data from a parent FlexCard to a child FlexCard

• Using the Repeat Records option

• Styling the child FlexCard to add shadow

In this lesson, we begin to build the data source for the Opportunity Details ("Selected Opportunity") FlexCard, a DataRaptor that extracts data from the Opportunity and OpportunityContactRole objects. We format the output with JSON nodes for the primary contact and DecisionMakers sections of the FlexCard.

Key Lesson Concepts:

• Designing DataRaptor output JSON to allow passing data to a child card

• Designing DataRaptor output JSON to include a subnode list of related records

• Using relationship notation in DataRaptors to extract data from a related parent object

We use an Integration Procedure in this lesson to adjust DataRaptor built in the previous lesson, determining the primary contact and adding a subnode for it to the JSON output.

Key Lesson Concepts:

• Creating an Integration Procedure

• Using a List Action in an Integration Procedure to filter a list

• Navigating through the Integration Procedure's debug log

• Using merge fields in an Integration Procedure

• Assembling the IP response using the Send JSON Path and Additional Output Response

In this lesson, we build the Decision Makers child FlexCard which displays data using the DataTable component.

Key Lesson Concepts:

• Using a DataTable component to display data on a FlexCard

• Adding an Integration Procedure data source to a FlexCard

In this lesson, we build the data source for the Existing Quotes FlexCard, a DataRaptor that extracts Quotes for the received Opportunity.

Key Lesson Concepts:

• Creating a DataRaptor extract

We build the Existing Quotes child FlexCard in this lesson. Unlike the other child cards in the course, its data will come from itself, not from the parent FlexCard.

Key Lesson Concepts:

• Using a DataTable component to display data on a FlexCard

In this lesson, we build the Details FlexCard which contains two child FlexCards that are displayed using flyout actions. The data for the Decision Maker's FlexCard is passed from the parent FlexCard to the child FlexCard. The data for the Existing Quotes FlexCard originates from the child FlexCard itself.

Key Lesson Concepts:

• Using Blocks to group the data visually

• Using Mask on the Field component to format a phone number

• Using dot (.) notation to display data in a JSON subnode (PrimaryContact)

• Using Flyout Actions to display expandable child FlexCards

• Adjusting FlexCard Block components to make the FlexCard responsive

In this lesson, we use DataRaptor formulas to create the summary information needed for the Opportunities Header ("My Opportunities") FlexCard. We add this summary information as a node to the DataRaptor created for the List FlexCard.

Key Lesson Concepts:

• Using formulas in a DataRaptor extract to categorize records into three groups

• Using DataRaptor formulas to create summary data

• Using these DataRaptor functions: FILTER, IF, LISTSIZE, ISBLANK, SUM

In this lesson, we build the Opportunities Header FlexCard.

Key Lesson Concepts:

• Use of Blocks to visually group FlexCard elements

• Styling the FlexCard using Custom CSS to add shadows and a hover effect.

In this video, we expose the FlexCards onto a Lightning page, the Home page of the Sales app.

Key Lesson Concepts:

• Adding FlexCards onto a Lightning page

• Activating the Lightning Page

In this video, we adjust the display of three of the FlexCards by using FlexCard State to effectively "hide" the FlexCard when the data source is empty.

Key Lesson Concepts:

• Use FlexCard State to display the FlexCard differently in the situations.

In this lesson, we build the Integration Procedure that filters the Opportunity records in the Opportunity List FlexCard based on the filter type selected in the Header FlexCard.

Key Lesson Concepts:

• Creating an Integration Procedure

• Using Send and Response Transformations to trim and rename a JSON responses

• Using a List Action to filter records

In this video, we discuss the concept of events and event listeners and our overall plan for creating the events and event listeners in this project. Then we create the event fired from the Header FlexCard when the user selects one of the three filters.

Key Lesson Concepts:

• Using events and event listeners with FlexCards

• Adding a PubSub Event to a FlexCard

In this lesson, we add an event listener to the Opportunity List FlexCard which adjusts its data source based on the event received from the Header FlexCard.

Key Lesson Concepts:

• Adding an event listener to a FlexCard

• Updating a FlexCard's data source using an action on an event listener

• Editing the Lightning page to reflect the changes made to events in the FlexCards

In this lesson, we create the event that is fired from the Opportunity List FlexCard and two event listeners in the Details FlexCard: one event listener to display the details for the selected opportunity, and the other event listener to hide the Details FlexCard when a new filter type is selected.

Key Concepts Covered:

• Firing a PubSub event from a FlexCard

• Adding event listeners to a FlexCard to update the data source

In this lesson, we analyze the different scenarios and states needed on the Recent Activites FlexCard to achieve the desired outcome. We then create two event listeners on the FlexCard: one that hides it, and the other that displays the it with the tasks for the Opportunity received. We also  adjust the data source to be an Integration Procedure.

Key Lesson Concepts:

• Using FlexCard State

• Using an Integration Procedure to manipulate the data returned

• Adding events listeners to update a FlexCard's data source

In this video, we review the project we've built and the concepts we've covered. I also offer you a challenge for continued building. Great job!