進行状況表示バー・コントロール

このコントロールでは、特定のユーザーによる特定の操作の進行状況を視覚的に確認することができます。

進行状況表示バー・コントロールの視覚的な表示により、処理が完了しているタブ、ページ、入力フィールドの数を一目で把握することができます。通常、進行状況表示バー・コントロールは、Web 上のフォームやタブのヘッダーとして使用します。

構成プロパティー

「構成」プロパティー・タブで、コントロールの構成プロパティー (外観プロパティーや動作プロパティーなど) の設定や変更を行います。数式構成プロパティーは「イベント」タブで設定します。

画面サイズ: プロパティー名の横に「画面サイズ」アイコンがある構成プロパティーには、画面サイズごとに異なる値を指定できます。値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。Process Designer デスクトップ・エディターを使用している場合は、大きい画面サイズにその値を設定していることになります。その他の画面サイズはこの値を継承します。

テーマ定義: テーマ定義は、コントロールの色およびスタイルを指定し、コントロールの外観を決定します。コントロールのルック・アンド・フィールをテーマ・エディターでプレビューできます。テーマを参照してください。

以下の表に、進行状況表示バー・コントロールの外観構成プロパティーを示します。

表 1. 進行状況表示バー・コントロールの外観構成プロパティー
外観構成プロパティー	説明	データ型
色のスタイル	進行状況表示バーの塗りつぶす色の色スタイルを指定します。色は、指定したテーマの変数に対応します。デフォルトの色のスタイルはデフォルト (グレー) です。	`ストリング`
ストライプ	このプロパティーを選択すると、進行状況表示バーにストライプが追加されます。	`ブール`
アクティブ	このプロパティーとともに「ストライプ」を選択すると、進行状況表示バーのストライプが動きます。	`ブール`
半径	進行状況表示バーの角の丸さを、ピクセル単位または em 単位で指定します。例えば、`15px`、`1em` のようにします。単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。デフォルトでは、境界半径は指定されていません。	`ストリング`
幅	進行状況表示バーの幅を、ピクセル単位、パーセント単位、または em 単位で指定します。例えば、`800px`、`80%`、または `50em` のようにします。単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。	`ストリング`
高さ	ウェルの高さを、ピクセル単位、または em 単位で指定します。例えば、`15px`、`1em` のようにします。単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。デフォルトでは、高さは指定されていません。	`ストリング`

以下の表に、進行状況表示バー・コントロールの動作構成プロパティーを示します。

表 2. 進行状況表示バー・コントロールの動作構成プロパティー
動作構成プロパティー	説明	データ型
最大値	進行状況の合計数値を指定します (「幅」と混同しないでください)。例えば、`100` です。	`整数`

例

この例では、進行状況表示バー・コントロールに対して、以下の構成プロパティーが設定されています。

動作構成プロパティー
- 「最大値」は 100 に設定されています。
外観構成プロパティー:
- 「色のスタイル」は「情報」に設定されています。
- 「ストライプ」が選択されています。
- 「アクティブ」が選択されています。
- 「半径」は 1 に設定されています。
- 「幅」は 25% に設定されています。
イベント構成プロパティー:
- 「ロード時」イベントについて、me.setProgress(50); のように、setProgress メソッドを使用して進行状況表示バーの値が 50 に設定されています。

上記のように各プロパティー値が設定されている場合、薄い青色の、角の丸い進行状況表示バーが、アニメーション化されたストライプ模様で半分塗りつぶされた状態で作成されます。バーの幅は、ページ幅の 25% になります。

イベント

「イベント」タブで数式構成プロパティーおよびコントロールのイベント・ハンドラーの設定や変更を行います。イベントをプログラムでトリガーするかユーザーがコントロールと対話したときにトリガーするように設定できます。イベントの定義およびコーディングの方法については、ユーザー定義イベントを参照してください。

以下の表に、進行状況表示バー・コントロールの数式構成プロパティーを示します。

表 3. 進行状況表示バー・コントロールの数式構成プロパティー
数式構成プロパティー	説明	データ型
公式	進行状況を計算するための式。	`ストリング`

進行状況表示バー・コントロールには、以下のタイプのイベント・ハンドラーがあります。

ロード時: ページのロード時にアクティブ化されます。
クリック時: 進行状況表示バーをクリックするとアクティブになります。

メソッド

このコントロールでは、以下のメソッドを使用することができます。

setWidth(): 進行状況表示バーの幅を設定します。
getWidth(): 進行状況表示バーの幅として設定されているサイズを、単位とともに取得します。
setHeight(): 進行状況表示バーの高さを設定します。
getHeight(): 進行状況表示バーの高さとして設定されているサイズを、単位とともに取得します。
setColorStyle(): 進行状況表示バーの色のスタイルを設定します。
setRadius(): 進行状況表示バーの半径 (丸さ) を設定します。
setProgress(): 進行状況を設定します。
getProgress(): 進行状況を取得します。
setMaximum(): 進行状況表示バーの最大値を設定します。

これらのメソッドの使用方法については、JavaScript の資料を参照してください。

追加のリソース

Coach の作成方法については、Coach のビルドを参照してください。
標準プロパティー (「一般」、「構成」、「位置決め」、「可視性」、および「HTML 属性」) については、Coach ビューのプロパティーを参照してください。