---
schema_version: "1"
id: 2fd19d533b1eab7c6d54c62d021375377673b0cbc9f8a0f38ed16a9e2d359099
title: Industries CPQ in LWC
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_t_industries_cpq_in_lwc_176340.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_t_industries_cpq_in_lwc_176340.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2ef5bc5d5e14242344e3ac1ed1fae2c1899f732989621e8c55505cd6e6e92576
description: For Winter '22 and later, Industries CPQ is available in a Lightning Web Components (LWC) interface. Open the Industries CPQ app from the Salesforce app launcher. The Cart for Industries CPQ has a new LWC layout. You can select Add Products to open the Cart in LWC from an order or quote from the Industries CPQ app or from another app, such as Sales. You can also open the Cart from the Assets tab for an account.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# Industries CPQ in LWC

For Winter '22 and later, Industries CPQ is available in a Lightning Web Components (LWC) interface. Open the Industries CPQ app from the Salesforce app launcher. The Cart for Industries CPQ has a new LWC layout. You can select Add Products to open the Cart in LWC from an order or quote from the Industries CPQ app or from another app, such as Sales. You can also open the Cart from the Assets tab for an account.

The new Lightning Web Components (LWC) interface offers improved usability and performance for Industries Configure, Price, and Quote. The new interface aligns with Salesforce's standards for LWC and offers more intuitive, consumer-like experiences. The LWC interface is more responsive than the Angular interface, and calls to backend APIs are optimized. These changes mean a better purchasing and sales experience for your clients and your sales representatives.

The Industries CPQ app is available from the app launcher.

![Industries CPQ](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_industries_cpq_app_launch.png)

After you open Industries CPQ, the first tab is the title, and you can't interact with it.

Use the tab after the title to open the different Industries CPQ pages.

![action menu](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_industries_cpq_menu.png)

You can also open the Cart in LWC from an order or quote in another app, such as Sales, or from the Assets view. See [Open the Industries CPQ Cart in LWC](https://help.salesforce.com/s/articleView?id=ind.comms_t_open_the_industries_cpq_cart_in_lwc_176857.htm&release=264.0.0&type=5 "You can open the Cart in LWC from an order, quote, or opportunity from the Industries CPQ app or from another app, such as Sales. You can also open the Cart from the Assets tab for an account.").

The Cart for Industries CPQ has a new layout that uses LWC.

![Example of Industries CPQ Cart using LWC.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_cart_catalog_tab.png)

The Cart has four main tabs that you use when creating or modifying an order or quote.

- Catalog — Shows the products and promotions in the product catalog that's associated with the selected price list for the order or quote. Search and configure products and promotions before you add them to the Cart. You can also select and configure multiple items. To see the Cart from the Catalog tab, click **Preview Cart** to show a smaller view of the Cart on the right.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_note.png)
    
    Note The order of products in a product list matches the sequence in which an API returns the responses. The original sequence number assigned to a product does not affect its position in the list.
- Cart — Shows the Cart items and all applied promotions and discounts as the main view. Click **Add Products** to show a smaller Catalog Preview on the left.
- Product Sequence Number — Product sequence numbers cannot be used to control the display order of line items, product groups, or child products in FlexCard or LWC based carts.
- Solution Details — Shows the Cart and includes the **View By** feature. You can group products by specific fields to review and modify similar items.
- Details — Shows the order or quote fields, such as the price list, order name, billing address, and other fields. To modify an order field, click its edit icon ![The pencil icon to edit or configure](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/productconsole_editbutton.jpg). The details tab is where the user can change the price list used by the cart.

Industries CPQ in LWC includes the following features.

- Asset Viewer with bulk asset change
- Catalog browsing
- Product and bundle configuration before adding to the Cart
- Persistent Cart
- Asset pricing improvements
- Search products, promotions, discounts
- Manual adjustments
- Improved quote and order line display
- Quote and order line grouping
- Move asset to quote or order
- Discount approval
- Custom discounts
- Multi-site quotes and orders
- In-flight amendments

Currently, Industries CPQ in LWC doesn't support these features:

- Multi-Language Support
- Right-to-Left text
- The Collapsible Hierarchy setting

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_note.png)

Note The LWC Cart used to display the time based on your Salesforce user settings for consistency, offset picked from User locale, while Flexcards and Hybrid components used your computer's clock or browser's timezone, offset picked based on browser locale, which has been rectified now.

The following table answers questions about Industries CPQ in LWC.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d72788e265">
            <p style="margin-bottom:0;">Question</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d72788e271">
            <p style="margin-bottom:0;">Answer</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Must a customer migrate to Industries CPQ in LWC after an org is upgraded to Winter
              '22?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p>No, using Industries CPQ and Cart in LWC isn't a requirement after upgrading to
              Winter '22. The Angular JS version of the Cart can co-exist with the Cart in LWC in
              the same deployment. The Cart in Angular JS will eventually be obsolete following
              the feature retirement process.</p>
            <p>Which Cart to use depends on the stage of a project.</p>
            <ul>
              <li>
                <p>For projects that have go-live or in the process of going live on Angular JS,
                  they should continue to use the Cart in Angular though they must migrate to the
                  Cart in LWC at some point.</p>
              </li>

              <li>
                <p>For projects that have yet to start, use the Cart in LWC.</p>
              </li>

            </ul>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">For customers upgrading Industries CPQ in Angular JS, is the migration automated
              from Angular JS to LWC?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p>No, the migration isn’t automated. Angular CPQ and LWC CPQ are two different
              applications. The architecture, style, logic to express the style, structure of the
              pages are different. Some code logic can be reused.</p>
            <p style="margin-bottom:0;">Customizations for Angular JS must be manually added for Industries CPQ in LWC.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Can Industries CPQ support both the Angular JS pages and LWC pages for CPQ? Can
              they co-exist?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p>Yes, technically these two pages can co-exist inside the same FlexiPage via the
              Lightning App Builder. The direction is to retire all Angular JS pages.</p>
            <p style="margin-bottom:0;">Industries CPQ in LWC is built from scratch using FlexCards that generate LWCs in
              runtime. Industries CPQ in LWC doesn't use any existing Angular JS pages.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">My project implementations are in progress. What customizations should be avoided
              to reduce the impact of migration?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Because there’s no auto-migration, minimize customizations to avoid manually adding
              them for LWC.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Can Industries CPQ in LWC be used in a browser on a tablet? Can it be used in the
              native Salesforce app?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Industries CPQ in LWC is built using OmniStudio FlexCards. For information on the
              browsers and screen resolutions that OmniStudio supports, see <a href="https://help.salesforce.com/s/articleView?id=sf.flow_browsers_supported.htm&amp;language=en_US" target="_blank">Browser Requirements</a>. Industries CPQ in LWC doesn't
              currently support the Salesforce mobile app.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Does Industries CPQ in LWC use OmniScript? Can it be configured?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Industries CPQ in LWC is built with FlexCards. FlexCards can be used within
              OmniScript as custom LWC. Customers can add steps during the product configuration
              flow or any flow that is built using OmniScript.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Is Salesforce going to continue to&nbsp;support the Cart in Angular JS based on the
              cards framework?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Salesforce will support the&nbsp;Cartin Angular JS as long as customers are using it.
              The Cartin Angular JS will eventually be retired following the Salesforce feature
              retirement&nbsp;process.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">If I customize Industries CPQ in LWC (such as adding OmniScript steps), how does
              the upgrade work?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">OmniScript steps remain the same. Any customizations in FlexCards components must
              be manually added with the FlexCard Designer after an upgrade.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Does Industries CPQ in LWC support OmniOut?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Not in Winter '22 and Spring '22. We have some FlexCard component and headless
              utility files that make direct VIP calls via remote actions. They need to be
              converted to use the data source SDK that can switch between on-platform (remote
              actions) and off-platform (apexRest) calls to VIP. Salesforce plans the conversion
              and thorough testing in Summer '22.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Does Industries CPQ in LWC support anonymous browsing?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">No, Industries CPQ in LWC is designed to support logged-in users.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Are there examples of how to customize the LWC for Industries CPQ?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">See <a href="https://help.salesforce.com/s/articleView?id=ind.comms_examples_of_lwc_customizations_for_industries_cpq.htm&amp;language=en_US" target="_blank">Examples of LWC Customizations for Industries CPQ</a> and the
              <a href="https://trailhead.salesforce.com/en/content/learn/modules/omnistudio-flexcards/explore-the-flexcard-designer" target="_blank">FlexCard Designer</a> trailhead.
            </p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Do I need to manually install LWC CPQ Cards?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Yes, you must manually import all the FlexCards using IDX Workbench. See <a href="https://help.salesforce.com/s/articleView?id=ind.comms_deploy_industries_cpq_in_lwc_for_winter__22.htm&amp;language=en_US" target="_blank">Deploy Industries CPQ in LWC for Winter '22 </a>.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Question" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e265 ">
            <p style="margin-bottom:0;">Is Salesforce going to develop new features in Angular JS for Industries CPQ?</p>
          </td>

          <td data-label="Answer" class="slds-cell-wrap" style="vertical-align:top;" headers="d72788e271 ">
            <p style="margin-bottom:0;">Starting in Spring '22, Salesforce will minimize new features developed in Angular
              JS and eventually address only bug fixes. The plan is to retire the Cart in Angular
              JS at a future date following the feature retirement process.</p>
          </td>

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

## See Also

[Application Constraints](https://help.salesforce.com/s/articleView?id=ind.comms_application_constraints.htm&type=5&language=en_US)

[Manual Price Changes in the Cart](https://help.salesforce.com/s/articleView?id=ind.comms_manual_price_changes_in_the_cart.htm&release=264.0.0&type=5 "Sometimes your account managers need to adjust a price to resolve a customer complaint, match prices with a competitor, or ensure that a customer renews their service contract.")

[Bulk Processing of Assets from the Asset Viewer](https://help.salesforce.com/s/articleView?id=ind.comms_bulk_processing_of_assets_from_the_asset_viewer.htm&release=264.0.0&type=5 "Bulk asset processing enables you to select multiple assets of the same or different business or service accounts and update them simultaneously. With this feature, you can select multiple assets and create a quote or order for them. You can then choose to make individual changes to the assets one at a time or apply common changes to a group of assets all at once. For example, say all assets in a business account for an ISP now support enhanced upload speeds. You can change the upload speeds for all assets in multiple services accounts of a parent business account in one operation.")

[Create a Multi-Site Quote or Order in Industries CPQ](https://help.salesforce.com/s/articleView?id=ind.comms_create_a_multi_site_quote_or_order_in_industries_cpq.htm&release=264.0.0&type=5 "When you create a master quote or order from an opportunity, it’s linked to the account with which the opportunity is associated. You can create multi-site groups based on the service points, premises, service accounts, subscribers, and other objects associated with the account. After you add and configure products, promotions, and discounts to a group, you can then apply them to all the individual members of the group. At that point, a child quote or order is created for each group member.")

[Amend In-Flight Orders in LWC](https://help.salesforce.com/s/articleView?id=ind.comms_amend_in_flight_orders_in_lwc.htm&release=264.0.0&type=5 "Any order that is in the process of fulfillment is referred to as an In-flight order. Using the Amending In-Flight Orders feature, you can modify your order after you've submitted it. It helps you fine-tune your order before order management completes its fulfillment.")

[Cancel an In-Flight Order in LWC](https://help.salesforce.com/s/articleView?id=ind.comms_cancel_an_in_flight_order_in_lwc.htm&release=264.0.0&type=5 "You can cancel a submitted order if it hasn't passed the point of no return (PONR).")

[Add Multisite Custom Record Types to Industries CPQ in LWC](https://help.salesforce.com/s/articleView?id=ind.comms_add_multisite_custom_record_types_to_industries_cpq_in_lwc.htm&type=5&language=en_US)

[Deploy Industries CPQ in LWC with OmniStudio Disabled](https://help.salesforce.com/s/articleView?id=ind.comms_deploy_industries_cpq_in_lwc_with_omnistudio_disabled.htm&type=5&language=en_US)

[Deploy Industries CPQ in LWC with OmniStudio Enabled](https://help.salesforce.com/s/articleView?id=ind.comms_deploy_industries_cpq_in_lwc_with_omnistudio_enabled.htm&type=5&language=en_US)