テンプレートの構造 (管理パッケージ)

管理パッケージランタイムの場合、このトピックでは vlcSelectableItemv2.html テンプレートの構造を形成するコードについて説明します。

この情報は、OmniStudio for Managed Packages 用です。標準ランタイムの OmniStudio については、OmniStudio ヘルプを参照してください。

• このテンプレートは標準ではページネーションを処理しませんが、カスタマイズして処理できます。

• コードでは、control.vlcSI による反復がサポートされます。

• buttonClick はリモート通話機能を提供し、configureItem は項目設定機能を含みます。

<script type="text/ng-template" id="vlcSelectableItemV2.html">
   <h2>{{::control.propSetMap.label}}</h2>
   <!-- <button ng-if='control.vlcSI && control.vlcSI[control.itemsKey] && control.vlcSI[control.itemsKey].length > 0' ng-click='openModal(this, control)'>Compare</button> -->
   <br/>
      ><div class="selecteableItem" ng-repeat='p in control.vlcSI[control.itemsKey]'>
         <div class="row result-box">
            <!-- <input class='vlc-compare-check' type="checkbox" ng-model='p.vlcCompSelected' ng-change="onCompSelectItem(control)" ng-disabled="control.compDisable && !p.vlcCompSelected"/> -->
               <div class="img-container padding0">
            <img ng-if="p.Image" src="/servlet/servlet.FileDownload?file={{p.Image}}"/>
            </div>
            <div class="product-info padding0" >
               <h3 class="title">{{p.Name}}</h3>
               <p class="description">
               {{p.Description}}
               </p>
               <!--
               <span class="detail">MORE DETAIL <span class="icon-v-right-caret"></span></span>
               -->
            </div>
            <div class="flex" id="vlocity-price">
               <div style="flex: 1;">
                  <span class="col-xs-6 col-sm-6 padding0">
                  <h6>{!$Label.OmniOneTime}</h6>
                  <h2>{{p.OneTimeCost}}</h2>
               </span>
               <span class="col-xs-6 col-sm-6 padding0">
                  <h6>{!$Label.OmniMonthly}</h6>
                  <h2>{{p.MonthlyCost}}</h2>
               </span>
            </div>
            <div class="item-actions" ng-init=" p.isConfigurable == true ? operation = 'configureProd' : operation = 'Add' ">
               <!--
               <button class="btn btn-primary col-md-12" ng-click="buttonClick(bpTree.response, control, this, p, 'Add', baseCtrl.customHandleSelectedItem)">
               {!$Label.AddToCart}
               </button>
               <div ng-if="p.comparable" class="compare-link">Add to Compare</div>
               -->
               <button class="btn btn-primary col-md-12" ng-click="configureItem(bpTree.response, control, this, p, operation, baseCtrl.customHandleSelectedItem, baseCtrl.customIsConfigurable)">
               {!$Label.AddToCart}
            </button>
         </div>
      </div>
      </div>
   </div>
</script>