Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Badge

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

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

Badge UIパターンの使用方法

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

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

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

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

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

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

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

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

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

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

  6. Badgeウィジェットを選択し、[Properties]タブの[Number]ドロップダウンで[Expression Editor]を選択します。

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

    LongIntegerToInteger(GetUsers.Count)

    注記: Expressionエディタの[Scope]ツリーで[Count]出力パラメータを見つけてダブルクリックし、Expressionを追加することもできます。ただし、想定されるBadgeのデータ型(Integer型)がCountのデータ型(Long Integer型)と異なるため、LongIntegerToIntegerGet.Users.Count Expressionに追加して正しいExpressionにする必要があります。

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

  1. Properties]タブでオプションのプロパティを設定し、色、形、サイズなどのBadgeのルックアンドフィールをカスタマイズすることもできます。以下の例では、青色の小サイズの円形のバッジが表示されます。

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

プロパティ

プロパティ 説明
Number(Integer型): オプション バッジ内に表示される数字。これを、Badgeに表示される値を含むデータソースに設定します。一般的なユースケースとして、変数に含まれる値の表示やAggregate(たとえば、現在のユーザーの「Messages」テーブルをクエリして新規メッセージの数を返すなど)の結果の表示などがあります。

  • 空白 - 数字8を表示します(デフォルト値)。
  • 22 - 数字22を表示します。
  • VariableName - 変数「VariableName」にその時点で保持している値を表示します。
  • ExampleAggregate.Count - 「ExampleAggregate」Aggregateの実行によって返されるレコード数を表示します。
Color(Color Identifier型):オプション バッジの色を設定します。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - アプリを作成したときに選択した色のバッジを表示します(デフォルト値)。
  • Entities.Color.Red - 赤色のバッジを表示します。
Shape(Shape Identifier型):オプション バッジの形を設定します。事前定義された利用可能なバッジの形は、円形、角が丸い四角形、四角形です。

  • 空白 - 円形のバッジを表示します(デフォルト値)。
  • Entities.Shape.Sharp - 四角形のバッジを表示します。
Size(Size Identifier型):オプション バッジのサイズを設定します。事前定義された利用可能なバッジのサイズは、小および中です。

  • 空白 - 中サイズのバッジを表示します(デフォルト値)。
  • Entities.Size.Small - 小サイズのバッジを表示します。
IsLight(Boolean型): オプション バッジの背景色を指定します。

  • 空白 - バッジに暗い色合いを適用し、テキストに淡い色合いを適用します(デフォルト値)。
  • True - バッジに明るい色合いを適用し、テキストに暗い色合いを適用します。
  • False - バッジに暗い色合いを適用し、テキストに淡い色合いを適用します。
ExtendedClass(Text型):オプション Gallery UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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

その他の注記

Badgeパターンの数字が99より大きい場合、99+と表示されます。

  • Was this article helpful?