Salesforce, as a leading CRM platform, continues to evolve to meet these demands, offering a plethora of tools and solutions to enhance user experiences and drive productivity. One such solution that has garnered attention is the OmniStudio Flex Card.
What is the OmniStudio Flex Card?
The OmniStudio Flex Card is a versatile component within Salesforce’s OmniStudio suite, designed to empower developers and administrators to create dynamic and interactive user interfaces. Built on the Lightning Web Components (LWC) framework, this feature-rich card offers flexibility and customization options, allowing businesses to tailor their Salesforce experience to meet specific needs.
Key Features and Benefits
Customization: The OmniStudio Flex Card provides extensive customization capabilities, enabling users to design cards that align perfectly with their branding and requirements. From colors and fonts to layout and content, the possibilities are virtually limitless.
Responsive Design: With the proliferation of mobile devices, responsive design is essential. The Flex Card seamlessly adapts to different screen sizes and orientations, ensuring a consistent and optimized user experience across all devices.
Rich Media Support: Whether it’s text, images, videos, or interactive elements, the OmniStudio Flex Card supports a wide range of media types. This allows businesses to create engaging and visually appealing cards that captivate their audience.
Data Integration: As part of the Salesforce ecosystem, the Flex Card seamlessly integrates with Salesforce data sources, enabling users to display real-time information within their cards. This integration enhances data visibility and empowers users to make informed decisions.
Drag-and-Drop Interface: Building cards with the OmniStudio Flex Card is intuitive and user-friendly, thanks to its drag-and-drop interface. Users with varying levels of technical expertise can create professional-looking cards without writing code, thereby accelerating development timelines.
Actions in Flexcard
| CARD TYPE | DESCRIPTION |
|---|---|
| Append Record | Adds additional data to the end of a record. |
| Reload | Reloads the FlexCard. |
| Remove | Removes a record from a list of records coming from the FlexCard’s datasource. |
| Select Cards | Updates an OmniScript based on a user-selected card. |
| Set Values | Updates the value of a data field. |
| Update Datasource | Updates the FlexCard’s datasource. |
FlexCards Elements
| ELEMENT NAME | ELEMENT DESCRIPTION |
|---|---|
| Action | Renders text or a button that executes an action when clicked. |
| Block | Enables grouping elements inside a collapsible container. |
| Chart | Displays data as a chart. |
| Custom LWC | Embeds a Custom LWC inside a FlexCard state. |
| Datatable | Creates a tabular structure from the data provided. |
| Field | Displays the output from a data field. |
| FlexCard | Embeds a FlexCard inside a state. |
| Icon | Displays a custom or Salesforce SVG icon. |
| Image | Displays a custom image from a given URL. |
| Menu | Displays a list of actions as a dropdown menu. |
| State | Adds a state to a FlexCard. |
| Text | Renders text and parses merge fields with a rich text editor. |
FlexCards Input Elements
Discover the range of input elements available for creating dynamic and interactive user interfaces within Salesforce FlexCards:
| INPUT ELEMENT | DESCRIPTION |
|---|---|
| Checkbox | Displays a checkbox for user selection. |
| Currency | Allows users to input currency amounts based on specified locale and currency type. |
| Date/Time | Presents users with options to select both date and time using calendar and dropdown widgets. |
| Date | Provides users with a calendar widget to select a date. |
| Offers an input field for users to enter an email address. | |
| Multi-Select | Allows users to select multiple options from checkboxes, buttons, images, or a combobox. |
| Number | Presents users with an input field for entering numerical values. |
| Radio | Provides users with options to select only one from a set of choices displayed as radio buttons. |
| Range | Enables users to select a value from a range using a slider. |
| Select | Allows users to choose an option from a list provided. |
| Telephone | Offers an input field for users to enter a phone number. |
| Text Area | Provides users with a multiline input field for entering text. |
| Text | Presents users with a single-line input field for entering text. |
| Time | Allows users to select a time from a list of intervals. |
| Toggle | Enables users to toggle between two states or options. |
| Typeahead | Offers a search field with hints or options based on user input. |
How to Create Flexcard
Follow these steps to create your own FlexCards:
Step 1: Navigate to OmniStudio in Salesforce
- Log in to your Salesforce account.
- Navigate to the App Launcher and search for “OmniStudio”.
- Click on OmniStudio to enter the OmniStudio app.
Step 2: Access FlexCard Builder
- Within OmniStudio, locate and click on the FlexCards tab.
- If you haven’t created any FlexCards yet, click on the “New FlexCard” button. Otherwise, select an existing FlexCard to edit or clone.
- Configure FlexCard Properties And Provide a name and description for your FlexCard to identify it.
- Click Next.
- Select the Data Source.
- Click “Next” to proceed to the FlexCard Builder.
Step 3: Design Your FlexCard
- Drag and drop elements from the Component Palette onto your FlexCard canvas to add content.
- Elements include Text, Image, Button, Input Field, Chart, and more.
- Customize each element by adjusting its properties, such as text, color, size, and alignment.
- Organize elements within your FlexCard layout to create an intuitive and visually appealing design.
- Preview your FlexCard to ensure it meets your requirements.
- Add actions to elements such as buttons or images to trigger specific behaviors.
- Define action properties, such as navigation to a URL, record creation, or data manipulation.
- Test the interactivity of your FlexCard to ensure actions function as intended. Using Preview Button.
Step 4: Save and Publish Your FlexCard
- Once you’re satisfied with your FlexCard design and interactivity, click “Save” to save your changes.
- Optionally, click “Publish” to make your FlexCard available for use in your Salesforce organization.
- Review any warnings or errors that may appear before publishing to address any issues.
Step 5: Embed FlexCard in Salesforce Pages (Optional)
- After publishing your FlexCard, you can embed it within Salesforce Lightning Pages.
- Navigate to the Lightning App Builder and edit an existing page or create a new one.
- Drag the “OmniStudio FlexCard” component onto the page layout and select your published FlexCard.
- Save the changes to the page layout, and your FlexCard will be visible to users within Salesforce.
Conclusion
FlexCards in Salesforce are powerful components that enable organizations to present data and perform actions in a streamlined, user-friendly manner. With their customizable design, interactive capabilities, and ability to integrate with multiple data sources, FlexCards enhance the user experience and improve efficiency. Whether you’re summarizing key information, facilitating customer transactions, or embedding complex data visualizations, FlexCards offer a versatile solution for a wide range of use cases. By following the steps to create and configure FlexCards, businesses can harness their full potential to drive productivity and deliver superior user experiences within the Salesforce ecosystem.
