User Initials Reference
Layout and classes
Advanced use case
Use the User Initials Pattern with tables
-
Drag the Users table into preview.
-
Remove the expression from the Name and drag the UserInitials pattern to it.
-
In the UserInititals, set the name parameter to the value of the name field from the database.
-
Change the pattern values.
-
Publish and test.
Use the User Initials Pattern with IF conditions
-
Create a custom class called "table-image-size".
.table-image-size { height: 100px; width: 100px; }
-
Drag the Users Entity into the preview.
-
Remove the expression from the Name and drag a container into the cell.
-
Drag an IF condition tool into the container and set the condition to
UserTable.List.Current.User.Is_Active
. -
In the True branch, drag the UserInitials pattern and set the name parameter to the value of the name field from the database.
-
To adapt the UserInitials to the size of container, set the ExtendedClass parameter to
full-width full-height
. -
In the False branch, drag an image and set the Style Classes to
border-radius-circle
. -
Publish and test.