- 概要
- 吹き出し
- 複雑なシナリオ
- 資格情報
- Data Service
- フォーム
- リリース ノート
- プロジェクトの対応 OS
- リアルタイム フォーム
- フォーム データを更新する
- JavaScript を使用してフォームを実行する
- CSS を使用してフォームをカスタマイズする
- 条件付きコンポーネント
- 複数のコンポーネントを列の同じ行に追加する
- データ テーブル コンポーネントを使用する
- ファイル/フォルダー パスを取得
- データ グリッド コンポーネントからセルの値を読み取る
- PDF ファイルを表示する
- フォーム内で画像を表示する
- データ グリッドをスクロールする
- フォームで開発者ツールを使用する
- フォーム コンポーネントの値を計算する
- フォーム内の日付を管理する
- フォーム内のハイパーリンクを開く
- フォームに既定のタブを表示する
- コンポーネントのラベル全体を表示する
- ドロップダウン リストの長い文字列を検索する
- 23.4 より前のフォーム エクスペリエンスについて
- プロジェクトの対応 OS
- リアルタイム フォーム
- 動的なチェック ボックス
- 条件付きドロップダウン
- 既定タブを表示する
- 画像を表示する
- PDF ファイルを表示する
- ラベル全体を表示する
- 動的な HTML 要素
- 日付を管理する
- ドロップダウンで長い文字列を検索する
- ローカル CSS ファイルを使用してフォームをカスタマイズする
- チェックボックスの変更時に [実行] ブロックを実行する
- 列の幅をカスタマイズする
- フォーム データを更新する
- コレクション データをリセットする
- 高度な論理
- ドロップダウン オプションの変更時に [実行] ブロックを実行する
- データ グリッド コンポーネントからセルの値を読み取る
- 条件付きコンポーネント
- データ グリッド コンポーネントをスクロールする
- グリッド コンポーネントを使用する
- 開発ツール
- 計算値
- 動的ドロップダウン
- ボタンのクリックでタブを切り替える
- フォーム内のハイパーリンクを開く
- FTP
- IPC
- 永続性
- リリース ノート
- プロジェクトの対応 OS
- 永続性アクティビティ パッケージについて
- 一括編集フォーム デザイナー
- ジョブを開始し参照を取得 (Start Job And Get Reference)
- ジョブ完了まで待機し再開
- キュー アイテムを追加し参照を取得 (Add Queue Item And Get Reference)
- キュー アイテム完了まで待機し再開
- フォーム タスク完了まで待機し再開
- 時間差で再開 (Resume After Delay)
- タスクを割り当て
- 外部タスクを作成
- 外部タスクの完了を待機して再開
- タスクを完了する
- タスクを転送 (Forward Task)
- フォーム タスクを取得 (Get Form Tasks)
- タスク データを取得 (Get Task Data)
- アプリ タスクを取得
- タスクのコメントを追加
- タスクのラベルを更新
- アプリ タスクを作成
- アプリ タスク完了まで待機し再開
- タスク タイマーを設定
- Automation Ops パイプライン
- システム
- リリース ノート
- システム アクティビティ パッケージについて
- プロジェクトの対応 OS
- サポートされている文字エンコード
- 正規表現ビルダー ウィザード
- データ列を追加
- データ行を追加
- ログ フィールドを追加
- 日付に加算または減算
- トランザクション アイテムを追加
- キュー アイテムを追加
- コレクションに項目を追加
- リストに項目を追加
- 文字列を追加書き込み
- 警告音
- 繰り返しを終了
- ファイルを参照
- フォルダーを参照
- コレクションを構築
- データ テーブルを構築
- キュー アイテムを一括追加
- 文字種を変更
- 型を変更
- False か確認
- True か確認
- データ テーブルをクリア
- コレクションをデータ テーブルに変換
- コメント
- ファイルを圧縮 (Zip)
- ファイルをコピー
- フォルダーをコピー
- テキストを結合
- コメント アウト/無効化されたアクティビティ
- 現在の繰り返しをスキップ/現在の繰り返しをスキップ
- ファイルを作成
- フォルダーを作成
- リストを作成
- カスタム入力
- 削除する
- ファイルを削除
- フォルダーを削除
- ストレージ ファイルを削除
- キュー アイテムを削除
- ローカル トリガーを無効化
- 繰り返し (後判定)
- ファイルを URL からダウンロード
- ストレージ ファイルをダウンロード
- ローカル トリガーを有効化
- ビジネス ルールを評価
- コレクション内での有無
- ファイルを展開 (Unzip)
- テキストから日付と時刻を抽出
- テキストを取得
- ファイル変更トリガー
- ファイルの存在を確認
- コレクションをフィルター
- データ テーブルをフィルター
- フォルダーの存在を確認
- 繰り返し (コレクションの各要素)
- 繰り返し (フォルダー内の各ファイル)
- ファイル変更トリガー v3
- 検索して置換
- 一致するパターンを探す
- 繰り返し (フォルダー内の各フォルダー)
- 繰り返し (データ テーブルの各行)
- 日付をテキストとして書式設定
- 値を書式化
- テキストからデータ テーブルを生成
- アセットを取得
- 資格情報を取得/Orchestrator の資格情報を取得
- 現在のジョブの情報を取得
- 特殊フォルダーのパスを取得
- 環境変数を取得
- ファイル情報を取得
- フォルダー情報を取得
- ジョブを取得
- プロセスを取得
- 行項目を取得
- トランザクション アイテムを取得
- ユーザー名/パスワードを取得
- キュー アイテムを取得
- グローバル変数変更トリガー
- 入力ダイアログ
- コードを呼び出し
- COM メソッドを呼び出し
- PowerShell を呼び出し
- プロセスを呼び出し
- VBScript を呼び出し
- ワークフロー ファイルを呼び出し
- テキストの一致を確認
- データ テーブルを結合
- プロセスを強制終了
- 対話型ワークフローを起動
- ストレージ ファイルのリストを取得
- メッセージをログ
- データ テーブルを検索
- 手動トリガー
- コレクションを結合
- データ テーブルをマージ
- メッセージ ボックス
- 日付を変更
- テキストを変更
- ファイルを移動
- フォルダーを移動
- 複数代入
- キューへの新しいアイテムの追加
- グローバル変数の変更を通知
- Orchestrator への HTTP 要求
- データ テーブルを出力
- パスの存在を確認
- トランザクション アイテムを延期
- プロセス終了トリガー
- プロセス開始トリガー
- アラートを生成
- リストの項目を読み込み
- テキスト ファイルを読み込み
- ストレージ テキストを読み込み
- データ列を削除
- データ行を削除
- 重複行を削除
- コレクションから削除
- ログ フィールドを削除
- 一致するパターンを置換
- 繰り返し (指定回数)
- トリガーを繰り返し
- ファイル名を変更
- フォルダー名を変更
- ステータスを報告
- タイマーをリセット
- タイマーを再開
- リトライ スコープ
- 復帰
- プロセスを並列実行
- アセットを設定
- 資格情報を設定
- 環境変数を設定
- トランザクションの進行状況を設定
- トランザクションのステータスを設定
- 停止すべきか確認
- テキストを分割
- データ テーブルを並べ替え
- ローカル トリガーを実行
- タイマーを開始
- ジョブを開始
- ジョブを停止
- ローカル トリガーを停止
- タイマーを停止
- テキストを左右に分割
- テキストを大文字/小文字にする
- タイム トリガー
- トリガー スコープ
- タイムアウト スコープ
- 行項目を更新
- リストの項目を更新
- ストレージ ファイルをアップロード
- ダウンロードを待機
- キュー アイテムを待機
- 繰り返し (前判定)
- ワークフロー プレースホルダー
- ストレージ テキストを書き込み
- テキスト ファイルに書き込み
- データ行を追加
- AddQueueItem
- トランザクション アイテムを追加
- 文字列を追加書き込み
- BulkAddQueueItems
- データ テーブルをクリア
- Zip ファイルを圧縮 (CompressZipFiles)
- ファイルをコピー
- ファイルを作成
- フォルダーを作成
- ファイルまたはフォルダーを削除
- キュー アイテムを削除
- ストレージ ファイルを削除
- ストレージ ファイルをダウンロード
- Unzip ファイルを抽出 (ExtractUnzipFiles)
- データ テーブルをフィルター
- アセットを取得
- 資格情報を取得
- GetJobs
- Get Queue Item
- GetQueueItems
- ローカル パスのリソースを取得
- 行項目を取得
- トランザクション アイテムを取得
- プロセスを呼び出し
- データ テーブルを結合
- ストレージ ファイルのリストを取得
- データ テーブルを検索
- データ テーブルをマージ
- ファイルを移動
- Orchestrator への HTTP 要求
- OutputDataTable
- パスの存在を確認
- トランザクション アイテムを延期
- ストレージ テキストを読み込み
- テキスト ファイルを読み込み
- データ列を削除
- 重複行を削除
- 置換
- アセットを設定
- 資格情報を設定
- SetTransactionProgress
- トランザクションのステータスを設定
- データ テーブルを並べ替え
- StartJob
- StopJob
- 行項目を更新
- ストレージ ファイルをアップロード
- キュー アイテムを待機
- ストレージ テキストを書き込み
- テキスト ファイルに書き込み
- テスト
- リリース ノート
- テスト アクティビティ パッケージについて
- プロジェクトの対応 OS
- プロジェクト設定
- Address
- AddTestDataQueueItem
- AttachDocument
- BulkAddTestDataQueueItems
- DeleteTestDataQueueItems
- GetTestDataQueueItem
- GetTestDataQueueItems
- GivenName
- LastName
- RandomDate
- RandomNumber
- RandomString
- RandomValue
- VerifyAreEqual
- VerifyAreNotEqual
- VerifyContains
- VerifyExpression
- VerifyExpressionWithOperator
- VerifyIsGreater
- VerifyIsGreaterOrEqual
- VerifyIsLess
- VerifyIsLessOrEqual
- VerifyIsRegexMatch
- VerifyRange
- ワークフロー イベント
- Workflow Foundation
列の幅をカスタマイズする
フォーム内の表に、同じ幅の列ではなく、より広いまたは狭い幅の列が必要になることがあります。[編集グリッド] コンポーネントと [データ グリッド] コンポーネントでは、表のカスタム幅を設定できます。
myTable
として保存されている表の Column3
の幅を変更する手順について説明します。
データ テーブルを構築する
フォーム内で使用する表を作成するには、次の手順を実行します。
- ワークフロー内に [データ テーブルを構築] アクティビティを追加します。
- [データ テーブル...]をクリックします。データ テーブルを構築ウィザードが開きます。
-
表に必要な列を追加して、そのプロパティを編集します。
列名にスペースや特殊文字が含まれていないことを確認してください。これらの列名を使用して、コンポーネントの [フィールド キー] タブからフォーム内の列をリンクするためです。
- [OK] をクリックして表を保存します。
-
[データ テーブルを構築] アクティビティの [プロパティ] パネル > [出力] フィールドで、表の変数名を設定します (
myTable
など)。この変数を使用し、[フォームを作成] アクティビティの [フォーム フィールド コレクション] プロパティを通じて表をフォームにバインドします。
フォームにデータ テーブルをバインドするには、次の手順を実行します。
- ワークフローに [フォームを作成] アクティビティを追加します。
- [プロパティ] パネル > [フォーム フィールド コレクション] フィールドで 3 点リーダー メニュー (fa-ellipsis-v:) をクリックします。[フォーム フィールド コレクション] ウィザードが開きます。
-
引数を作成し、変数 (
myTable
) を使用して前に作成した表にリンクします。引数の [方向] をIn/Out
、[種類] をDataTable
に設定します。引数に [名前] を付けます (例:table
)。
-
[OK] をクリックします。
[入力フィールドを生成] ボックスがオフになっていることを確認してください。
- [フォームを作成] アクティビティからフォーム デザイナーを開きます。
- [データ] カテゴリからグリッド コンポーネント (編集グリッドまたはデータ グリッド、あるいはその両方) をドラッグ アンド ドロップします。
-
グリッドの [フィールド キー] タブで、表の引数 (
table
) を参照します。[フィールド キー] の値は大文字と小文字が区別されます。
-
テキスト コンポーネントをグリッドに追加して、表の列を複製します。各テキスト コンポーネントを保存します。
たとえば、表にColumn1
、Column2
、Column3
の 3 つの列がある場合、3 つのテキスト コンポーネントをグリッド内にドラッグ アンド ドロップします。表の列名をコンポーネントの [フィールド キー] タブで使用するようにしてください。[フィールド キー] の値は大文字と小文字が区別されます。
- フォームを保存します。
Bootstrap 3 を使用する
- 編集グリッド コンポーネントの設定に移動します。
-
[テンプレート] タブ > [ヘッダー テンプレート] セクションで、既定で生成されるコードを以下のテンプレートで変更します。
<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> -
[テンプレート] タブ > [行テンプレート] セクションで、既定で生成されるコードを以下のテンプレートで変更します。
<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
)。
スタイル プロパティを使用する
- 編集グリッド コンポーネント上でホバーし、[編集] をクリックします。設定ページが開きます。
-
[テンプレート] タブに移動します。
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 ピクセルの幅を適用します。
- コンポーネントとフォームを保存します。
-
指定の列幅でローカル 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%; } - [フォームを作成] アクティビティの [プロパティ] パネル > [ローカル CSS ファイル パス] フィールドで、以前に作成した CSS ファイルを参照します。例:
"/file://C:\User\Desktop\EditColumnWidth.css"
- [データ グリッド] コンポーネント > [表示] タブ > [カスタム CSS クラス] フィールドで、CSS クラスの名前を入力します (例:
mygrid
)。
ワークフロー全体を確認するか、今後の参考にするには、XAML の例をダウンロードしてください。