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

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

前提条件:

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

チュートリアル

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% を占め、列の背景が緑色になるようにします。

ワークフローの例

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