You are here:
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;
} "