Profile Grid DataList Template

Introduction

Profile Grid is a custom DataList template plugin. Instead of rendering list results as a generic table, it displays each row as a profile card showing an avatar, name, contact details, role/status badges, a flexible grid of additional fields, and row actions (edit, delete, view, etc.). It's ideal for user directories, member lists, employee listings, or any list where a card-based, visual layout communicates better than rows of a table.

Plugin Information

Plugins Available in the Bundle:

• List - Profile Grid DataList Template

This plugin is compatible with Joget DX 8.

Where to Get the Plugin

You can download the plugin JAR file from the official JogetOSS GitHub Repository.

How to Install

1. Download the latest release .jar file from the repository page.
2. In the Joget Console, navigate to the Admin Bar > System Settings > Manage Plugins.
3. Click the Upload Plugins button.
4. Under the Upload Plugin screen, select your downloaded JAR file and click Upload.

How To Use It

1. Open your app in App Composer and go to the list where you want to apply the card layout.
   
2. Open the list's Settings section. Under Template, select List - Profile Grid from the list of available templates.
   
3. Once selected, the DataList builder switches to Card Builder mode with labeled drop zones. Drag your columns into the matching zones:
   

• • Selector: Row checkbox/selector, rendered at the far left of the card header.
  • Image: Avatar; if left empty, initials are auto-generated from the Title field.
  • Title: Primary name/heading, shown as large bold text (typically the person's full name).
  • Email / Text Content: Secondary line under the name (typically email address).
  • User ID / Text Content: Tertiary line under the name (typically username/user ID).
  • Role: Badge (blue), shown top-right of the card.
  • Status: Badge (green), shown top-right of the card, next to Role.
  • Columns (generic): Data grid; add any number of label/value pairs (e.g., Company, Location, Last Login); they auto-wrap responsively.
  • Row Actions: Action buttons, populated from the DataList's configured row actions (Edit, Delete, View, etc.).

Configure List - Profile Grid Properties

Fields to configure:

• Row Actions Type: Controls how row actions (buttons) are displayed on each card.
  • (Default/blank): Actions collapse into a dropdown menu (⋯ icon, top-right style menu).
  • Normal Buttons (normalActions): Actions render as inline buttons in the card footer.
  • Bottom Actions (bottomActions): Actions render as inline buttons anchored to the bottom of the card.
  • Swipe Actions (swipeActions): Same inline footer buttons on desktop; on mobile (<768px), actions are hidden behind a swipe-left gesture panel.
• Separator:  A text field (default: -) used as a separator character/string within the template output (e.g., between combined field values). Set this if your data needs a different delimiter.

Avatar & Initials Logic

If an image column is mapped and contains a value, the avatar shows the image (cropped to a circle, object-fit: cover).

If no image is present, the plugin reads the rendered Title text, splits it into words, and generates initials:

• Two or more words: first letter of first word + first letter of last word (e.g., "Jane Smith" becomes "JS").
• One word: first two letters (e.g., "Admin" becomes "AD").

Expected Outcome

Lists are rendered as avatar, name, contact details, role with a status badge, a flexible grid of additional fields, and row actions as shown in the image below.