---
schema_version: "1"
id: 1006ada89d98e4c0d98e57671db6725a9f2c66fb9e025a3aee33e24ba4e38399
title: cpq-base-header-card (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpq_base_header_card__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_base_header_card__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ae1c147ea58671a64d84eb508fae1bf805c95723d44ccc6576a406ec2cdab407
description: The cpq-base-header-card template provides the structure for the cart header.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpq-base-header-card (template)

The cpq-base-header-card template provides the structure for the cart header.

In ​Salesforce Industries Communications, Media, and Energy Summer '18, cpq-base-header-card includes the following changes:

- Replaced using the native field **Order.status** with the custom field **OrderStatus\_\_c**.
- Created the **Cancel Order** button. It is enabled only when an order has a prevalidate action.
- Displays the batch Cancel Order Locked when **IsChangesAllowed\_\_c** is **false** when the order reaches the point of no return.
- Created class for batch Cancel Order Locked in SCSS.

**Template Type**

Cards

**Code**

HTML, CSS/SCSS

**Image**

![The cart header, showing a Draft object icon and two buttons: View Record and Generate Document PDF.](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/salesforce_cpqcart_header.jpg)

**Upgrade from Vlocity CME Winter '18 to Vlocity CME Summer '18**

When upgrading from ​Salesforce Industries Communications, Media, and Energy Winter '18 to ​Salesforce Industries Communications, Media, and Energy Summer '18, you must make the following change to the HTML in the Card Designer.

**First Change**

```
{{::obj.Status}}
{{::obj.OrderStatus__c | uppercase}}
```

**Second Change**

In CME Summer '18, add the following new code:

```
<span ng-show="obj.IsChangesAllowed__c === 'false'" class="slds-badge cpq-base-header-badge">
{{::importedScope.customLabels.CPQCancelOrderLocked}}
</span>
<button class="slds-button slds-m-left_large slds-button_neutral"
ng-click="importedScope.invokeOrderAction(obj.actions)"
ng-show="obj.actions && obj.actions.prevalidate"
ng-disabled="importedScope.progress.isProcessing">
{{::importedScope.customLabels.CPQCancelOrder}}
</button>
```

**Third Change**

```
<button cpq-dropdown-handler="isOpen = false" class="slds-button slds-button_icon-border-filled" aria-haspopup="true" ng-click="isOpen = !isOpen"
id="{{idPrefix}}-toggle" title="Show More">
  <slds-button-svg-icon size="type === 'button-group' ? null : 'small'" sprite="'utility'" icon="'down'"></slds-button-svg-icon>
  <span class="slds-assistive-text">Show More</span>
</button>
<button cpq-dropdown-handler="isOpen = false" class="slds-button slds-button_icon-border-filled"        aria-haspopup="true" ng-click="isOpen = !isOpen" id="{{idPrefix}}-toggle" title="{{::importedScope.customLabels.CPQShowMore}}">
  <slds-button-svg-icon size="type === 'button-group' ? null : 'small'" sprite="'utility'" icon="'down'"></slds-button-svg-icon>
  <span class="slds-assistive-text">{{::importedScope.customLabels.CPQShowMore}}</span>
</button>
```

**Fourth Change**

In CME Summer '18, add the following :

```
.#{$namespace}-base-header-badge {
padding: 5px 15px;
margin: auto;
margin-right: 5px;
}  "
```