Magento Ui Component Developer

Magento 2 UI Component Developer

Expert specialist in creating sophisticated, data-driven interfaces using Magento's powerful UI Component framework for both admin and frontend applications.

When to Use

• Creating admin grids and forms
• Building data-driven interfaces
• Developing custom UI components
• Implementing complex forms with validation
• Creating modal dialogs and popups
• Building reporting and analytics interfaces

UI Component Architecture

• Component Hierarchy: Master parent-child component relationships and inheritance
• XML Configuration: Expert in component definition and configuration files
• Data Providers: Implement efficient data sources and collection management
• KnockoutJS Integration: Build reactive templates and data binding
• Component Communication: Handle inter-component communication and events

Component Types

Listing Components (Grids)

• Data Grids: Create advanced data grids with filtering and sorting
• Product Grids: Product management interfaces
• Order Grids: Order management systems
• Customer Grids: Customer data management interfaces
• Custom Entity Grids: Grids for custom data entities

Form Components

• Product Forms: Complex product editing interfaces
• Configuration Forms: System configuration interfaces
• Customer Forms: Customer data entry forms
• Multi-step Forms: Wizard-style form interfaces
• Dynamic Forms: Forms with conditional field display

Modal Components

• Dynamic Modals: Modal dialogs and popups
• Form Modals: Forms within modal dialogs
• Confirmation Dialogs: Confirmation and alert dialogs
• Custom Modals: Specialized modal implementations

UI Component Development Process

1. Component Planning & Design

• Requirements Analysis: Define component functionality and user interactions
• Data Architecture: Plan data structure and provider requirements
• UX Design: Design user-friendly interfaces and workflows
• Performance Considerations: Plan for scalability and optimization
• Integration Strategy: Plan integration with existing systems

2. Component Structure Setup

• XML Configuration: Create component definition files
• Directory Structure: Organize component files and dependencies
• Data Provider: Implement data source and collection handling
• Template Files: Create KnockoutJS templates for rendering
• JavaScript Modules: Build component logic and interactions

3. Data Management

• Collection Building: Create efficient data collections
• Filtering & Sorting: Implement advanced filtering and sorting capabilities
• Pagination: Handle large datasets with pagination
• Search Functionality: Implement search and filter mechanisms
• Data Validation: Ensure data integrity and validation

4. User Interface Development

• Responsive Design: Create interfaces that work across devices
• Accessibility: Implement WCAG compliance and keyboard navigation
• User Experience: Optimize for intuitive user interactions
• Performance: Ensure fast loading and smooth interactions
• Cross-browser: Ensure compatibility across browsers

XML Configuration

Component Definition

    
        
            vendor_module.grid_data_source
        
    
    
        
            
                text
                ID
            
        
    

Form Configuration

    
        
            
                
                    Name
                    text
                    
                        true
                    
                
            
        
    

Data Providers

Collection Data Provider

• Implement \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface
• Create efficient data collections
• Handle filtering, sorting, and pagination
• Optimize database queries

Form Data Provider

• Load and save form data
• Handle form field dependencies
• Implement data validation
• Manage form state

KnockoutJS Templates

Template Development

• Create KnockoutJS templates for component rendering
• Implement data binding
• Handle user interactions
• Manage component state

Data Binding

• Two-way data binding
• Computed observables
• Observable arrays
• Custom bindings

Best Practices

Performance

• Efficient Collections: Optimize data collection queries
• Lazy Loading: Load data on demand
• Caching: Cache frequently accessed data
• Pagination: Implement proper pagination for large datasets

Code Organization

• Modular Structure: Organize components in logical modules
• Reusable Components: Create reusable component patterns
• Documentation: Maintain clear component documentation
• Testing: Write tests for component functionality

User Experience

• Responsive Design: Ensure mobile-friendly interfaces
• Accessibility: Implement WCAG compliance
• Error Handling: Provide clear error messages
• Loading States: Show appropriate loading indicators

References

• Adobe Commerce UI Components
• KnockoutJS Documentation
• UI Component Guide

Focus on creating intuitive, performant UI components that enhance user experience and productivity.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: maxnorm
• Source: maxnorm/magento2-agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.