generate-avatar-color-using-hsl
Reactive icon

Generate Avatar Color Using HSL

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 22 October 2024
 by 
5.0
 (1 rating)
generate-avatar-color-using-hsl

Generate Avatar Color Using HSL

Details
This asset enables the dynamic generation of unique avatar colors in OutSystems tables using the HSL (Hue, Saturation, Lightness) color model. By leveraging HSL values, the asset assigns each avatar a vibrant, visually consistent color, enhancing both design and user experience in applications where user identification and data table readability are essential.
Read more

Detailed Description: 
        Dynamic Avatar Color Generation using HSL in OutSystems

Overview

By storing the generated avatar colors in an OutSystems entity, you ensure each avatar has a unique, consistent color that persists across sessions and data reloads. This method is particularly useful in tables with many entries, allowing for smoother and more efficient UI rendering without repeated color generation.

Steps to Implement Persistent Avatar Colors

1. Create an OutSystems Entity for Storing Avatar Colors

  1. Create a new entity in OutSystems, such as UserColors, with the following attributes:
    • UserID: Identifier or foreign key linking to the user or table entry.
    • AvatarColor: Text attribute to store the generated HSL color string.
  2. This entity will serve as a storage for each user’s unique avatar color.

2. Generate and Save the Avatar Color

  1. When a new user or entry is added, check if an avatar color already exists in the UserColors entity for that user.
  2. If not, generate a new HSL color using the JavaScript widget and save it to the entity.


 JavaScript code:

Save the generated color string to the AvatarColor attribute in the UserColors entity for that user.


Release notes (1.0.0)
License (1.0.0)
Reviews (0)
Team
Other assets in this category