編集グリッド テンプレートをカスタマイズする

このチュートリアルは、編集グリッドのヘッダー テンプレートと行テンプレートをカスタマイズして、見栄えをよくしたいときに役立ちます。特定の列の幅を広げて、CSS クラス bg-success を適用する方法を学習します。

前提条件:

1. Persistence.Activities バージョン 1.4.8 以上をインストールします。
2. [フォーム タスクを作成] アクティビティで 高度なフォームを選択します。

1. 編集グリッドの [テンプレート] タブに移動します。
2. ヘッダー テンプレートの内容を、以下のコード スニペットに置き換えます。

   <div class="row">
         <div class="col-sm-2">{{ components[0].label }}</div>
         <div class="col-sm-6 bg-success">{{ components[1].label }}</div>
         <div class="col-sm-2">{{ components[2].label }}</div>
   </div>

   コード スニペットの行 <div class="col-sm-2">{{ component.label }}</div> を、編集グリッドの最初の列を表すよう変更しました。component を components[0] に置き換えて、列をインデックス番号で識別できるようにしました。編集グリッドのすべての列に対してこの行を複製しました。次に、目的のコンポーネントに bg-success クラスを追加し、col-sm-2 クラスを col-sm-6 に変更して列の幅を広げました。
3. 行テンプレートの内容を、以下のコード スニペットに置き換えます。

   <div class="row">
             <div class="col-sm-2">
               {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}}
             </div>
           <div class="col-sm-6 bg-success">
             {{ isVisibleInRow(components[1]) ? getView(components[1], row[components[1].key]) : ''}}
             <div class="col-sm-2">
             {{ isVisibleInRow(components[2]) ? getView(components[2], row[components[2].key]) : ''}}
            
           <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
             <div class="col-sm-2">
               {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>

   コード スニペットの行 <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> を、最初の列を表すよう更新しました。そして、component を components[0] に置き換えて、列をインデックス番号で識別できるようにしました。編集グリッドのすべての列に対してこの行を複製しました。次に、ヘッダー テンプレートで変更したのと同じ列の、col-sm-2 クラスを col-sm-6 に変更し、行テンプレートに bg-success クラスを追加しました。
   
   

   

   
   

これらの手順では、指定された列の幅を広げ、bg-success クラスを適用して、列が編集グリッドのスペースの 60% を占め、列の背景が緑色になるようにします。

ワークフローの例

この手順に従ってこのチュートリアルをご自身で試してみるには、こちらからサンプル ワークフローをダウンロードします。