Skip to main content

How to Arrange Dashboard Layout

Arrange widgets on your dashboard for optimal visibility and workflow by dragging, resizing, and organizing.

Quick Summary

Enter Edit mode, drag widgets to new positions, resize by dragging edges, and save your layout.

Before You Begin​

Requirements
  • Dashboard must exist with widgets added
  • You need decks:edit permission
  • Changes require saving to persist

The Grid System​

Dashboards use a 12-column grid system:

│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │
├───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┤
│                Full Width (12)                 │
├───────────────────────┬───────────────────────┤
│     Half Width (6)    │     Half Width (6)    │
├───────────┬───────────┼───────────┬───────────┤
│ Quarter(3)│ Quarter(3)│ Quarter(3)│ Quarter(3)│
└───────────┴───────────┴───────────┴───────────┘

Grid Properties​

PropertyDescriptionValues
Width (w)Columns occupied1-12
Height (h)Rows occupied1+
X PositionHorizontal offset0-11
Y PositionVertical offset0+

Moving Widgets​

Step 1: Enter Edit Mode​

  1. Open the dashboard
  2. Click Edit button (pencil icon)
  3. Widgets become draggable

Step 2: Drag to New Position​

  1. Click and hold the widget header
  2. Drag to desired location
  3. Other widgets automatically reflow
  4. Release to drop

Step 3: Save Layout​

  1. Click Save to keep changes
  2. Or Cancel to revert

Resizing Widgets​

Step 1: Enter Edit Mode​

  1. Click Edit on dashboard

Step 2: Resize by Dragging​

  1. Hover over widget edge or corner
  2. Cursor changes to resize indicator
  3. Drag to new size:
    • Right edge — Change width
    • Bottom edge — Change height
    • Corner — Change both

Step 3: Save Changes​

Click Save when done.

Common Sizes​

SizeWidthGood For
Small3 columnsKPI cards, mini-charts
Medium6 columnsStandard charts
Large9 columnsDetailed charts
Full12 columnsMain visualizations

Real-World Examples​

Example 1: NOC Wall Display Layout​

Situation: Operations center has a 4K wall display. Critical alerts need to be visible from across the room.

Solution:

  1. Open the NOC dashboard in Edit mode
  2. Resize critical KPI cards to width 4, height 3 (large)
  3. Position critical items in top row
  4. Place trend charts below, width 12 (full width)
  5. Save layout

Layout:

┌────────────┬────────────┬────────────┐
│  Critical  │  Critical  │  Critical  │
│  Server A  │  Server B  │  Server C  │
│  (Large)   │  (Large)   │  (Large)   │
├────────────┴────────────┴────────────┤
│        24-Hour Temperature Trend     │
│              (Full Width)            │
├────────────────────┬─────────────────┤
│   Alert History    │  Device Status  │
│    (Half Width)    │   (Half Width)  │
└────────────────────┴─────────────────┘

Result: Critical metrics are large and visible from 20+ feet away, with supporting details below.

Example 2: Energy Report Dashboard​

Situation: Sustainability team needs a clean, printable layout for weekly reports.

Solution:

  1. Open energy report dashboard in Edit mode
  2. Place summary KPIs at top (4 columns each, 3 cards)
  3. Main consumption chart: full width below
  4. Building breakdown: 2 half-width charts side by side
  5. Save layout

Layout:

┌──────────┬──────────┬──────────┐
│Total kWh │ Avg/Day  │ vs Last  │
│  Value   │  Value   │ Week %   │
├──────────┴──────────┴──────────┤
│    Total Energy Consumption    │
│         (Line Chart)           │
├────────────────┬───────────────┤
│   Building A   │  Building B   │
│   Breakdown    │   Breakdown   │
└────────────────┴───────────────┘

Result: Professional-looking report layout that exports cleanly to PDF.

Example 3: Air Quality Sensor Grid​

Situation: Facilities manager monitors 12 air quality sensors and needs to see all at once.

Solution:

  1. Open air quality dashboard in Edit mode
  2. Use mini-chart cards, width 3 each
  3. Arrange in 4x3 grid (12 sensors)
  4. Add one full-width summary chart at bottom
  5. Save layout

Layout:

┌─────┬─────┬─────┬─────┐
│ F1  │ F1  │ F2  │ F2  │
│ CO2 │PM2.5│ CO2 │PM2.5│
├─────┼─────┼─────┼─────┤
│ F3  │ F3  │ F4  │ F4  │
│ CO2 │PM2.5│ CO2 │PM2.5│
├─────┼─────┼─────┼─────┤
│ F5  │ F5  │ F6  │ F6  │
│ CO2 │PM2.5│ CO2 │PM2.5│
├─────┴─────┴─────┴─────┤
│  Air Quality Summary   │
└───────────────────────┘

Result: All 12 sensors visible at once, with detailed trends available in the summary chart.

Example 4: Mobile-Friendly Layout​

Situation: Building manager checks dashboards on tablet while walking the facility.

Solution:

  1. Open dashboard in Edit mode
  2. Use full-width widgets only (width 12)
  3. Stack vertically in priority order
  4. Keep heights reasonable for scrolling
  5. Save layout

Layout:

┌─────────────────────────────────┐
│       Critical Alerts (2h)      │
├─────────────────────────────────┤
│     Server Room Temperature     │
├─────────────────────────────────┤
│        HVAC Status Cards        │
├─────────────────────────────────┤
│      Energy Today (Chart)       │
└─────────────────────────────────┘

Result: Dashboard renders well on tablets with easy vertical scrolling.

Layout Best Practices​

Visual Hierarchy​

PositionContent
Top-leftMost critical metrics (seen first)
Top rowKey status indicators
CenterMain data visualizations
BottomSupporting details, history

Keep related data together:

✅ Good:                      ❌ Avoid:
┌────────┬────────┐          ┌────────┬────────┐
│Server A│Server B│          │Server A│ HVAC 1 │
│  Temp  │  Temp  │          │  Temp  │  Temp  │
├────────┼────────┤          ├────────┼────────┤
│Server A│Server B│          │Energy  │Server B│
│Humidity│Humidity│          │ Chart  │  Temp  │
└────────┴────────┘          └────────┴────────┘

Consistent Widget Sizes​

Use consistent sizes for similar data:

Widget TypeSuggested Size
All KPI cardsSame width
Trend chartsSame width
Mini-chartsSame width + height

Responsive Design Tips​

Desktop (1920px+)​

  • Use multi-column layouts
  • 3-4 widgets per row works well
  • Full-width charts for details

Laptop (1366px)​

  • 2-3 widgets per row
  • Avoid very wide widgets
  • Vertical scrolling acceptable

Tablet (768px)​

  • Full-width or half-width only
  • Stack vertically
  • Use compact widget modes

Large Display (4K)​

  • Leverage 4K optimization (v1.44+)
  • Use larger text and icon sizes
  • Maximize information density

Saving and Reverting​

Save Changes​

  • Click Save to persist layout
  • Changes apply immediately
  • Other users see updated layout

Cancel Changes​

  • Click Cancel to revert
  • All unsaved changes are lost
  • Dashboard returns to last saved state

Undo Within Session​

During edit mode:

  • Most recent action can be undone
  • Refresh page to revert all changes

Troubleshooting​

Widgets Won't Move​

IssueCauseSolution
Drag doesn't workNot in edit modeClick Edit first
Widget snaps backGrid collisionMove other widgets
Can't reach positionOther widgets blockingRearrange blocking widgets

Layout Looks Wrong​

IssueCauseSolution
Overlap on mobileWidgets too wideUse narrower widths
Too much scrollingWidgets too tallReduce heights
Wasted spaceWidgets don't fill rowAdjust widths to sum to 12

Need help? Contact Infodeck Support

Was this page helpful?