Progress Circle
Progress Circle UIパターンを使用すると、操作フローの現在の進捗状況を表示できます。進捗状況に応じて、円形のバッジの部分円が増加していきます。
Progress Circle UIパターンの使用方法
この例では、既存の顧客注文データベースから出荷済みの注文の割合を表示します。
-
Service Studioのツールボックスで
Progress Circle
を検索します。Progress Circleウィジェットが表示されます。
-
ツールボックスから、Progress Circleウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
画面名を右クリックして[Add Preparation]を選択します。
-
ツールボックスから、Aggregateを画面のPreparationにドラッグし、Aggregateの名前を入力します。この例では、Aggregateに「GetTotalOrders」という名前を付けます。
-
データベースエンティティを追加するため、先ほど作成したAggregateをダブルクリックして、Aggregate画面をクリックします。
-
[Select Source]ポップアップでソースエンティティを選択して、[OK]をクリックします。この例では、Orderデータベースを選択します。
-
画面のPreparationに戻り、もう1つAggregateを追加します(手順4を参照)。この例では、2つ目のAggregateに「GetShippedOrders」という名前を付けます。
1.関連するデータベースエンティティを追加するため、手順5および6を繰り返します。
-
Aggregate画面で、[Filters]をクリックして[Add Filter]をクリックします。
-
[Filter Condition]ポップアップでフィルタの関連ロジックを追加して、[DONE]をクリックします。この例では、出荷済みの注文をすべて取得するために以下のロジックを追加します。
Order.Status = Entities.OrderStatus.Shipped
-
画面名をダブルクリックし、[Properties]タブの[Progress]ドロップダウンで[Expression Editor]を選択します。円形の進捗のロジックを入力して、[DONE]をクリックします。これにより、パーセンテージ値が円形の進捗上のストロークとして表示されます。
この例では、出荷済みの注文のパーセンテージを示すために以下を追加します。
GetShippedOrders.Count / GetTotalOrders.Count * 100
-
ツールボックスからExpressionウィジェットをProgress Circleの[Content]プレースホルダにドラッグし、[Properties]タブの[Value]ドロップダウンで[Expression Editor]を選択します。
-
Expressionエディタで手順11と同じロジック(
GetShippedOrders.Count / GetTotalOrders.Count * 100
)を入力して、[DONE]をクリックします。これにより、円形の進捗内にパーセンテージ値が表示されます。 -
[Properties]タブで(オプションの)プロパティを設定し、色やアニメーション設定などのProgress Circleのルックアンドフィールを変更することもできます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
プロパティ | 説明 |
---|---|
Progress(Integer型): 必須 | 表示するパーセンテージ。関数またはローカル変数を使用できます。 |
ProgressColor(Color Identifier型): オプション | 円形の進捗上のストロークの色。事前定義された利用可能な色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。 例
|
TrailColor(Color Identifier型): オプション | 円形の進捗の空の部分の色。 例
|
CircleThickness(Integer型): オプション | 進捗状況をマークする円の太さ。 例
|
AnimateInitialProgress (Boolean型): オプション | Trueに設定すると、ゼロから進捗状況の値までの進捗がアニメーション化されます。これがデフォルト値です。Falseに設定すると、進捗はアニメーション化されません。 |
IsSemiCircle (Boolean型): オプション | Trueの場合、円形の進捗が円形から半円形に変更されます。Falseの場合、円形のままです。これがデフォルト値です。 |
AdvancedFormat(Text型): オプション | 入力によって提供されるもの以外の追加オプションを使用できます。詳細については以下をご覧ください。https://kimmobrunfeldt.github.io/progressbar.js/例: { easing: 'bounce' } |