Icon Badge
この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。
Icon Badge UIパターンを使用すると、数値情報を通知として表示することができます。たとえば、未読メール、未開封メッセージ、新しいタスクがあるときにそれらの数をユーザーに通知する場合に、Icon Badge UIパターンがよく使用されます。
Icon Badge UIパターンの使用方法
通常、Icon Badge UIパターンは動的な情報を表示します。多くの場合、このパターンを使用する前に、画面に表示する情報を含むデータを取得または更新する必要があります。これを行うには、アクションを使用します。
以下の例は、プラットフォームの登録ユーザー数を表示する方法を示しています。
-
Service Studioのツールボックスで
Icon Badgeを検索します。Icon Badgeウィジェットが表示されます。
-
ツールボックスから、Icon Badgeウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
要素ツリーで、画面を右クリックしてドロップダウンから［Add Preparation］を選択し、Preparationアクションを作成します。
このPreparationアクションは、画面が表示される前にデータを取得するロジックを実行します。
-
［Data］タブを選択し、要素ツリーでUserエンティティを見つけて、Preparationアクションにドラッグします。
これにより、プラットフォームのすべてのユーザーを取得するAggregateが作成されます。
-
画面をもう一度開くため、［Interface］タブを選択し、画面をダブルクリックします。
-
Icon Badgeウィジェットを選択し、［Properties］タブの［Number］ドロップダウンで［Expression Editor］を選択します。
-
Expressionエディタで以下のExpressionを入力し、［Done］をクリックします。
LongIntegerToInteger(GetUsers.Count)注記: Expressionエディタの［Scope］ツリーで［Count］出力パラメータを見つけてダブルクリックし、Expressionを追加することもできます。ただし、想定されるBadgeのデータ型（Integer型）がCountのデータ型（Long Integer型）と異なるため、
LongIntegerToIntegerをGet.Users.CountExpressionに追加して正しいExpressionにする必要があります。
これで、Preparationアクションに追加したAggregateのCountプロパティが表示されるようにNumberプロパティが設定されました。これにより、プラットフォームのユーザー数が取得されてアイコンバッジに表示されます。
-
［Properties］タブでオプションのプロパティを設定し、色などのIcon Badgeのルックアンドフィールをカスタマイズすることもできます。以下の例では、青色のアイコンバッジが表示されます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| Number（Integer型）: オプション | Icon Badge内に表示される数字。これを、アイコンバッジに表示される値を含むデータソースに設定します。一般的なユースケースとして、変数に含まれる値の表示やAggregate（たとえば、現在のユーザーの「Messages」テーブルをクエリして新規メッセージの数を返すなど）の結果の表示などがあります。 例
|
| Color（Color Identifier型）: オプション | バッジの色を設定します。事前定義された利用可能なアイコンバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。 例
|
| IsLight（Boolean型）: オプション | アイコンバッジの背景色を指定します。 例
|
| ExtendedClass（Text型）: オプション | Icon Badge UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|