Progress Bar

Progress Barを使用すると、バーの値の増加によってパーセンテージ値を表示し、タスクフローの現在の進捗状況を示すことができます。

Progress Bar UIパターンの使用方法

この例では、既存の顧客注文データベースから出荷済みの注文の割合を表示します。

1. Service StudioのツールボックスでProgress Barを検索します。

   Progress Barウィジェットが表示されます。

   

1.ツールボックスから、Progress Barウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/progressbar-3-ss.png>)

デフォルトで、Progress Barウィジェットには［Title］プレースホルダと［Value］プレースホルダが含まれています。

![](<images/progressbar-4-ss.png>)

1.画面名を右クリックして［Add Preparation］を選択します。

1. ツールボックスから、Aggregateを画面のPreparationにドラッグし、Aggregateの名前を入力します。この例では、Aggregateに「GetTotalOrders」という名前を付けます。

   

2. データベースエンティティを追加するため、先ほど作成したAggregateをダブルクリックして、Aggregate画面をクリックします。

3. ［Select Source］ポップアップでソースエンティティを選択して、［OK］をクリックします。この例では、Orderデータベースを選択します。

   

4. 画面のPreparationに戻り、もう1つAggregateを追加します（手順4を参照）。この例では、2つ目のAggregateに「GetShippedOrders」という名前を付けます。

   

1.関連するデータベースエンティティを追加するため、手順5および6を繰り返します。

1. Aggregate画面で、［Filters］をクリックして［Add Filter］をクリックします。

2. ［Filter Condition］ポップアップでフィルタの関連ロジックを追加して、［DONE］をクリックします。この例では、出荷済みの注文をすべて取得するために以下のロジックを追加します。

   Order.Status = Entities.OrderStatus.Shipped

   

3. 画面名をダブルクリックし、［Properties］タブの［Percentage］ドロップダウンで［Expression Editor］を選択します。 Progress Barのロジックを入力して、［DONE］をクリックします。 これにより、パーセンテージ値がProgress Bar上のストロークとして表示されます。

   この例では、出荷済みの注文のパーセンテージを示すために以下を追加します。

   GetShippedOrders.Count / GetTotalOrders.Count * 100

   

4. ツールボックスからExpressionウィジェットを［Value］プレースホルダにドラッグし、［Properties］タブの［Value］ドロップダウンで［Expression Editor］を選択します。

1.Expressionエディタで手順11と同じロジック（GetShippedOrders.Count / GetTotalOrders.Count * 100）を入力して、［DONE］をクリックします。これにより、Progress Bar上にパーセンテージ値が表示されます。

![](<images/progressbar-15-ss.png>)

1.［Title］プレースホルダに、Progress Barのタイトルとして表示するテキストを追加します。この例では、「Total % of shipped Orders」を追加しています。

![](<images/progressbar-16-ss.png>)

1.［Properties］タブでオプションのプロパティを設定し、形、色、サイズ、方向などのProgress Barのルックアンドフィールをカスタマイズできます。

![](<images/progressbar-5-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。