---
schema_version: "1"
id: 6a56e04a1245139bdf000d4cc55c1d1b79cba54075ff97a055d0816f1a6d56d8
title: comp-assets-product-item (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_comp_assets_product_item__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_comp_assets_product_item__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 901abc785633bbe62d63aa95c81cf699af7bd8de38d9eef4a13e5f06229a337a
description: The comp-assets-product-item template provides the space for products listed by contracts on the cards-based Assets and Review Cart Visualforce pages.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# comp-assets-product-item (template)

The comp-assets-product-item template provides the space for products listed by contracts on the cards-based Assets and Review Cart Visualforce pages.

**Template Type**

Cards

**Code**

HTML, CSS/SCSS

**Image**

![This template looks blank except for an i icon.](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/assets_compassetsproductitemtemplate.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 changes to the HTML in the Card Designer.

**First Change**

```
<button ng-click="childProdState.show = !childProdState.show" class="slds-button assets-item-has-children" aria-controls="tree0-node1" ng-hide="!(obj.childAssets.records || obj.lineItems.records || obj.productGroups.records)">
  <slds-button-svg-icon sprite="'utility'" size="'small'" icon="'switch'" extra-classes="'slds-button__icon_left slds-float_left'" ng-class="{'assets-fix-slds-close-switch' : !childProdState.show}"></slds-button-svg-icon>
  <span class="slds-assistive-text">Toggle</span>
  <span class="assets-product-name" cpq-translate="Product2.Name">{{obj[customField.fieldName]}}</span>
</button>
<button ng-click="childProdState.show = !childProdState.show" class="slds-button assets-item-has-children" aria-controls="tree0-node1" ng-hide="!(obj.childAssets.records || obj.lineItems.records || obj.productGroups.records)">
  <slds-button-svg-icon sprite="'utility'" size="'small'" icon="'switch'" extra-classes="'slds-button__icon_left'" ng-class="{'assets-fix-slds-close-switch' : !childProdState.show}"></slds-button-svg-icon>
  <span class="slds-assistive-text">Toggle</span>
  <span class="assets-product-name">{{obj[customField.fieldName]}}</span>
</button>
```

**Second Change**

```
<span class="assets-item-no-children" ng-show="!(obj.childAssets.records || obj.lineItems.records || obj.productGroups.records)">
{{ obj[customField.fieldName]}}
</span>
<span class="assets-item-no-children" ng-show="!(obj.childAssets.records || obj.lineItems.records || obj.productGroups.records)" cpq-translate="Product2.Name">
{{ obj[customField.fieldName]}}
</span>
```

**Third Change**

```
{{promoItem.Name}}{{$last ? '' : ', '}}
<span cpq-translate=""Promotion.Name"">{{promoItem.Name}}</span>
{{$last ? '' : ', '}}
```