Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Counter

この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。

Counter UIパターンを使用すると、数値情報を通知として表示することができます。たとえば、未読メール、未開封メッセージ、新しいタスクがあるときにそれらの数をユーザーに通知する場合に、Badge UIパターンがよく使用されます。

Counter UIパターンの使用方法

通常、Counter UIパターンは動的な情報を表示します。多くの場合、このパターンを使用する前に、画面に表示する情報を含むデータを取得または更新する必要があります。これを行うには、アクションを使用します。

以下の例は、プラットフォームの登録ユーザー数を表示する方法を示しています。

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

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

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

  3. 要素ツリーで、画面を右クリックしてドロップダウンから[Add Preparation]を選択し、Preparationアクションを作成します。

    このPreparationアクションは、画面が表示される前にデータを取得するロジックを実行します。

  4. Data]タブを選択し、要素ツリーでUserエンティティを見つけて、Preparationアクションにドラッグします。

    これにより、プラットフォームのすべてのユーザーを取得するAggregateが作成されます。

  5. 画面をもう一度開くため、[Interface]タブを選択し、画面をダブルクリックします。

  6. Counterウィジェット内の(「26」という数字が含まれる)Textウィジェットを右クリックして、[Convert to Expression]を選択します。

  7. Expressionエディタで以下のExpressionを入力し、[Done]をクリックします。

    GetUsers.Count

    注記: Expressionエディタの[Scope]ツリーで[Count]出力パラメータを見つけてダブルクリックし、Expressionを追加することもできます。

これで、Preparationアクションに追加したAggregateのCountプロパティを表示するためのExpressionが作成されました。これにより、プラットフォームのユーザー数が取得されてCounterに表示されます。

  1. Counterの各ウィジェットの[Properties]タブで、Counterの表示テキストとアイコンをカスタマイズできます。この例では、表示テキストを「Registered Users」に変更しています。

  2. Properties]タブでオプションのプロパティを設定し、高さや方向などのCounterのルックアンドフィールをカスタマイズすることもできます。

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

プロパティ

プロパティ 説明
Orientation(Orientation Identifier型): オプション カウンタの方向を設定します。デフォルトでは、カウンタは横方向に表示されます。

  • Entities.Orientation.Horizontal - カウンタが横方向に表示されます。
  • Entities.Orientation.Vertical - カウンタが縦方向に表示されます。
Height(Text型):オプション カウンタの高さを設定します。デフォルトでは、カウンタの高さは100(ピクセル単位)になります。
ExtendedClass(Text型):オプション Counter UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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