編集グリッドの列幅をカスタマイズする

このチュートリアルでは、編集グリッドの最後の列の幅を変更する方法について説明します。

前提条件: このチュートリアルの手順を実行するには、データ テーブルを作成します。表の最後の列に含まれるコンテンツの長さを、約 5 語から 6 語よりも長くしてください。

1. ワークフローに [データ テーブルを構築] アクティビティを追加します。
2. データ テーブルを構築ウィザードを開き、必要な列をテーブルに追加します。
   メモ： 列にはスペースや特殊文字が含まれないようにしてください。後でこれらの名前を使用して、[プロパティ名] からフォーム内の列をリンクするためです。
3. データ テーブルを変数に保存します。この例では、dataTable という名前を付けることができます。
   
   

   

   
   

1. フォームに編集グリッドを追加し、コンポーネントのプロパティ名として DataTable 変数 (dataTable) の名前を使用します。
2. データ テーブルの列とその値に従って、編集グリッドにコンポーネントを追加します。これらのコンポーネントのプロパティ名は、データ テーブルの列の正確な名前です。
   この例では、3 つのテキスト フィールド コンポーネントを追加します。コンポーネントには、プロパティ名 column1、column2、column3 を使用します。
3. 編集グリッド コンポーネントの設定の [テンプレート] タブに移動します。Bootstrap 3 を使用するか、CSS style プロパティを使用して、列の幅を編集できます。
   • Bootstrap 3 を使用する
     1. [ヘッダー テンプレート] セクションで、既定で生成されるコードを以下のテンプレートで変更します。

        <div class="row">
              {% util.eachComponent(components, function(component) { %}
                {% if (displayValue(component)) { %}
                {% if (component.key=== 'Column3') { %}
                      <div class="col-sm-8">
                    {% } %}
                    {% if (component.key !== 'Column3') { %}
                      <div class="col-sm-2">
                    {% } %}
                  {{ component.label }}</div>
                {% } %}
              {% }) %}
            </div>

     2. [行テンプレート] セクションで、既定で生成されるコードを以下のテンプレートで変更します。

        <div class="row">
              {% util.eachComponent(components, function(component) { %}
               {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
                    {% if (component.key=== 'Column3') { %}
                      <div class="col-sm-8">
                    {% } %}
                    {% if (component.key !== 'Column3') { %}
                      <div class="col-sm-2">
                    {% } %}
                    {{ 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>

     ヒント:

     • component.key 値と列の正確な名前を比較します。列名は、各テキスト コンポーネントの [プロパティ名] として使用されているものと同じです。
     • UiPath フォームは、Bootstrap 3 フレームワークを使用しています。表の合計幅は 12 のセクションに分かれています。そのため、作成するセクションの合計が 12 になるようにしてください。この例では、4 つのセクションが col-sm-2 クラスを含む 2 つの列で占められており、残りの 8 つのセクションは 3 つ目の列のために残されています (col-sm-8)。
   • style プロパティを使用する
     1. ヘッダー テンプレート スクリプトで、すべての <div class="col-sm-2"> タグを特定し、カスタム幅を追加 (style="width:{your_custom_width}px !important") します。幅はピクセル単位で表す必要があります。
        
        

        

        
        
     2. 行テンプレート スクリプトで、すべての <div class="col-sm-2"> タグを特定し、カスタム幅を追加 (style="width:{your_custom_width}px !important") します。幅はピクセル単位で表す必要があります。
        
        

        

        
        
     "col-sm-2" 要素は既定の列幅を表します。既定の列幅を変更するには、カスタマイズしたスタイル タグを追加します。たとえば、style="width:70px !important" は、編集グリッドのすべての列に 70 ピクセルの幅を適用します。
4. コンポーネントとフォームを保存します。