activities
latest
false
重要 :
このコンテンツの一部は機械翻訳によって処理されており、完全な翻訳を保証するものではありません。
ワークフローに関するアクティビティ
Last updated 2024年10月31日

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

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

チュートリアル

次のチュートリアルで、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. テキスト コンポーネントをグリッドに追加して、表の列を複製します。各テキスト コンポーネントを保存します。

    たとえば、表に Column1Column2Column33 つの列がある場合、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><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><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%;
    }.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 の例をダウンロードしてください。

このページは役に立ちましたか?

サポートを受ける
RPA について学ぶ - オートメーション コース
UiPath コミュニティ フォーラム
Uipath Logo White
信頼とセキュリティ
© 2005-2024 UiPath. All rights reserved.