---
schema_version: "1"
id: e02e72ab9772dcefa29b828309b7eebabbedd3548182bfd8fa85bc1f34f50ab4
title: Flexcard Designer Changes and Enhancements Summer '20 (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcard_designer_changes_and_enhancementssummer20.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_designer_changes_and_enhancementssummer20.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 0425236cd2fdb12ab2fe89edead8dc299dd3c14a1dae2fe906a904a3999fff21
description: For the managed package runtime, changes in functionality affect how you must configure your Flexcard and how your Flexcard performs.
products:
  - Omnistudio
release: "264"
---
# Flexcard Designer Changes and Enhancements Summer '20 (Managed Package)

For the managed package runtime, changes in functionality affect how you must configure your Flexcard and how your Flexcard performs.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

For information on unsupported features, see [Flexcard Designer Considerations (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_designer_considerations.htm&release=264.0.0&type=5 "For the managed package runtime, the Flexcard Designer doesn’t support all functions, features, and data sources available in the Vlocity Cards Designer.").

Beginning with Vlocity Insurance and Health Summer '20 , the Flexcard Designer enables you to preview while you build dynamic context-specific user interfaces for customer interactions using a drag interface with WYSIWYG editing. The Flexcard Designer is LWC only and does not support Angular. See [Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, the Flexcard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. Build interfaces rich in information and with actions relevant to your customer's context. You can also create the look and feel of your Flexcard by styling individual elements from graphic user interfaces (GUIs) built into the designer.").

Beginning Summer '21, for latest changes and enhancements to the Flexcard Designer, see Vlocity Release Notes.

## Changes to UI Names

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d130407e80">Flexcards Designer</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d130407e83">Vlocity Cards Designer (LWC Enabled)</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d130407e86">Reference</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Custom data source</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Sample data source</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_configure_a_custom_data_source_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, embed custom JSON data directly into Flexcard without depending on any external data source. Configure the Custom data source for testing with temporary static data. For example, when you're waiting for access to an API, or if you want to quickly test a concept.">Configure a Custom Data Source on a Flexcard (Managed Package)</a>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Event Action with Custom and Pubsub subtypes.</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Pubsub Action</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <ul>
                <li>
                  <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_trigger_a_custom_event_from_an_action_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, notify a Flexcard of an event occurring from an action on an element. Then execute an action based on the event. Custom Events are used to communicate between a child to its parent, whether it's between a child Flexcard and its parent, or between an element and the Flexcard it's on.">Trigger a Custom Event from an Action on a Flexcard (Managed Package)</a>
                </li>

                <li>
                  <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_trigger_a_pubsub_event_from_an_action_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, enable an action on a Flexcard to notify another component, such as another Flexcard on a page or application, of an event occurring. For example, update a list of products on one Flexcard from a filter on another Flexcard on the same page or application.">Trigger a Pubsub Event from an Action on a Flexcard (Managed Package)</a>
                </li>

              </ul>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Navigate Action</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Custom Action</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_navigate_from_a_flexcard_with_the_navigate_action.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, navigate to an external web address, or within Lightning Experience, Lightning communities, or the Salesforce mobile app from a Navigate Action element on a Flexcard. For example, allow a user to navigate to a Policy record page by clicking an action element on a Flexcard that lists Account Policies.">Navigate from a Flexcard with the Navigate Action (Managed Package)</a>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Publish Options</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Show XML Interface</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_configure_publish_options_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, define metadata values, such as where your Flexcard is visible, and update the component SVG icon for your Flexcard before publishing your component to a Lighting or Experience page. For example, to view your Flexcard on an Experience site you can enable Community Page under Targets in Publish Options.">Configure Publish Options on a Flexcard (Managed Package)</a>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Repeat Records</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Loop Settings</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_disable_record_looping_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, to display data that doesn't need repeating in a Chart or Datatable, disable the Repeat Records feature. For example, disable the feature to display a Chart element that displays data from multiple Accounts or a Datatable element that lists Account Cases.">Disable Record Looping on a Flexcard (Managed Package)</a>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flexcards Designer" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e80 ">Test Parameters</td>

            <td data-label="Vlocity Cards Designer (LWC Enabled)" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e83 ">Test Data Source Settings</td>

            <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d130407e86 ">
              <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.">Preview a Flexcard (Managed Package)</a>
            </td>

          </tr>
        </tbody>
      </table>

## Changes in Functionality

   
| Functionality | Flexcard Designer | Vlocity Cards Designer (LWC Enabled) | Reference |
| --- | --- | --- | --- |
| Build a Card with Elements | Build a Flexcard with elements, such as Fields, Datatables, Menus, Actions, Custom LWCs, and more. | Build a Vlocity Card Layout with Cards. | [Build a Flexcard with the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_build_a_flexcard_with_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, with the Flexcard Designer create, build, design, test, and activate a Flexcard before publishing it to a Lightning or Experience page. Use a drag interface with WYSIWYG editing to preview while you build dynamic context-specific user interfaces for customer interactions.") |
| Custom LWC | Add a **Custom LWC** as an element by dragging it onto the canvas from the Build panel. | Enable **Custom LWC** on a state. | [Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_embed_a_custom_lwc_inside_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.") |
| Deploy LWC | LWC is automatically generated on Preview and on Activate. | Click **Deploy** to updated changes to your card, see the latest preview, and create the Lightning web component to add to a Community or Lightning page. | — |
| Flyout | Create a flyout from an Action element dragged onto a state. | Enable and configure a flyout from a state. | [Launch a Flyout from an Action on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_launch_a_flyout_from_an_action_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, create a flyout to display additional information when a user clicks an action on a Flexcard. For example, a Flexcard that displays Account information can display the Primary Contact's name and email address in a flyout.") |
| Include User Information | Accessing information about the logged-in user is enabled by default. Use the `User` global context variable in Design view, and see it rendered in Preview. | Enable returning information about the logged in user from the data source of a card and layout with the **Include User Information** feature. | [Flexcards Context Variables (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_context_variables.htm&release=264.0.0&type=5 "For the managed package runtime, global and local context variables are available to a Flexcard to provide context to data sources, actions, and other components. All variables are case sensitive.") |
| Preview in Design View | Preview elements inside states on the canvas while in Design view. | Preview in Preview mode only. | [Add Elements to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_elements_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer.") |
| Viewport Dropdown in Design View | View Flexcard at different viewport breakpoints in Design view. | Preview how a Layout looks on different pages and mobile devices in Preview only. | [View a Flexcard at Different Viewport Breakpoints (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_view_a_flexcard_at_different_viewport_breakpoints.htm&release=264.0.0&type=5 "For the managed package runtime, adjust the size of your Flexcard's canvas to test for responsiveness. Use the Viewport Dropdown in the Flexcard Designer to mimic the sizes of a desktop, laptop, and smaller mobile devices.") |

## Features Unique to the Flexcard Designer

  
| Functionality | Description | Reference |
| --- | --- | --- |
| Add an Event Listener | Add an event listener to the Flexcard. | [Add an Event Listener to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_event_listener_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add an event listener that listens for an event fired from a component and performs an action in response. With a Pubsub Event, listen for an event from another component, such as another Flexcard on the same Lightning page. With a Custom event, listen for an event fired from a child Flexcard or from an element on the card.") |
| Add SVG Resource | Add a custom component SVG icon from the Flexcard Designer. | [Add a Custom Component SVG Icon to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_custom_component_svg_icon_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add an SVG resource as the custom icon for your generated LWC to easily identify it in the Lightning App Builder and the Experience Builder. Use the Publish Options feature on an activated Flexcard to update the default icon with a custom SVG resource.") |
| Add Test Parameters in Preview | Add test paramaters in Preview mode. | [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.") |
| Adjust Element Widths | Manually adjust the width of an element, such as a Field or Action, on the canvas. | [Adjust the Width of an Element on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adjust_the_width_of_an_element_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, after dragging an element from the Build panel into a state, adjust its width along a 12-column horizontal grid. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up 50% of the available horizontal space.") |
| Child Flexcard | Embed a Child Flexcard as an element Inside a Flexcard | [Embed Flexcard Inside Another Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcard_inside_another_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, embed a reusable Flexcard as a child inside another Flexcard. The child Flexcard can have its own data source. Or, the parent can override the child's data source with its own data source. The parent can also pass specific data to the child, such as its recordId to use as the child's contextId.") |
| Custom Event | Add a custom event action to an element. | [Trigger a Custom Event from an Action on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_trigger_a_custom_event_from_an_action_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, notify a Flexcard of an event occurring from an action on an element. Then execute an action based on the event. Custom Events are used to communicate between a child to its parent, whether it's between a child Flexcard and its parent, or between an element and the Flexcard it's on.") |
| Data Source Test Result Table | View test data source results as a table. | [Test Data Source Settings on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_test_data_source_settings_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview a Flexcard with real data by adding test values to runtime variables. The variables populate the dynamic fields in a data source, such as a contextId from an Omnistudio Data Mapper that gets data from an Account.") |
| Enable Tracking | Enable tracking on Action and Child Flexcard elements. | [Enable Tracking on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_enable_tracking_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable user interaction tracking from a Flexcard action or child Flexcard element to publish tracked data with OmniAnalytics. The tracking feature sends tracked information from the Flexcard element to the Vlocity Tracking Service, which is then published by OmniAnalytics.") |
| Export | Export your Flexcard from inside the Flexcard Designer. | [Export a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_export_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, export a Flexcard as a data pack to import to other environments. You can export one or more Flexcards from the Flexcards home tab or from within the Flexcard Designer.") |
| In-Product Help | Find context-sensitive help specific to an element or property inside the Flexcard Designer. | — |
| Multi-Language Support | Enable Multi-Language Support to make all field labels in the designer dynamic. | [Enable Multi-Language Support on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_enable_multi_language_support_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable multi-language support on a Flexcard from the Flexcard Designer. When the multi-language support feature is on, all custom labels are updated and not cached.") |
| Reload Action | Reload a Flexcard from an action. | [Add a Reload Action to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_reload_action_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, with a Card Action, create an action that reloads a Flexcard. For example, create a FLexCard that listens for an event from another Flexcard and reloads itself when the event is fired.") |
| Remove Action | Create action that removes records on a Flexcard. | [Add a Remove Card Action to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_remove_card_action_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, remove a specific record on a Flexcard or remove the entire Flexcard with a remove card action. The data record is only removed from the Flexcard and not from the database it's pulled from. The Flexcard is only removed from the page it's viewed from, and not permanently deleted.") |
| Responsive Elements | Make elements responsive from a interface in the Flexcard Designer. | [Flexcards Element Responsiveness (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_element_responsiveness.htm&release=264.0.0&type=5 "For the managed package runtime, in the Flexcard Designer, enable responsiveness on one or more elements to set the width to change as the visible area of a page, called the viewport, changes. By default, the width of an element is the same regardless of the width of the viewport device on which the user views the Flexcard. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up 50% of the available horizontal space.") |
| Set Values Action | Create an action that updates the data field values on a Flexcard. | [Add an Action to Update Field Values on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_action_to_update_field_values_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, with a Card Action, create an action that updates specific field values on a Flexcard. For example, allow your customer service reps to update the status of a case to closed when the case is resolved.") |
| Style | Style Flexcards from an interface in the Flexcard Designer. Or add custom CSS classes and inline classes. | [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more.") |
| Track Custom Data | Track custom data to publish with OmniAnalytics. | [Track Custom Data on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_track_custom_data_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, track custom data to publish with OmniAnalytics. The tracked information is sent from the Flexcard element to the Vlocity Tracking Service which is then published by OmniAnalytics.") |
| Update Data Source Action | Update a data source from an action. | [Update a Data Source from an Action on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_update_a_data_source_from_an_action_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, with a Card Action, create an action that changes the data source, or updates parameters of an existing data source. For example, create an action that updates the pagination limits on a list of returned records.") |
| Update Omniscript Action | Update an Omniscript from a Flexcard. | [Update an Omniscript from a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_update_an_omniscript_from_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, create an action that updates an Omniscript's data JSON from the Flexcard embedded in the Omniscript. You can embed a Flexcard inside an Omniscript as a Custom LWC.") |