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