The namespace-flex-card-standard-runtime-wrapper component provides a streamlined approach for integrating Salesforce OmniStudio FlexCards directly into Lightning Web Components. This method eliminates the need for complex custom development while maintaining the full functionality of FlexCards within LWC applications.
Implementation Overview
The standard runtime wrapper simplifies FlexCard embedding through a declarative HTML component that handles all the underlying complexity. This approach is particularly valuable for developers transitioning from the managed package runtime to the standard OmniStudio implementation.
Component Structure
The namespace-flex-card-standard-runtime-wrapper accepts several key attributes that control FlexCard behavior and data binding:
<namespace-flex-card-standard-runtime-wrapper
flexcard-name="name"
record-id="recordId"
object-api-name="objectApiName"
records="records"
exposed-attributes="exposedAttributes"
parent-data="true">
</namespace-flex-card-standard-runtime-wrapper>Essential Attributes
The flexcard-name attribute is mandatory.
Be sure to replace ‘namespace’ with your respective package namespace (omnistudio, vlocity_cmt, vlocity_fsc, etc.)
FlexCard Configuration
The flexcard-name attribute specifies the unique identifier for the FlexCard component being embedded. This name must match exactly with the FlexCard created in the OmniStudio Designer to ensure proper component resolution.
Data Context
The record-id and object-api-name attributes establish the data context for the FlexCard. These parameters enable the component to automatically retrieve and display relevant record information based on the specified Salesforce object type.
Data Binding
The records attribute allows for custom data injection, enabling developers to pass specific datasets directly to the FlexCard. This flexibility is important for scenarios requiring filtered or calculated data display or to pass data from an external source, like an LWC.
The exposed-attributes parameter enables communication between the parent LWC and the embedded FlexCard. This attribute accepts custom properties that can be configured within the FlexCard Designer, allowing for dynamic content updates based on parent component state.
Parent Data Integration
Setting parent-data=”true” enables direct data mapping from the parent component to the FlexCard. This configuration eliminates the need for separate data retrieval calls and ensures consistent data synchronization between components.
Implementation Benefits
The standard runtime wrapper approach offers significant advantages over traditional FlexCard embedding methods. It provides native Lightning platform integration, improved performance through optimized data loading, and simplified maintenance through declarative configuration.
Development Considerations
When implementing this solution, ensure that the target FlexCard is properly activated and published within the OmniStudio environment. The component requires appropriate user permissions for both OmniStudio access and the underlying Salesforce objects referenced in the FlexCard configuration.
This implementation method represents the current best practice for FlexCard integration within Lightning Web Components, offering both simplicity and robust functionality for modern Salesforce development.
