Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

UserInitials

円形のバッジにユーザー情報を表示します。

UserInitialsは、円形バッジ内のユーザーのイニシャルや画像によりユーザーを特定するために使用します。

使用方法

画面にパターンを追加し、ユーザーのイニシャルを表示するためにユーザー名をNameプロパティで指定します。

  1. UserInitialsパターンをプレビューにドラッグします。

  2. 入力パラメータをデフォルト値に設定します。

  3. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
Name パターンで使用するユーザー名。 Text False JD
Color 色を設定します。 Color Identifier False Entities.Color.Primary
Shape 形を設定します。 Shape Identifier False Entities.Shape.Rounded
Size サイズを設定します。 Size Identifier False なし
IsLight 背景に最も明るい色のバージョンを使用し、テキストに暗い色のバージョンを使用します。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

高度なユースケース

テーブルでUserInitialsを使用する

  1. Usersテーブルをプレビューにドラッグします。

  2. NameのExpressionを削除し、そこにUserInitialsパターンをドラッグします。

  3. UserInititalsで、Nameパラメータをデータベースの[name]フィールドの値に設定します。

  4. パターンの値を変更します。

  5. パブリッシュしてテストします。

If条件でUserInitialsを使用する

  1. 「table-image-size」という名前のカスタムクラスを作成します。
.table-image-size {
    height: 100px;
    width: 100px;
}
  1. Usersエンティティをプレビューにドラッグします。

  2. NameのExpressionを削除し、コンテナをセルにドラッグします。

  3. If条件ツールをコンテナ内にドラッグし、条件を「UserTable.List.Current.User.Is_Active」に設定します。

  4. Trueブランチで、UserInitialsパターンをドラッグし、Nameパラメータをデータベースの[name]フィールドの値に設定します。

  5. UserInitialsをコンテナのサイズに合わせて調整し、ExtendedClassパラメータを「full-width full-height」に設定します。

  6. Falseブランチで、画像をドラッグし、Style Classesを「border-radius-circle」に設定します。

  7. パブリッシュしてテストします。

  • Was this article helpful?