comp-assets-info-panel (template)

The comp-assets-info-panel template renders the information panel in the cards-based Assets and Review Cart Visualforce pages.

The comp-assets-info-panel template provides multi-language support translation for Attribute Category Name, Attribute Name, and Attribute Value for attribute types.

Template Type

Containers

Code

HTML, CSS/SCSS

Image

The panel has an X for closing, a scrollbar, and an Additional Setting header below the main canvas.

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 changes to the HTML in the Card Designer.

First Change

In CME Winter '18, keep the following:

<h3>{{attributeObj.Name}}</h3>

In CME Summer '18, replace the HTML above with the following HTML to use translation features:

<h3 cpq-translate="AttributeCategory.Name">{{attributeObj.Name}}</h3>

Second Change

In CME Winter '18, keep the following:

<span class="slds-form-element__label slds-text-body_regular">{{attribute.label}}:</span>

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span class="slds-form-element__label slds-text-body_regular" cpq-translate="Attribute.Name"> {{attribute.label}}
</span>

Third Change

In CME Winter '18, keep the following:

<span ng-if="attribute.inputType !== 'dropdown' && attribute.inputType !=='radio' && attribute.inputType !=='checkbox' && attribute.inputType !=='date'">

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span ng-if="attribute.inputType !== 'dropdown' && attribute.inputType !=='radio' && attribute.inputType !=='checkbox' && attribute.inputType !=='date'" cpq-translate="Attribute.Value">

Fourth Change

In CME Winter '18, keep the following:

<span ng-repeat="valueObj in attribute.values" ng-if="valueObj.value === attribute.userValues">
{{valueObj.label}}
</span>

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span ng-repeat="valueObj in attribute.values" ng-if="valueObj.value === attribute.userValues">
{{valueObj.label | CPQTranslateFilter:'Attribute.Name' }}
</span>

Fifth Change

In CME Winter '18, keep the following:

<span ng-if="!$first">, </span>{{valueObj.label}}

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span ng-if="!$first">, </span>
<span cpq-translate="Attribute.Name">{{valueObj.label}}</span>

Sixth Change

In CME Winter '18, keep the following:

<span  ng-if="!$first">, </span>{{valueObj.label}}

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span  ng-if="!$first">, </span><span cpq-translate="Attribute.Name">{{valueObj.label}}</span>

Seventh Change

In CME Winter '18, keep the following:

<span ng-if="!attribute.multiselect && attribute.inputType ==='checkbox'">

In CME Summer '18, replace the above HTML with the following HTML to use translation features:

<span ng-if="!attribute.multiselect && attribute.inputType ==='checkbox'" cpq-translate="Attribute.Value">"