RDraw-layout
Layout Component Documentation
Overview
The layout component is a flexible, responsive Lightning Web Component that provides a grid-based layout system for Salesforce applications. It supports multiple content areas including context panels, sidebars, main content, and action information panes with configurable sizing and responsive behavior.
Features
Responsive Grid System: Uses Salesforce Lightning Design System (SLDS) grid for consistent responsive behavior
Multiple Content Areas: Supports context panels, sidebars, main content, and action information panes
Dynamic Sizing: Automatically calculates content area sizes based on visible panels
Context Details: Expandable context details with navigation controls
Flexible Configuration: Customizable panel sizes and display options
Smooth Animations: CSS transitions and animations for panel show/hide operations
Component Structure
┌─────────────────────────────────────────────────────────────┐
│ Advanced Body │
├──────────────┬─────────────────────────┬──────────────────┤
│ Context │ Main Content │ Sidebar │
│ Panel │ ┌─────────────────────┐ │ Panel │
│ │ │ Action Info Pane │ │ │
│ │ └─────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Render Wrapper │ │ │
│ │ │ (Main Content) │ │ │
│ │ └─────────────────────┘ │ │
└──────────────┴─────────────────────────┴──────────────────┘API Reference
Public Properties
sidebarContent
Boolean
false
Controls sidebar content display
contextDetailHeaderText
String
''
Header text for context details panel
displaySidebar
Boolean
false
Shows/hides the sidebar panel
displayActionInformationPane
Boolean
false
Shows/hides the action information pane
size
String
'Large'
Sets the overall size of the layout
displayContext
Boolean
false
Shows/hides the context panel
displayContextDetails
Boolean
false
Shows/hides the context details view
mainContentSize
Number
12
Grid size for main content (1-12)
contextSize
Number
3
Grid size for context panel (1-12)
sidebarSize
Number
4
Grid size for sidebar panel (1-12)
Size Options
The size property accepts the following values:
'Small'- 25vh height'SmallPlus'- 35vh height'Medium'- 50vh height'MediumPlus'- 60vh height'Large'- 70vh height (default)'LargePlus'- 85vh height'Jumbo'- 100vh height'Stretch'- 100% height
Slots
contextContent
Content for the context panel
contextDetailContent
Content for the context details view
actionInformationPane
Content for the action information area
mainContent
Primary content area
sidebarContent
Content for the sidebar panel
Events
contextdetailsclose
Fired when context details panel is closed
None
Public Methods
resetContentSize()
Recalculates and updates content area sizes based on visible panels
handleCloseContextDetails()
Closes the context details panel and fires the close event
Usage Examples
Basic Layout with Main Content
<c-layout>
<div slot="mainContent">
<h1>Main Content Area</h1>
<p>Your primary content goes here.</p>
</div>
</c-layout>Layout with Sidebar
<c-layout display-sidebar="true" sidebar-size="3">
<div slot="mainContent">
<h1>Main Content with Sidebar</h1>
</div>
<div slot="sidebarContent">
<h2>Sidebar</h2>
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
</ul>
</div>
</c-layout>Full Layout with All Panels
<c-layout
display-sidebar="true"
display-context="true"
display-action-information-pane="true"
size="Large"
context-size="3"
sidebar-size="4">
<div slot="contextContent">
<h2>Context Panel</h2>
<p>Contextual information and controls</p>
<lightning-button label="Show Details" onclick={showContextDetails}></lightning-button>
</div>
<div slot="actionInformationPane">
<lightning-card title="Action Information">
<p>Important action-related information</p>
</lightning-card>
</div>
<div slot="mainContent">
<lightning-card title="Main Application">
<p>Primary application content</p>
</lightning-card>
</div>
<div slot="sidebarContent">
<lightning-card title="Tools">
<lightning-button-group>
<lightning-button label="Tool 1"></lightning-button>
<lightning-button label="Tool 2"></lightning-button>
</lightning-button-group>
</lightning-card>
</div>
</c-layout>Dynamic Context Details
<c-layout
display-context="true"
display-context-details={showDetails}
context-detail-header-text="Detailed View"
oncontextdetailsclose={handleDetailsClose}>
<div slot="contextContent">
<h2>Context Menu</h2>
<lightning-button label="View Details" onclick={showDetails}></lightning-button>
</div>
<div slot="contextDetailContent">
<lightning-card title="Detailed Information">
<p>Detailed context information goes here</p>
<lightning-button label="Edit" variant="brand"></lightning-button>
</lightning-card>
</div>
<div slot="mainContent">
<h1>Main Content</h1>
</div>
</c-layout>JavaScript Controller Examples
Basic Controller Setup
import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
@track showSidebar = false;
@track showContext = false;
@track showContextDetails = false;
@track layoutSize = 'Large';
handleToggleSidebar() {
this.showSidebar = !this.showSidebar;
}
handleShowContextDetails() {
this.showContextDetails = true;
}
handleDetailsClose() {
this.showContextDetails = false;
}
handleSizeChange(event) {
this.layoutSize = event.target.value;
}
}Advanced Controller with Dynamic Sizing
import { LightningElement, track, api } from 'lwc';
export default class AdvancedLayoutExample extends LightningElement {
@track layoutConfig = {
showSidebar: false,
showContext: false,
showActionPane: false,
size: 'Large',
contextSize: 3,
sidebarSize: 4
};
@api
togglePanel(panelName) {
switch(panelName) {
case 'sidebar':
this.layoutConfig.showSidebar = !this.layoutConfig.showSidebar;
break;
case 'context':
this.layoutConfig.showContext = !this.layoutConfig.showContext;
break;
case 'actionPane':
this.layoutConfig.showActionPane = !this.layoutConfig.showActionPane;
break;
}
// Trigger reactivity
this.layoutConfig = { ...this.layoutConfig };
}
handlePanelResize(panelName, newSize) {
if (panelName === 'context') {
this.layoutConfig.contextSize = newSize;
} else if (panelName === 'sidebar') {
this.layoutConfig.sidebarSize = newSize;
}
this.layoutConfig = { ...this.layoutConfig };
}
get contextSize() {
return this.layoutConfig.contextSize;
}
get sidebarSize() {
return this.layoutConfig.sidebarSize;
}
}Responsive Behavior
The layout component automatically adjusts content areas based on:
Available Panels: Main content size decreases as panels are shown
Panel Sizes: Custom sizes for context and sidebar panels
Screen Size: Uses SLDS responsive grid classes
Content Flow: Flexbox layout ensures proper content distribution
Size Calculations
Base Size: 12 grid columns
With Context: Main content = 12 - contextSize
With Sidebar: Main content = 12 - sidebarSize
With Both: Main content = 12 - contextSize - sidebarSize
Best Practices
Size Configuration: Choose appropriate sizes based on content needs
Responsive Design: Test with different screen sizes and panel combinations
Content Organization: Use slots appropriately for different content types
Performance: Avoid frequent size changes that trigger recalculations
Accessibility: Ensure proper focus management when panels open/close
Common Use Cases
Dashboard Layout: Main dashboard with sidebar navigation and context filters
Detail Pages: Record details with related information panels
Workflow Applications: Multi-step processes with contextual guidance
Data Visualization: Charts with filtering options and detail panels
Form Layouts: Complex forms with help text and validation information
Last updated