列の幅をカスタマイズする

フォーム内の表に、同じ幅の列ではなく、より広いまたは狭い幅の列が必要になることがあります。[編集グリッド] コンポーネントと [データ グリッド] コンポーネントでは、表のカスタム幅を設定できます。

チュートリアル

次のチュートリアルで、myTable として保存されている表の Column3 の幅を変更する手順について説明します。

データ テーブルを構築する

フォーム内で使用する表を作成するには、次の手順を実行します。

1. ワークフロー内に [データ テーブルを構築] アクティビティを追加します。
2. [データ テーブル...]をクリックします。データ テーブルを構築ウィザードが開きます。

3. 表に必要な列を追加して、そのプロパティを編集します。

   列名にスペースや特殊文字が含まれていないことを確認してください。これらの列名を使用して、コンポーネントの [フィールド キー] タブからフォーム内の列をリンクするためです。

   
   

   

   
   
4. [OK] をクリックして表を保存します。
5. [データ テーブルを構築] アクティビティの [プロパティ] パネル > [出力] フィールドで、表の変数名を設定します (myTable など)。

   この変数を使用し、[フォームを作成] アクティビティの [フォーム フィールド コレクション] プロパティを通じて表をフォームにバインドします。

   
   

   

   
   

フォーム コンポーネントとグリッド コンポーネントにデータ テーブルをバインドする

フォームにデータ テーブルをバインドするには、次の手順を実行します。

1. ワークフローに [フォームを作成] アクティビティを追加します。
2. [プロパティ] パネル > [フォーム フィールド コレクション] フィールドで 3 点リーダー メニュー (fa-ellipsis-v:) をクリックします。[フォーム フィールド コレクション] ウィザードが開きます。
3. 引数を作成し、変数 (myTable) を使用して前に作成した表にリンクします。引数の [方向] を In/Out、[種類] を DataTable に設定します。引数に [名前] を付けます (例: table)。
   
   

   

   
   

4. [OK] をクリックします。

   [入力フィールドを生成] ボックスがオフになっていることを確認してください。

編集グリッド コンポーネントまたはデータ グリッド コンポーネントにデータ テーブルをバインドするには、次の手順を実行します。

1. [フォームを作成] アクティビティからフォーム デザイナーを開きます。
2. [データ] カテゴリからグリッド コンポーネント (編集グリッドまたはデータ グリッド、あるいはその両方) をドラッグ アンド ドロップします。
3. グリッドの [フィールド キー] タブで、表の引数 (table) を参照します。

   [フィールド キー] の値は大文字と小文字が区別されます。

   
   

   

   
   

4. テキスト コンポーネントをグリッドに追加して、表の列を複製します。各テキスト コンポーネントを保存します。

   たとえば、表に Column1、Column2、Column3 の 3 つの列がある場合、3 つのテキスト コンポーネントをグリッド内にドラッグ アンド ドロップします。表の列名をコンポーネントの [フィールド キー] タブで使用するようにしてください。

   [フィールド キー] の値は大文字と小文字が区別されます。

   
   

   

   
   
5. フォームを保存します。

編集グリッド コンポーネントで列の幅をカスタマイズする

Bootstrap 3 を使用する

1. 編集グリッド コンポーネントの設定に移動します。

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

   <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>

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

   <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 値を正確な列名と比較してください。列名は各テキスト コンポーネントの [フィールド キー] タブで使用されるものと同じです (「編集グリッド コンポーネントまたはデータ グリッド コンポーネントにデータ テーブルをバインドする」の手順 4)。
   • UiPath フォームは、Bootstrap 3 フレームワークを使用しています。表の合計幅は 12 のセクションに分かれています。そのため、作成するセクションの合計が 12 になるようにしてください。この例では、4 つのセクションが col-sm-2 クラスを含む 2 つの列で占められており、残りの 8 つのセクションは 3 つ目の列のために残されています (col-sm-8)。

スタイル プロパティを使用する

1. 編集グリッド コンポーネント上でホバーし、[編集] をクリックします。設定ページが開きます。

2. [テンプレート] タブに移動します。

   2.1. ヘッダー テンプレート スクリプトで、すべての <div class="col-sm-2"> タグを特定し、次のようにカスタム幅を追加します。 style="width:{your_custom_width}px !important" 幅はピクセル単位で表す必要があります。
   2.2. 行テンプレート スクリプトで、すべての <div class="col-sm-2"> タグを特定し、「 style="width:{your_custom_width}px !important"」の形式でカスタム幅を追加します。幅はピクセル単位で表す必要があります。
   "col-sm-2" 要素は既定の列幅を表します。既定の列幅を変更するには、カスタマイズしたスタイル タグを追加します。たとえば、style="width:70px !important" は、編集グリッドのすべての列に 70 ピクセルの幅を適用します。
   
   

   

   
   
   
   

   

   
   
3. コンポーネントとフォームを保存します。

データ グリッド コンポーネントで列の幅をカスタマイズする

1. 指定の列幅でローカル CSS ファイルを作成します。この例では、以下のテンプレートでより広い幅の Column3 を作成します (nth-child(3))。

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }

2. [フォームを作成] アクティビティの [プロパティ] パネル > [ローカル CSS ファイル パス] フィールドで、以前に作成した CSS ファイルを参照します。例: "/file://C:\User\Desktop\EditColumnWidth.css"
3. [データ グリッド] コンポーネント > [表示] タブ > [カスタム CSS クラス] フィールドで、CSS クラスの名前を入力します (例: mygrid)。

サンプル ワークフロー

ワークフロー全体を確認するか、今後の参考にするには、XAML の例をダウンロードしてください。