Activate and Publish FlexCards

Learning Objectives

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

• Describe the publish options for an activated FlexCard.
• Add a FlexCard Lightning web component to a Lightning page.
• Add a FlexCard Lightning web component to an Experience page.
• Enable the standard FlexCard component for Lightning pages and Experience Pages.

Publish Options for Activated FlexCards

When you activate a FlexCard, you generate a Lightning web component (LWC) that can be published to a Lightning or Community page. By setting Publish Options, you decide where the FlexCard Lightning web component is available for publishing, and what the Lightning web component is called when it appears in the list of available components for those pages. (Note: You cannot add or edit elements on an active FlexCard.)

Let’s take a closer look at the fields in Publish Options using the above image. The Publish Options for this FlexCard show that this is a parent named teamAccount (1) and accessible for the Targets (6) App Page, Home Page, and Record Page. FlexCards are also accessible in a Community Page and a Community Page with configurable properties, Community Default.

There are several notable publish options.

(1) Master Label: This is the visible name of your FlexCard component in the Lightning App Builder and Community Builder.

(2) API Version: This is the API version of your FlexCard component. This defaults to the API version used when you created the FlexCard. When you create a new FlexCard, it defaults to the current API version. 

(3) Runtime Namespace: This is the managed package namespace.

(4) Is Exposed: This is enabled when you want your FlexCard component to be public.

(5) Add SVG Resource/Drop it here: This is where you can add your own custom component SVG icon to identify your generated LWC in the Lightning App Builder and Community Builder.

(6) Targets: This is where you select the places where your FlexCard component is available for publishing. Targets are not set for a child FlexCard by default, as child FlexCards are typically embedded only in parents or used in actions, such as the flyout.

Add a FlexCard to a Lightning Page

After creating and activating your FlexCard, use the Lightning App Builder to publish your generated FlexCard Lightning web component to a Lightning page. We use the Lightning App Builder to build our industry-specific consoles.

In the Lightning App Builder, drag your FlexCard component onto the canvas area of a record, Home, or App Page, depending on what targets you set for the components in Publish Options.  

In this example, the Account_FlexCard_Profile component (1) is added to the canvas area of the page (2). 

If you can’t find a FlexCard component in the Custom Components list, return to the FlexCard Designer and make sure the FlexCard is activated and the correct targets are set. 

Add a FlexCard to an Experience Page

After activating your FlexCard and making it available to Community pages (Experience Pages), use the Experience Builder to publish the generated Lightning web component to a Community page. 

The Experience Builder is similar to the Lightning App Builder. It has a Components list where you select the Lightning web component and drag it to the canvas area.

In this example, the sampleAccount component (1) is added to the canvas of the page (2).

Thanks to FlexCards and all of their fantastic features, we get a 360-degree view of the customer through building customer-centric, industry-specific User Experience (UX) components and applications on the Salesforce Platform.

Enable the Standard FlexCard Component for Lightning Pages and Experience Pages

The two methods shown in the sections above provide the ability to make FlexCards appear in the Custom Components sections for both Lightning Pages and Experience Pages. This is based on the checkboxes within the Targets section of Publish Options within a FlexCard as shown in the image below.

As of Summer '22, if you have OmniStudio that uses the standard data model, you can use the FlexCards standard component to display a FlexCard on a Lightning page from the Lightning App Builder. You can either add an active FlexCard you've created or an out-of-the-box uneditable FlexCard available as part of your industry license. Standard FlexCard components run natively in your Salesforce org. Therefore, you don't need to install the OmniStudio package to add active OmniStudio components to a Lightning page. Whereas, custom FlexCard components run from an installed managed package.

To know whether you can enable this feature, you first need to check whether your org uses OmniStudio sObjects (standard objects).

1. Click the gear icon and select Setup.
2. In the Quick Find box, type Omni Interaction Configuration, and click Omni Interaction Configuration.
   

If an entry named TheFirstInstalledOmniPackage is present, your org uses OmniStudio sObjects (standard objects), and the standard component feature can be enabled.

Once you've verified that your org uses OmniStudio sObjects (standard objects), you can now enable the standard component.

1. Click the gear icon and select Setup.
2. In the Quick Find box, type OmniStudio Settings, and click OmniStudio Settings.
3. Click the Standard OmniStudio Runtime toggle button so the button shows as Enabled.
   

With this feature now enabled, you can go back to Lightning App Builder or Experience Builder and see the Flexcard option under Standard components.

From within Lightning App Builder:

The Flexcard option as it appears in Experience Builder under Process Automation:

While having these as standard options are great, please be aware that there are some features not supported within the standard components. Refer to FlexCard Standard Component Features Not Supported to see what is supported and what isn't.

Resources

• Trailhead: Lightning App Builder
• Salesforce Help: Experience Builder Overview
• Salesforce Help: Add a Standard FlexCard Component to a Lightning Page
• Salesforce Help: Add a Standard FlexCard Component to an Experience Page