---
schema_version: "1"
id: 40ceed7eea5c9ab34f198d370db93ab37b2d8fcb77c2e9e2217843c8c49399aa
title: WideCardSmart LWC Card Template (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_widecardsmart_lwc_card_template.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_widecardsmart_lwc_card_template.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 27a7f419da13d7a38d9789cc245f1effc6e528f4e525b8a00f10c1d5c75b1650
description: For the managed package runtime, this page contains the WideCardSmart ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# WideCardSmart LWC Card Template (Managed Package)

For the managed package runtime, this page contains the WideCardSmart ReadMe for each Vlocity release.

![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).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _WideCardSmart LWC Card Template_ displays a card state template with a wide layout and uses _Smart Actions_ to generate actions on the card. See the Configuring Smart Actions on an LWC Card topic. The layout includes an image, has flyout functionality, has field tracking capability, and displays the status of the card state. The data fields display in an inline grid.

## Available WideCardSmart Features

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e65">
              <p style="margin-bottom:0;">Feature</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e71">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e65 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e71 ">
              <p style="margin-bottom:0;">By default, the title of the card is the first field configured. The remaining fields display as blocks.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e65 ">
              <p style="margin-bottom:0;">actions</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e71 ">
              <p style="margin-bottom:0;">By default, the first action is the banner action. The action's visible Label displays as the banner title. Remaining actions display under the fields.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e65 ">
              <p style="margin-bottom:0;">session</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e71 ">
              <p style="margin-bottom:0;">See Available <em>session</em> Variables on this page.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e65 ">
              <p style="margin-bottom:0;">flyout</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e71 ">
              <p style="margin-bottom:0;">By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To use a card without a flyout, and if Smart Actions are not required, use the <em>WideCardSlim LWC Card Template</em> instead.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e65 ">
              <p style="margin-bottom:0;">smartAction</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e71 ">
              <p style="margin-bottom:0;">This lwc by default supports smartAction and works same way as actions. Refer IP output fields for more info.</p>
            </td>

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

## Available session Variables

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e181">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e187">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e181 ">
              <p style="margin-bottom:0;">img</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e187 ">
              <p style="margin-bottom:0;">Sets the image url. For example, <code>/image-url.jpg</code>. URL can be relative or absolute.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e181 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e187 ">
              <p style="margin-bottom:0;">Defines the height of the card image</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e181 ">
              <p style="margin-bottom:0;">status</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e187 ">
              <p style="margin-bottom:0;">Defines the status of the card. Is hidden if null or empty.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e181 ">
              <p style="margin-bottom:0;">imageSyle</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e187 ">
              <p style="margin-bottom:0;">Sets style for smart action banner image</p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small " summary="Available smartAction Integration Procedure Output Fields">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e279">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d91525e285">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">id</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Sets the name of the action.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">type</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Sets the type of the action. Is <code>Vlocity Action</code> by default.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">displayName</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Displays a visible label for the action.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">iconName</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Set this variable to add an icon to the action. Supports only SLDS icons.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">description</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Sets the action description on the banner.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e279 ">
              <p style="margin-bottom:0;">image</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d91525e285 ">
              <p style="margin-bottom:0;">Set this variable to use an image instead of an icon. An image has higher priority than an icon.</p>
            </td>

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

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _WideCardSmart LWC Card Template_ displays a card state template with a wide layout and uses _Smart Actions_ to generate actions on the card (see Configuring Smart Actions on an LWC Card). The layout includes an image, has flyout functionality and displays the status of the card state. The data fields display in an inline grid.

## Available WideCardSmart Features

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e423">
              <p style="margin-bottom:0;">Feature</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e429">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e423 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e429 ">
              <p style="margin-bottom:0;">By default, the title of the card is the first field configured. The remaining fields display as blocks.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e423 ">
              <p style="margin-bottom:0;">actions</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e429 ">
              <p style="margin-bottom:0;">By default, the first action is the banner action. The action’s visible Label displays as the banner title. Remaining actions display under the fields.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e423 ">
              <p style="margin-bottom:0;">session</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e429 ">
              <p style="margin-bottom:0;">See Available <em>session</em> Variables on this page.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e423 ">
              <p style="margin-bottom:0;">flyout</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e429 ">
              <p style="margin-bottom:0;">By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal. To use a card without a flyout, and if Smart Actions are not required, use the<em>WideCardSlim LWC Card Template</em> instead.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e423 ">
              <p style="margin-bottom:0;">smartAction</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e429 ">
              <p style="margin-bottom:0;">This lwc by default supports smartAction and works same way as actions. Refer IP output fields for more info.</p>
            </td>

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

## Available session Variables

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e540">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e546">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e540 ">
              <p style="margin-bottom:0;">img</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e546 ">
              <p style="margin-bottom:0;">Sets the image url. For example, <code>&lt;image url&gt;</code>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e540 ">
              <p style="margin-bottom:0;">status</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e546 ">
              <p style="margin-bottom:0;">Defines the status of the card. Is hidden if null or empty.</p>
            </td>

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

## Available smartAction Integration Procedure Output Fields

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e608">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d91525e614">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e608 ">
              <p style="margin-bottom:0;">id</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e614 ">
              <p style="margin-bottom:0;">Sets the name of the action.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e608 ">
              <p style="margin-bottom:0;">type</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e614 ">
              <p style="margin-bottom:0;">Sets the type of the action. Must be <code>Vlocity Action</code> by default.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e608 ">
              <p style="margin-bottom:0;">displayName</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e614 ">
              <p style="margin-bottom:0;">Displays a visible label for the action.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e608 ">
              <p style="margin-bottom:0;">iconName</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d91525e614 ">
              <p style="margin-bottom:0;">Sets the icon name for the action. Supports only SLDS icons.</p>
            </td>

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