5.9 Layout Manager
The Layout Manager is one of the most important components in the Pop workflow system.
Its purpose is: to present workflow output in a visual interface, turning your workflow into a truly usable application (App).
With the Layout Manager, you can:
- Create visual interfaces (Dashboard / Form / Data Display)
- Bind workflow outputs to UI components (text / charts / tables / file download)
- Build interactive input forms
- Package into Web Apps, desktop plugins, or internal tools
- Use it as the visualization layer for API output
It is the key to making “Workflow → Application” a reality.
🎨 1. Core Capabilities of the Layout Manager
The Layout Manager supports building UI pages, including:
- Grid layout system
- Draggable components (Widgets)
- Input forms
- Display components
- Chart rendering
- File preview / download components
- Run / action buttons
The ultimate goal of the layout system is:
Allow non‑developers to use the AI / automation applications you build.
🧱 2. Layout Structure Overview
Layouts consist of the following sections:
Page
├── Header (optional)
├── Form: workflow input
├── Grid: main canvas for draggable components
└── Footer (optional)
Relation between layout and workflow:
Input params → Form input → Workflow execution
Output params → Component binding → UI display
🧩 3. Widget Types Overview
The Layout Manager includes the following components:
| Type | Example | Purpose |
|---|---|---|
| Text | Summary, hints | Display string content |
| Markdown | Documentation | Render Markdown |
| Table | Reports, statistics | Display structured data |
| Charts | Line, bar, pie charts | Visualize data |
| File Download | Exported PDF, Excel | Output file results |
| Image View | OCR results, generated images | Display images |
| Custom HTML | Advanced scenarios | Embed custom content |
| Run Button | Manual trigger | User‑initiated run |
All components support:
- Drag & drop
- Resize
- Style configuration
- Binding workflow outputs
🔗 4. Binding Components to Workflow Output
Workflow output is defined in the Output Node, for example:
{
"summary": "text summary",
"chart_data": [...],
"file_url": "xxx.pdf"
}
You may bind these outputs inside component settings:
Example
Text Component
{{workflow.outputs.summary}}
Chart Component
{{workflow.outputs.chart_data}}
The component will automatically update when the workflow finishes running.
📝 5. Creating Input Forms
Forms are generated from workflow input parameters.
If inputs are defined (in workflow settings):
title: text
date_range: text
file: file
options: json
The Layout Manager will automatically render:
- Text fields
- File upload fields
- Dropdowns
- JSON editors
User input becomes workflow execution parameters.
🧭 6. Layout Editing Features
The layout canvas supports:
✔ Drag widgets onto the grid
✔ Resize components
✔ Edit text / Markdown
✔ Configure backgrounds, borders, card styles
✔ Duplicate / delete components
✔ Undo / redo
✔ Preview Mode
Advanced features:
- Auto‑alignment
- Grid snapping
- Lock components
- Collapse / title toggles
📂 7. Multi‑Page Layouts (Future)
The Layout Manager will support:
- Multi‑page applications
- Subpages, dialogs, modals
- Drag‑and‑drop dashboards
The current version is single‑page but fully compatible with upcoming multi‑page features.
📤 8. Layout and App Publishing
When a workflow is published as an application:
- The layout becomes the final user interface
- Form fields become input parameters
- Output components show execution results
- The app can be embedded into websites, systems, or mobile apps
Publishing is automated—no need for HTML/CSS/JS.
📝 9. Best Practices
1. Place important information at the top
Title, summary, run button.
2. Show charts and tables side‑by‑side
Helps users see analysis results clearly.
3. Use Markdown for documentation
Place explanations in sidebars or at the bottom.
4. Use clean output field names
summary_text
analysis_table
trend_chart
5. Use card‑style layout
Cleaner and more readable.
🎯 10. Summary
The Layout Manager is essential in Pop Workflows. It transforms workflows from logic scripts into fully usable applications.
With it, you can:
- Build UI interfaces
- Bind workflow inputs & outputs
- Customize charts, tables, text
- Publish real usable tools
Mastering layout building elevates your workflow from automation to a no‑code application development framework.