Maintain Your OmniStudio Consultant Certification for Summer ’22

Learning Objectives

After completing this unit, you’ll be able to:

• Upgrade edit block functionality to null out between steps.
• Create and save records in a modal.
• Automatically close a flyout modal.
• Apply Custom CSS to a FlexCard Element.

Salesforce Certification

If you hold the OmniStudio Consultant credential, keep in mind that you need to complete this module by the due date to maintain your certification. Another important part of maintaining your credential is ensuring your Trailhead and Webassessor accounts are linked.

Interested in learning more about getting certified? Check out the OmniStudio Consultant credential.

Protect the Integrity of Your Certification

The quality of our certification exams and the value our credentials provide are our highest priority. Protecting the security and confidentiality of our exams is essential to providing our customers with credentials that are respected and industry-leading.

As a participant of the Salesforce Certification Program, you’re required to accept the terms of the Salesforce Credential and Certification Program Agreement. Please review the Salesforce certification exam-taking policies in the Salesforce Credential and Certification Program Agreement and Code of Conduct Trailhead Help article for more details.

Salesforce introduced some great feature enhancements in the past year. Let’s take a look at some of the more important ones for this release.

Upgrade Edit Block Functionality to Null Out Between Steps

Edit Blocks enable a user to add and edit multiple entries in a single array. For example, you could use an Edit Block to list and edit an account’s list of contacts.

An added feature now allows the Edit Block to be nulled out between steps. Select Allow Clear for values in the Edit Block to be set to null by using the Set Values action.

To access the new property Allow Clear in Edit Block:

1. In the Canvas, click Edit Block.
2. In the Navigation area, select the Properties panel.
   The new property has been added to the series of checkbox options.
3. Check Allow Clear to allow the JSON Data of the OmniScript to be overridden by a SET VALUES action positioned between steps.
4. Within the Set Values, point to the Values to Clear by their JSON path, and assign the value NULL.
   (In this example, Values point to: Step1:CreateContacts|#:LastName)

Create and Save Records in a Modal

Allow users to save an entry and create a new one without leaving a modal by clicking the Save and New button.

How: From an OmniScript preview, enter information into a modal and click Save & New.

Automatically Close a Flyout Modal

Flexcards can be configured with a flyout. A flyout modal is a lightweight contextual popup that displays information.

A flyout can include a task for the user to complete, such as a “subscribe” action to sign up for an email newsletter. In the recent update, a flyout modal can be set to close when the task is completed. Here’s how.

1. Open or create a Flexcard that displays the flyout.
2. Add an action to the canvas and select Flyout as the Action Type.
3. From the Flyout Type dropdown, select the content to display in the modal.
4. Click into Flyout and select the FlexCard, LWC, or OmniScript from the list to display in the modal.
5. From the Open Flyout in dropdown, select modal or popover.
6. In Channel Name, update the name to any alphanumeric name.
7. Open the FlexCard that will display inside the flyout.
8. To add the event that will automatically close the modal, add an action or an event listener.
9. Select Event as the Action Type and Pubsub as the Event Type.
10. In Channel Name enter the same channel name from step 6.
11. In the Event Name, enter close.

Apply Custom CSS to a FlexCard Element

When the design interfaces available in the Style panel of the FlexCard Designer don’t meet your design needs, apply custom CSS to elements. Customize design options in the Style panel of FlexCard Designer.

Apply custom CSS to elements.

• Add custom CSS to edit the internal components of an element or a child element.
• Apply classes from style sheets available to the FlexCard, such as the global SLDS and Newport style sheets.
• Apply custom classes created inside the FlexCard Designer with the Add Custom CSS feature. Refer to Create Custom CSS Within the FlexCard Designer. 

Tip: Use this feature sparingly to optimize performance.

Create a Grouped Datatable Element with Alternating Background Colors

A Datatable element displays Account Cases grouped by case Type.

For example, let’s say you want to:

• Show alternating background colors for all rows
• Set a different background color for the group heading.

Use the Add Custom CSS feature to create two classes. An alt-table-rows class for the Datatable element, and an alt-bg-group-wrapper class for the group heading.

Apply the alt-table-rows class to the element and the alt-bg-group-wrapper class to the group heading.

1. In the FlexCard Designer, select an element on the canvas.
2. To apply a custom class to an element, click Style to open the Style panel. From the Custom CSS section, complete one or both of these tasks.
   • To append a custom class to the element’s container, enter the class name in the Container Class field, such as branded-tables.
   • To append a custom class directly on the element, enter the class name in the Custom Class field, such as alt-table-rows from the example above.
3. To apply a custom class to a specific field inside an element, in the Properties panel, enter a class in a field that supports classes.

For example, from the previous grouped datatable example, enter alt-bg-group-wrapper in the Group Wrapper Class field in the Properties panel of a Datatable element.

Resources

• Salesforce Help: OmniStudio Spring ’22 Release Notes
• Salesforce Help: Configure an Edit Block 
• Salesforce Help: Salesforce Industries Communications, Media, and Energy Winter ’22 Release Overview 
• Salesforce Help: OmniStudio FlexCards Spring ’22 Release Notes
• Salesforce Help: Close a FlexCard Flyout Modal from an Action
• Salesforce Help: Fire an Event to Automatically Close a Flyout Modal
• Trailhead: Display Data and Actions on a FlexCard
• Trailhead: Build a FlexCard with External Data
• Salesforce Help: Apply Custom CSS to a FlexCard Element