Skip to main content

Dashboard Widget Groups

What it is​

Dashboard Widget Groups allow you to organize and manage widgets on your dashboard by grouping related widgets together. Groups provide visual separation, custom styling, and better layout control for your dashboard widgets.

Who it's for​

Workspace Owner

Access & Scope​

PropertyValue
Moduledashboard-widgets
Personasworkspace-owner
ScopeWorkspace-level
UI LocationDashboard > Widget Settings > Groups

| Status | active |

UI Location​

Dashboard > Widget Settings > Groups

How it works​

Dashboard Widget Groups provide a way to organize widgets into logical sections on your dashboard. Here's how it works:

  1. Group Creation:

    • Create a new group with a custom name
    • Set initial position and size for the group
    • Optionally set background color and separator styles

  2. Group Properties:

    • Name: Custom label for the group
    • Position: X/Y coordinates on the dashboard grid
    • Size: Width and height in grid units (width: 1-12 columns, height: flexible)
    • Background Color: Optional custom background color for the group container
    • Separators: Optional visual separators above and/or below the group

  3. Widget Assignment:

    • Move widgets into groups by dragging them or using the move action
    • Widgets can be moved between groups or removed from groups (standalone)
    • Each widget belongs to at most one group

  4. Group Management:

    • Edit group properties (name, size, position, styling)
    • Reorder groups to change their display order
    • Delete groups (widgets in deleted groups become standalone)

  5. Layout:

    • Groups are rendered as containers on the dashboard
    • Widgets within a group are positioned relative to the group container
    • Groups can be resized and repositioned independently

Settings​

Dashboard Widget Groups support the following configuration options:

  1. Group Name:

    • Required: Yes
    • Max Length: 100 characters
    • Description: Display name for the group

  2. Position:

    • Format: Grid coordinates (x, y)
    • X: Column position (0-based, integer)
    • Y: Row position (0-based, integer)

  3. Size:

    • Width: 1-12 columns (grid units)
    • Height: Minimum 1 unit (flexible based on content)

  4. Background Color:

    • Optional: Yes
    • Format: CSS color value (hex, rgb, named color)
    • Default: Transparent/inherit

  5. Separators:

    • Show Separator Above: Boolean flag to show separator line above group
    • Show Separator Below: Boolean flag to show separator line below group

  6. Order:

    • Integer value representing display order
    • Lower values appear first
    • Used for sorting multiple groups

Permissions​

Access to Dashboard Widget Groups requires:

  • dashboard.manage: Required to create, edit, delete, and reorder groups

Additional Permissions (for widget operations):

  • dashboard.manage: Required to move widgets between groups

Default Access:

  • Workspace Owner: Has full access to all group management features
  • Staff: No access to group management (read-only dashboard view)

Use Cases​

  1. Organize by Category:

    • Group financial widgets together (Revenue, Expenses, Financial Overview)
    • Group session widgets together (Sessions Chart, Sessions by Service, Sessions Status)
    • Group usage widgets together (SMS Usage, AI Usage, Storage Usage)

  2. Visual Separation:

    • Use background colors to visually distinguish different sections
    • Add separators to clearly delineate groups
    • Create themed sections with matching colors

  3. Layout Management:

    • Control widget positioning by grouping related widgets
    • Manage dashboard layout at a group level
    • Easily rearrange entire sections of widgets

  4. Workflow Organization:

    • Group widgets by workflow or process
    • Separate operational widgets from analytical widgets
    • Organize by priority or importance

  5. Team/Department Views:

    • Create groups for different departments or teams
    • Organize widgets by responsibility area
    • Customize layout per user role (if supported in future)

Group Operations​

Creating a Group​

  1. Navigate to Dashboard Widget Settings
  2. Click "Create Group" or "New Group"
  3. Enter group name
  4. Optionally set:
    • Position (x, y coordinates)
    • Size (width, height)
    • Background color
    • Separator options
  5. Save the group

Editing a Group​

  1. Open group settings from the dashboard or widget management
  2. Modify any group properties:
    • Update name
    • Change position or size
    • Adjust background color
    • Toggle separators
    • Change order
  3. Save changes

Moving Widgets to a Group​

  1. Select a widget from the dashboard
  2. Choose "Move to Group" option
  3. Select target group from dropdown (or "None" for standalone)
  4. Widget is moved to the selected group

Reordering Groups​

  1. Open group management settings
  2. Use drag-and-drop or order controls
  3. Set order values for all groups
  4. Save changes - groups are displayed in order

Deleting a Group​

  1. Open group settings
  2. Click "Delete Group"
  3. Confirm deletion
  4. Widgets in the deleted group become standalone widgets

Best Practices​

  1. Meaningful Names: Use descriptive names that clearly indicate the group's purpose

  2. Logical Grouping: Group related widgets together (e.g., all financial widgets, all session widgets)

  3. Consistent Styling: Use consistent background colors for related groups

  4. Appropriate Sizing: Size groups appropriately to fit content without excessive whitespace

  5. Separator Usage: Use separators sparingly to avoid visual clutter

  6. Order Organization: Order groups logically (e.g., overview first, details below)

  7. Regular Review: Periodically review and reorganize groups as dashboard needs evolve

Notes / Limits​

  1. Widget Constraints:

    • Each widget can belong to at most one group
    • Moving a widget to a group removes it from its previous group (if any)
    • Widgets can be moved to "None" to make them standalone

  2. Group Hierarchy:

    • Groups are flat (no nested groups)
    • Groups are independent containers

  3. Positioning:

    • Group position and size are in grid units
    • Widgets within a group are positioned relative to the group
    • Groups can overlap (use with caution)

  4. Performance:

    • Large numbers of groups (20+) may impact dashboard rendering
    • Consider grouping related widgets to reduce visual complexity

  5. Responsiveness:

    • Group sizing uses grid units that adapt to screen size
    • Very wide groups (12 columns) may not work well on mobile devices

  6. Deletion Behavior:

    • Deleting a group does not delete the widgets
    • Widgets become standalone after group deletion
    • Widget positions may need adjustment after deletion

  7. Order Management:

    • Order is an integer value
    • Lower values appear first
    • Ties are resolved by creation order