---
schema_version: "1"
id: 7b6a7b29ad6550723010fd3f44aab83c52db7d0d3361ab179540d3fa35a7ad61
title: Cards Framework Required Resources (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_cards_framework_required_resources.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_cards_framework_required_resources.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 88e46c7dd20eda7460cc9aee7849068b1196789c9c59a259cb1c8c3fc49b28f3
description: For the managed package runtime, for Angular components, when implementing the CardFramework in your custom page, you must include these resources, in the order given.
products:
  - Omnistudio
release: "264"
---
# Cards Framework Required Resources (Managed Package)

For the managed package runtime, for Angular components, when implementing the `CardFramework` in your custom page, you must include these resources, in the order given.

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

<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="d322773e50">
            <p style="margin-bottom:0;">Resource</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d322773e56">
            <p style="margin-bottom:0;">Location</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d322773e62">
            <p style="margin-bottom:0;">Description</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Resource" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e50 ">
            <p style="margin-bottom:0;">
              <code>vlocity_core_assets.js</code>
            </p>
          </td>

          <td data-label="Location" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e56 ">
            <p style="margin-bottom:0;">
              <code>$Resource.vlocity_core_assets, '/latest/vlocity_core_assets.js'</code>
            </p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e62 ">
            <p>A compilation of libraries and frameworks used by Vlocity, including:</p>
            <ul>
              <li>
                <p>AngularJS 1.6.8</p>
              </li>

              <li>
                <p>jQuery 3.2.1</p>
              </li>

              <li>
                <p>Lodash 4.17.4</p>
              </li>

              <li>
                <p>Moment 2.17</p>
              </li>

              <li>
                <p>Angular-animate</p>
              </li>

              <li>
                <p>Angular-sanitize</p>
              </li>

              <li>
                <p>Angular-messages</p>
              </li>

              <li>
                <p>Angular-aria</p>
              </li>

              <li>
                <p>Angular-hotkeys</p>
              </li>

              <li>
                <p>CurrencyFormatter.js 1.x</p>
              </li>

              <li>
                <p>Vlocity internal providers and services:</p>
                <ul>
                  <li>
                    <p>
                      <code>Vlocity.js</code>
                    </p>
                  </li>

                  <li>
                    <p>
                      <code>RemoteActions.js</code>
                    </p>
                  </li>

                  <li>
                    <p>
                      <code>promiseQueue.js</code>
                    </p>
                  </li>

                  <li>
                    <p>
                      <code>localizable.js</code>
                    </p>
                  </li>

                  <li>
                    <p>
                      <code>InteractionTracking.js</code>
                    </p>
                  </li>

                  <li>
                    <p>
                      <code>currencyInfo</code>
                    </p>
                  </li>

                </ul>

              </li>

            </ul>
          </td>

        </tr>
        <tr class="">
          <td data-label="Resource" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e50 ">
            <p style="margin-bottom:0;">
              <code>AngularStrap</code>
            </p>
          </td>

          <td data-label="Location" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e56 ">
            <p style="margin-bottom:0;">
              <code>$Resource.angular_strap_bundle_1_6</code>
            </p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e62 ">
            <p style="margin-bottom:0;">Incorporates bootstrap directives in the framework to be used whenever necessary.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Resource" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e50 ">
            <p style="margin-bottom:0;">
              <code>SldsAngular</code>
            </p>
          </td>

          <td data-label="Location" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e56 ">
            <p style="margin-bottom:0;">
              <code>$Resource.SldsAngular</code>
            </p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e62 ">
            <p style="margin-bottom:0;">Angular directives that use the Salesforce Lightning Design System</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Resource" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e50 ">
            <p style="margin-bottom:0;">
              <code>CardFramework_Assets</code>
            </p>
          </td>

          <td data-label="Location" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e56 ">
            <p style="margin-bottom:0;">
              <code>$Resource.cardframework_core_assets , '/latest/cardframework_assets.js'</code>
            </p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e62 ">
            <p>Compilation of specific libraries needed for Cards Framework functionality, including:</p>
            <ul>
              <li>
                <p>ForceTK</p>
              </li>

              <li>
                <p>ForceNG</p>
              </li>

              <li>
                <p>tmhDynamicLocale</p>
              </li>

              <li>
                <p>Moment with Locales</p>
              </li>

              <li>
                <p>Moment-timezone</p>
              </li>

              <li>
                <p>Ng-Table</p>
              </li>

              <li>
                <p>SVG4Everybody</p>
              </li>

              <li>
                <p>IFrameResizer</p>
              </li>

              <li>
                <p>CometD</p>
              </li>

            </ul>
          </td>

        </tr>
        <tr class="">
          <td data-label="Resource" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e50 ">
            <p style="margin-bottom:0;">
              <code>CardFramework.js</code>
            </p>
          </td>

          <td data-label="Location" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e56 ">
            <p style="margin-bottom:0;">
              <code>$Resource.cardframework_core_assets , '/latest/cardframework.js'</code>
            </p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d322773e62 ">
            <p style="margin-bottom:0;">The main framework file including all the directives, services, factories, and providers that house the functionality</p>
          </td>

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