Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

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のルックアンドフィールを変更することもできます。

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

プロパティ

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

  • 空白 - アプリを作成したときに選択した色でストロークを表示します(デフォルト値)。
  • Entities.Color.Red - ストロークが赤色になります。
TrailColor(Color Identifier型):オプション 円形の進捗の空の部分の色。

  • 空白 - 円の空白部分が薄い灰色になります(Entities.Color.Neutral5)。これがデフォルト値です。
  • Entities.Color.Blue - 円形の進捗の空白部分が青色になります。
CircleThickness(Integer型):オプション 進捗状況をマークする円の太さ。

  • 空白 - 円の太さが4pxになります。これがデフォルト値です。
  • 8 - 円の太さが8pxになります。
AnimateInitialProgress (Boolean型): オプション Trueに設定すると、ゼロから進捗状況の値までの進捗がアニメーション化されます。これがデフォルト値です。Falseに設定すると、進捗はアニメーション化されません。
IsSemiCircle (Boolean型): オプション Trueの場合、円形の進捗が円形から半円形に変更されます。Falseの場合、円形のままです。これがデフォルト値です。
AdvancedFormat(Text型):オプション 入力によって提供されるもの以外の追加オプションを使用できます。詳細については以下をご覧ください。https://kimmobrunfeldt.github.io/progressbar.js/例: { easing: 'bounce' }
  • Was this article helpful?