Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Progress Bar

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

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

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

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

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

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

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

  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]タブの[Percentage]ドロップダウンで[Expression Editor]を選択します。 Progress Barのロジックを入力して、[DONE]をクリックします。 これにより、パーセンテージ値がProgress Bar上のストロークとして表示されます。

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

    GetShippedOrders.Count / GetTotalOrders.Count * 100

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

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

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

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

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

プロパティ

プロパティ 説明
Percentage(Integer型): オプション 表示するパーセンテージ。関数またはローカル変数を使用できます。
Color(Color Identifier型): オプション Progress Barの色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - Progress Barの色がアプリを作成したときに選択した色になります(デフォルト値)。
  • Entities.Color.Red - Progress Barの色が赤色になります。
Shape(Shape Identifier型): オプション Progress Barの形を設定します。以下のオプションが事前定義されています。
  • Rounded
  • Soft Rounded
  • Sharp

  • 空白 - Progress Barの角が丸くなります(Entities.Shape.Rounded)。これがデフォルトです。
  • Entities.Shape.Sharp - Progress Barの角がシャープになります。
Size(ProgressBarSize Identifier型): オプション Progress Barのサイズを設定します。以下のオプションが事前定義されています。
  • Extra Small
  • Small
  • Base(デフォルト)
IsInline(Boolean型): オプション Trueの場合、値のプレースホルダは線の最後に配置され、ラベルのプレースホルダは表示されません。Falseの場合、値とラベルのプレースホルダは線上に配置されます。これがデフォルトです。
ExtendedClass(Text型): オプション Progress Bar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるProgress Bar UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるProgress Bar UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?