Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 
 
OutSystems

Icon Badge

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

Icon Badge UIパターンの使用方法

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

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

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

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

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

    デフォルトで、Icon Badgeには[Icon]プレースホルダ(事前定義されたアイコンを含む)が含まれています。

  3. Aggregate(この例ではプラットフォームのすべてのユーザーを取得します)を作成するため、画面名を右クリックして[Fetch Data from Database]を選択します。

  4. データベースエンティティを追加するため、画面をクリックし、[Select Source]ポップアップで関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを選択します。

    GetUsers Aggregateが作成されます。

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

  6. Icon Badgeウィジェットを選択し、[Properties]タブの[Number]ドロップダウンで[Expression Editor]を選択します。Expressionエディタで以下のExpressionを入力し、[Done]をクリックします。

    GetUsers.Count

    これで、先ほど作成したAggregateのCountプロパティが表示されるようにNumberプロパティが設定されました。これにより、プラットフォームのユーザー数が取得されて表示されます。

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

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

プロパティ

プロパティ 説明
Number(Integer型): 必須 バッジ内に表示される数字。これを、表示される値を含むデータソースに設定します。

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

  • 空白 - アプリを作成するときに選択した色のアイコンバッジが表示されます。これがデフォルトです。
  • Entities.Color.Red - 赤色のアイコンバッジが表示されます。
IsLight(Boolean型): オプション バッジの背景色とテキスト色を指定します。

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

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