The Flex Grid element allows you to organize content within a flexible grid structure. In this scenario, the user's skill tags are displayed in a horizontal/vertical flexible layout.
Areas of Use
Displaying skills/tags in user profiles,
Tag lists in blog posts,
Product features or category tags,
Dynamic badge presentations, etc.
The Flex Grid element is supported in web and mobile applications.
User Skills Scenario
In a profile application, the user's skills are displayed as colored tags within the Flex Grid.
The profile card contains the user's name and description.
In the lower section, the skills acquired during training are listed as colored badges.
Flex Grid arranges the tags side by side and breaks them into rows when necessary.
Connecting the Data Source
Go to the Datasources module.
Click the + icon next to the Tables heading and name the table UserSkills.
Create the following table.
Then click SQL Actions and name the action UserSkills. You can also create it with C#.
Enter the following SQL command.
SELECT NEWID() AS Id, ‘John Doe’ AS UserName,‘Here are the skills I have obtained during my education’ AS Description,‘Lorem’ AS Skill, ‘#FF6B6B’ AS ColorHexUNION ALLSELECT NEWID(), ‘John Doe’, ‘Here are the skills I have obtained during my education’, ‘Ipsum’, ‘#FFD93D’UNION ALLSELECT NEWID(), ‘John Doe’, ‘Here are the skills I have obtained during my education’, ‘Dolor’, ‘#6BCB77’UNION ALLSELECT NEWID(), ‘John Doe’, ‘Here are the skills I have obtained during my education’, ‘Sit’, ‘#4D96FF’;
UI Design Module Operations
Click the Add Action button on the right side of the application screen.
Then select Custom > UserSkills.
Using Properties in the Scenario Context
No Data Found Message
Description: Message displayed when no skills are found in the data source.
Usage: “No skills have been added yet.”
Data Source
Description: Source of the skills list to be displayed in the Flex Grid.
Usage: UserSkills table.
Show No Data Found Image
Description: Displays a fallback image when there is no data.
Usage: An empty profile icon can be added.
When the Scenario Step is Complete
The user name and description are displayed at the top.
Skill tags such as Lorem, Ipsum, Dolor, Sit... are listed in the Flex Grid in a colored badge format.
On mobile, tags are arranged with line breaks; on desktop, more tags fit on the same line.
Limitations
Tags may overflow on very long skill names.
Readability may decrease on mobile screens when there are many skills.
Accessibility decreases if color contrast is not set correctly.
Tips and Best Practices
Use dynamic colors in skill tags to provide visual variety.
Support long tags with abbreviations or tooltips.
Design the username and description to be fixed, and the tags to be flexible.
A “No Data Found Message” and a backup image must be added.
Test the auto-wrap feature of tags for mobile compatibility.
