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

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;
}  "