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.Count
Expressionに追加して正しい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を使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|