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

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

このチュートリアルでは、編集グリッドの最後の列の幅を変更する方法について説明します。
前提条件: このチュートリアルの手順を実行するには、データ テーブルを作成します。表の最後の列に含まれるコンテンツの長さを、約 5 語から 6 語よりも長くしてください。
  1. ワークフローに [データ テーブルを構築] アクティビティを追加します。
  2. データ テーブルを構築ウィザードを開き、必要な列をテーブルに追加します。
    メモ: 列にはスペースや特殊文字が含まれないようにしてください。後でこれらの名前を使用して、[プロパティ名] からフォーム内の列をリンクするためです。
  3. データ テーブルを変数に保存します。この例では、dataTable という名前を付けることができます。


  1. フォームに編集グリッドを追加し、コンポーネントのプロパティ名として DataTable 変数 (dataTable) の名前を使用します。
  2. データ テーブルの列とその値に従って、編集グリッドにコンポーネントを追加します。これらのコンポーネントのプロパティ名は、データ テーブルの列の正確な名前です。
    この例では、3 つのテキスト フィールド コンポーネントを追加します。コンポーネントには、プロパティ名 column1column2column3 を使用します。
  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><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><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. コンポーネントとフォームを保存します。

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

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