MTX Grid - Advanced Data Grid Framework for Salesforce

A powerful, metadata-driven data grid framework for Salesforce Lightning that enables dynamic, configurable data views with advanced features like inline editing, formula fields, conditional rendering, and intelligent related lists.

---

✨ Features

Core Capabilities

• Dynamic Data Loading - Display data from any Salesforce object
• Inline Editing - Edit records directly in the grid with real-time validation
• Mass Update - Update multiple records simultaneously
• Sorting & Filtering - Multi-level sorting and advanced filtering
• Pagination - Efficient data loading with configurable page sizes

Advanced Features

• Formula Fields - Create calculated columns with IF, CASE, CONCAT, and mathematical operations
• Conditional Rendering - Apply dynamic styling based on field values (background color, text color, icons)
• Intelligent Related Lists - Custom related list configurations with criteria-based filtering
• CSV Export - Export grid data with customizable field selection
• Group By & Kanban - Organize data visually with grouping and Kanban views
• Charts Integration - Visualize data with Chart.js integration

Configuration Management

• Visual Manager UI - No-code interface for creating and managing grid configurations
• Metadata-Driven - All configurations stored as Custom Metadata and Custom Objects
• User Preferences - Save column widths, sort orders, and view preferences per user
• Configuration Groups - Organize related grid configurations together

---

🚀 Quick Start

Prerequisites

• Salesforce org with Lightning Experience enabled
• Salesforce CLI (sf) installed
• Git installed

Installation

1. Clone the repository

   git clone https://github.com/Rdevang/Grid-Solution.git
   cd Grid-Solution

2. Authenticate to your Salesforce org

   sf org login web -a myorg

3. Deploy to your org

   sf project deploy start --source-dir force-app -o myorg

4. Assign permissions

   • Ensure users have access to the custom objects and tabs
   • Navigate to AGrid Manager tab to start configuring

---

📘 Usage Guide

Creating Your First Grid Configuration

1. Open AGrid Manager

   • Navigate to the AGrid Manager tab in Salesforce

2. Create New Configuration

   • Click New Configuration button
   • Fill in the details:
     • Title: Display name (e.g., "Account Overview")
     • Grid API Name: Unique identifier (e.g., "Account_Main_Grid")
     • Object: Select the Salesforce object (e.g., Account)
     • Description: Optional description
   • Click Save

3. Configure Columns

   • Click on your new configuration to open it
   • Go to the Columns tab
   • Click Manage Columns button
   • Use the dual-listbox to select fields:
     • Left side: Available fields
     • Right side: Selected fields (displayed in grid)
   • Drag fields to reorder them
   • Click Done

4. Set Column Properties

   • In the Columns table, configure each field:
     • Display Label: Custom column header
     • Editable: Allow inline editing
     • Sortable: Enable column sorting
     • Searchable: Include in global search
     • Required: Mark field as mandatory
     • Text Alignment: Left, Center, or Right
     • Text Wrap: Clip or Wrap long text

5. Configure Grid Settings

   • Click Grid Settings in the sidebar
   • Configure options like:
     • Sort Level (1-3 levels)
     • Columns to Freeze
     • Default Page Size
     • Enable/Disable features

6. Save and Preview

   • Click Save to save all changes
   • Click Preview to test with live data

Adding the Grid to Lightning Pages

Using Lightning App Builder

1. Open the Lightning Page in Edit mode
2. Drag the Custom Data Grid component onto the page
3. Configure the component properties:
   • Grid API Name: Your configuration name (e.g., "Account_Main_Grid")
   • Object API Name: Salesforce object (e.g., "Account")
   • Record ID: (Optional) For record-specific filtering

Using LWC in Code

<c-custom-data-grid
  grid-api-name="Account_Main_Grid"
  object-api-name="Account"
  record-id="{recordId}"
>
</c-custom-data-grid>

Creating Formula Fields

Formula fields let you create calculated columns that don't exist in Salesforce.

1. Open Configuration → Go to Columns tab
2. Click MTX Grid Formula button
3. Configure the formula:
   • Field Label: Display name
   • Field API Name: Unique identifier
   • Formula Expression: The calculation

Supported Functions

Function	Syntax	Example
IF	IF(condition, true_value, false_value)	IF(Amount > 1000, 'High', 'Low')
CASE	CASE(field, val1, result1, val2, result2, default)	CASE(Stage, 'Won', '✅', 'Lost', '❌', '⏳')
CONCAT	CONCAT(value1, value2, ...)	CONCAT(FirstName, ' ', LastName)
TEXT	TEXT(value)	TEXT(Amount)
Math	+, -, *, /	Amount * 1.1

Formula Examples

# Status indicator with emoji
IF(StageName == 'Closed Won', '✅ Won', IF(StageName == 'Closed Lost', '❌ Lost', '🔄 Open'))

# Calculated discount
Amount * (1 - Discount_Percent__c / 100)

# Combined name
CONCAT(Account.Name, ' - ', Name)

# Rating display
CASE(Rating, 'Hot', '🔥🔥🔥', 'Warm', '🔥🔥', 'Cold', '🔥', '❓')

Configuring Conditional Rendering

Apply dynamic styling to rows based on field values.

1. Enable in Grid Settings

   • Go to Grid Settings → Enable Conditional Highlighting

2. Configure Rules

   • Go to Conditional Rendering tab
   • Click New Rule
   • Configure:
     • Rule Name: Descriptive name
     • Field: Which field to evaluate
     • Operator: equals, not equals, contains, greater than, etc.
     • Value: The value to match
     • Apply To: Row or Cell
     • Background Color: Highlight color
     • Text Color: Font color
     • Icon: Optional icon to display
   • Click Save Rules

Example Rules

Rule	Field	Operator	Value	Background	Use Case
High Priority	Priority__c	equals	High	#ffcccc (red)	Highlight urgent items
Won Deals	StageName	equals	Closed Won	#ccffcc (green)	Celebrate wins
Large Amount	Amount	greater than	100000	#fff3cd (yellow)	Flag big opportunities

Setting Up Intelligent Related Lists

Display custom related lists with dynamic criteria.

1. Go to Related Lists Tab

   • Open your configuration
   • Click Intelligent Related Lists tab

2. Create New Related List

   • Click New Related List
   • Configure:
     • Label: Display name
     • Target Object: Related object (e.g., Contact, Opportunity)
     • Icon: Visual identifier
     • Description: Optional

3. Add Criteria (Optional)

   • Click Add Criteria
   • Define filter conditions:
     • Field: Field to filter on
     • Operator: equals, not equals, contains, etc.
     • Value: Static value or {!recordId} for dynamic binding

4. Select Display Fields

   • Use the dual-listbox to choose which fields to show
   • Reorder fields as needed

5. Save

   • Click Save Related List

Using Grid Features

Inline Editing

1. Click on any editable cell
2. Modify the value
3. Press Tab to move to next cell or Enter to confirm
4. Click Save to persist all changes

Mass Update

1. Select multiple rows using checkboxes
2. Click Mass Update button
3. Choose field to update
4. Enter new value
5. Click Apply

Sorting

• Click column header to sort ascending
• Click again to sort descending
• Hold Shift + click for multi-level sorting

Filtering

1. Click the filter icon in the header
2. Select filter field
3. Enter filter value
4. Click Apply

CSV Export

1. Click Export button
2. Choose fields to include
3. Click Download

Quick Reset

• Click Quick Reset to clear all filters, sorting, and return to default view

---

🔧 Configuration Reference

Grid Settings

Setting	Description	Default
Sort Level	Number of sort levels (1-3)	1
Columns to Freeze	Number of fixed left columns	0
Table View Load Size	Records per page	50
Enable Partial Save	Save individual rows	false
Enable Load All	Load all records (no pagination)	false
Enable Quick Reset	Show reset button	false
Conditional Highlighting	Enable row highlighting	false
Show Object Name	Display object name in header	true
Show Object Icon	Display object icon	true

Column Properties

Property	Description	Default
Display Label	Column header text	Field Label
Editable	Allow inline editing	true
Sortable	Enable column sorting	true
Searchable	Include in search	false
Required	Mark as required	false
Exclude from Export	Hide from CSV	false
Text Alignment	Left, Center, Right	Left
Text Wrap	Clip Text, Wrap Text	Clip

---

🏗️ Architecture

force-app/
├── classes/                    # Apex Controllers & Services
│   ├── CustomGridService.cls   # Main grid data service
│   ├── GridConfigService.cls   # Configuration CRUD operations
│   ├── GridFormulaService.cls  # Formula evaluation engine
│   ├── GridRelatedListService.cls  # Related list handling
│   ├── MetadataService.cls     # Metadata operations
│   └── ErrorLogger.cls         # Centralized error logging
├── lwc/                        # Lightning Web Components
│   ├── customDataGrid/         # Main grid component
│   ├── agridManager/           # Configuration manager UI
│   ├── mtxGridFormulaBuilder/  # Formula builder component
│   ├── relatedListDisplay/     # Related list component
│   ├── chartModal/             # Chart visualization
│   └── iconPicker/             # Icon selection utility
└── objects/                    # Custom Objects & Metadata
    ├── MTXGrid_Configuration__c/
    ├── MTXGrid_Field_Configuration__c/
    ├── MTXGrid_Formula_Field__c/
    ├── MTXGrid_Conditional_Rule__c/
    ├── MTXGrid_Related_List__c/
    └── Grid_Config__mdt/       # Custom Metadata Types

---

📖 Documentation

Detailed documentation is available in the /docs folder:

Section	Description
Architecture	Technical architecture & deployment guides
Features	Feature implementation details
Status	Implementation status & usage guides
Connected Intelligence	AI-powered features documentation

---

🧪 Testing

Run Apex tests:

sf apex run test --test-level RunLocalTests -o myorg

Run LWC Jest tests:

npm install
npm test

---

📁 Project Structure

custom-agrid-salesforce/
├── config/                  # Scratch org configuration
├── docs/                    # Documentation
├── force-app/               # Salesforce metadata
│   └── main/default/
│       ├── classes/         # Apex classes
│       ├── lwc/             # Lightning Web Components
│       ├── objects/         # Custom objects & metadata
│       ├── permissionsets/  # Permission sets
│       └── tabs/            # Custom tabs
├── scripts/                 # Utility scripts
├── .gitignore
├── package.json
├── sfdx-project.json
└── README.md

---

🛠️ Development

Local Development Setup

1. Install dependencies:

   npm install

2. Create a scratch org:

   sf org create scratch -f config/project-scratch-def.json -a scratch-dev

3. Push source:

   sf project deploy start --source-dir force-app -o scratch-dev

Code Quality

# Run ESLint
npm run lint

# Run Prettier
npm run format

---

📄 License

This project is proprietary software. All rights reserved.

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

Version: 2.0.0
API Version: 64.0
Maintained by: Development Team