Skip to main content

Patterns

 

OutSystems

UserInitials

Display user information in a circular badge.

Use the User Initials to identify the users by their initials or an image in a circular badge.

How to use

Add the pattern to your screen and provide the username in the Name property to display the user initials.

  1. Drag the UserInitials pattern into the preview.

  2. Set the Input Parameters to extend the default values.

  3. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
Name The username to be used in the pattern. Text False JD
Color Set the color. Color Identifier False Entities.Color.Primary
Shape Set the shape. Shape Identifier False Entities.Shape.Rounded
Size Set the size. Size Identifier False none
IsLight Use the lightest color version for the background and the darker color version for the text. Boolean False False
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

Advanced Use Case

Use UserInitials on tables

  1. Drag the Users table into preview.

  2. Remove the expression from the Name and drag the UserInitials pattern to it.

  3. In the UserInititals, set the name parameter to the value of the name field from the database.

  4. Change the pattern values.

  5. Publish and test.

Use UserInitials on IF conditions

  1. Create a custom class called "table-image-size".
.table-image-size {
    height: 100px;
    width: 100px;
}
  1. Drag the Users Entity into the preview.

  2. Remove the expression from the Name and drag a container into the cell.

  3. Drag an IF condition tool into the container and set the condition to UserTable.List.Current.User.Is_Active.

  4. In the True branch, drag the UserInitials pattern and set the name parameter to the value of the name field from the database.

  5. To adapt the UserInitials to the size of container, set the ExtendedClass parameter to full-width full-height.

  6. In the False branch, drag an image and set the Style Classes to border-radius-circle.

  7. Publish and test.

  • Was this article helpful?