Progress Circle

Progress Circle UIパターンを使用すると、操作フローの現在の進捗状況を表示できます。進捗状況に応じて、円形のバッジの部分円が増加していきます。進捗バーや部分円形の進捗の表示タイプで進捗状況を表示することもできます。 Progress Circleパターンを使用する場合、一貫性が保たれるようにする必要があります。たとえば、ある画面でアクションに直線形の表示を使用する場合、アプリの他の画面で同じアクションに円形の表示を使用しないようにしてください。-->

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

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

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

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

   

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

   

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

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

   

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

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

   

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

   

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

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

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

    Order.Status = Entities.OrderStatus.Shipped

    

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

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

    GetShippedOrders.Count / GetTotalOrders.Count * 100

    

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

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

    

14. ［Properties］タブで（オプションの）プロパティを設定し、色やアニメーション設定などのProgress Circleのルックアンドフィールを変更することもできます。

    

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