📦 Grouping & Ungrouping
Learn how to organize and manage elements efficiently using AppStruct's grouping system. Groups help you manage multiple elements as a single unit, making complex layouts easier to handle.
Overview
AppStruct's grouping system allows you to:
- Create Groups - Combine multiple elements into a single manageable unit
- Group Management - Edit and modify grouped elements
- Nested Groups - Create hierarchical group structures
- Group Actions - Apply actions and styling to entire groups
- Mobile-Optimized - Touch-friendly grouping on mobile devices
1. Creating Groups
Desktop Grouping
- Multi-Select: Select multiple elements using Shift+Click or Ctrl+Click
- Right-Click Menu: Right-click and select "Group" from context menu
- Keyboard Shortcut: Ctrl+G (Windows) / Cmd+G (Mac)
- Minimum Requirement: At least 2 elements must be selected
Mobile Grouping
- Multi-Select Mode: Enable multi-select mode via FAB button
- Select Elements: Tap multiple elements to add to selection
- Group Action: Use "Group X Elements" button in multi-select panel
- Haptic Feedback: Device vibration confirms grouping action
Auto-Generated Properties
- Group Name: Automatically named "Group" (can be renamed)
- Unique ID: System-generated unique identifier
- Container Styles: Inherits positioning from selected elements
- Background: Transparent background by default
2. Group Behavior
Visual Representation
- Selection Border: Groups show unified selection borders
- Group Indicator: Visual indicators show group boundaries
- Child Visibility: Individual elements visible within group
- Resize Handles: Group-level resize controls
Group Properties
- Positioning: Group acts as container for child elements
- Styling: Can apply background, borders, and effects to entire group
- Responsive: Groups adapt to different screen sizes
- Actions: Can assign interactions to the entire group
3. Working with Groups
Selecting Groups
- Group Selection: Click anywhere on group to select entire group
- Child Selection: Double-click to select individual elements within group
- Hierarchy Navigation: Use element tree to navigate group hierarchy
- Visual Feedback: Different selection indicators for groups vs elements
Editing Groups
- Group Settings: Right-click group for group-specific options
- Child Editing: Double-click to enter group editing mode
- Exit Group: Click outside group or use breadcrumb navigation
- Properties Panel: Dedicated group properties in right panel
4. Group Management
Group Actions
- Ungroup: Ctrl+Shift+G (Windows) / Cmd+Shift+G (Mac)
- Rename: Click group name in properties panel
- Move: Drag entire group to reposition all elements
- Copy: Copy entire group including all child elements
- Delete: Remove group and all child elements
Group Tree Structure
- Component Tree: View group hierarchy in left panel
- Expand/Collapse: Toggle group visibility in tree
- Drag & Drop: Reorganize elements between groups
- Parent Navigation: Navigate to parent groups
5. Nested Groups
Creating Nested Groups
- Sub-Groups: Create groups within existing groups
- Hierarchy Levels: Support for multiple nesting levels
- Visual Indicators: Clear indication of nesting depth
- Navigation: Breadcrumb navigation for deep hierarchies
Nested Group Benefits
- Organization: Better organization of complex layouts
- Selective Actions: Apply actions to specific group levels
- Responsive Design: Different responsive behavior per group level
- Maintenance: Easier maintenance of complex interfaces
6. Group Styling
Available Styles
- Background: Solid colors, gradients, or images
- Borders: Custom border styles and colors
- Corners: Border radius for rounded groups
- Shadows: Drop shadows and effects
- Layout: Flexbox and grid layout options
Responsive Styling
- Device-Specific: Different styles for mobile, tablet, desktop
- Breakpoint Management: Responsive design within groups
- Adaptive Layout: Groups adapt to screen size changes
- Media Queries: CSS media query support
7. Group Actions & Interactions
Workflow Actions
- Group-Level Actions: Apply actions to entire group
- Event Handling: Click, hover, and touch events
- Navigation: Group-based navigation between pages
- Conditional Logic: Show/hide groups based on conditions
Smart Animations
- Group Animations: Animate entire groups
- Child Coordination: Coordinate animations within groups
- Timeline Management: Manage complex animation sequences
- Performance: Optimized group animations
8. Ungrouping Elements
Ungrouping Process
- Select Group: Click to select the group to ungroup
- Ungroup Command: Right-click and select "Ungroup" or use keyboard shortcut
- Element Liberation: Individual elements become independently selectable
- Position Preservation: Elements maintain their relative positions
After Ungrouping
- Individual Selection: Each element can be selected independently
- Style Inheritance: Elements retain their individual styles
- Action Preservation: Element-specific actions remain intact
- Cleanup: Group container is automatically removed
9. Mobile Group Management
Touch Interactions
- Touch Selection: Tap to select groups on mobile
- Long Press: Long press for group context menu
- Pinch to Zoom: Zoom into groups for detailed editing
- Swipe Navigation: Navigate between grouped elements
Mobile-Specific Features
- Group FAB: Floating action button for group operations
- Touch Targets: Larger touch targets for easier selection
- Gesture Support: Swipe gestures for quick group actions
- Performance: Optimized for mobile performance
10. Advanced Group Features
Group Templates
- Save as Template: Save group configurations as reusable templates
- Template Library: Access saved group templates
- Sharing: Share group templates with team members
- Version Control: Track changes to group templates
Collaboration
- Team Groups: Shared groups across team projects
- Permission Management: Control who can modify groups
- Comment System: Add comments to groups for team collaboration
- Change Tracking: Track modifications to groups
Best Practices
- Logical Grouping: Group related elements that function together
- Naming Convention: Use descriptive names for groups
- Avoid Over-Nesting: Keep group hierarchy simple and manageable
- Mobile Testing: Always test group behavior on mobile devices
- Performance: Limit group depth for better performance
- Responsive Design: Consider how groups behave on different screen sizes
Keyboard Shortcuts
Group Operations
- Ctrl+G / Cmd+G: Create group from selected elements
- Ctrl+Shift+G / Cmd+Shift+G: Ungroup selected group
- Tab: Navigate between groups
- Enter: Enter group editing mode
- Escape: Exit group editing mode
Common Use Cases
UI Components
- Card Components: Group related content in cards
- Navigation Menus: Group menu items together
- Form Sections: Group related form fields
- Button Groups: Group related action buttons
Layout Organization
- Header Sections: Group header elements
- Footer Content: Group footer information
- Sidebar Components: Group sidebar elements
- Content Blocks: Group related content sections
Troubleshooting
Common Issues
- Can't Group: Ensure at least 2 elements are selected
- Group Not Selectable: Check if group is locked or hidden
- Styling Issues: Verify group vs element styling conflicts
- Performance: Large groups may affect performance
- Mobile Issues: Test group interactions on actual mobile devices
Need Assistance?
If you encounter any challenges with grouping and ungrouping elements, please refer to the Documentation or contact our support team at [email protected].