Salesforce Docs Portal

Creating an LWC Flyout (Managed Package)

For the managed package runtime, flyouts in Vlocity Cards provide additional information about the record displayed on the card when you click the flyout. For example, a flyout can display information from long text strings that do not fit in the standard card field, or data from child records, such as open cases for an account, or additional actions.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

With an LWC flyout, choose any LWC enabled component to use as a flyout, such as an LWC card layout, an LWC Omniscript, and a custom LWC you've created.

Alternatively, create an LWC enabled flyout layout as you would create an Angular flyout.

  1. Go to the Vlocity Cards tab and click New to create a new card layout.
  2. On the New Layout screen, in the Type field, select Flyout.
  3. Click Enable LWC in the Layout pane.
  4. (Optional) Configure the flyout Data Source if your flyout does not need to use data from the parent context variable of the card layout where you'll add your flyout. See Configuring Data Sources for Cards Components (Managed Package).
  5. Click Activate on the Layout pane and on each card.
  6. To add the LWC flyout to a card state:
    1. Go to the Vlocity Cards tab and open a card.
    2. In the Flyout section of a card state, select an LWC flyout or any LWC enabled component from the dropdown list.
      Note
      Note

      You must activate the LWC enabled component for it to appear in the dropdown list. See Creating an LWC Card Layout (Managed Package).

    3. To set the attributes of the LWC enabled component, click Add Attributes in the Flyout Properties section.

      For example, the dataTable component requires values for both records and columns attributes whose values must be data references. Enter records and $scope.records as the first key-value pair to get the list of records and then enter columns and $scope.session.columns as the second key-value pair to set column titles.