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