App Interface & Layout
The application's interface is not hardcoded — it is dynamically generated by the Layout Manager.
This means:
- You have full freedom to define the structure of an application's UI.
- You can customize how modules are arranged.
- You can create different presentation styles for different use cases.
1. Core Concepts of Layout
A Pop layout is built from three key elements:
1. Widgets
Each area of the layout is composed of widgets, such as:
- Form
- Text Viewer
- Image Viewer
- Chart
- AI Panel
- Console
- File Browser
- Markdown Viewer
- JSON Viewer
Widgets act as functional units that make up the application interface.
2. Containers
Containers organize widgets into structured layouts.
| Container Type | Description |
|---|---|
| Row | Horizontal arrangement of widgets |
| Column | Vertical arrangement of widgets |
| Panel | Independent collapsible section |
| Split | Left-right or top-bottom split view |
| Grid | Multi-cell drag-and-drop layout |
3. Layout Tree
The entire interface is essentially a nested structure composed of containers and widgets.
Example:
- Row
- Form
- Split
- Result Panel
- Console
You can rearrange everything simply by dragging — no code needed.
2. Who Defines the Layout?
Layouts come from the following sources:
① Workflow-Bound Layout (Most Common)
Designed in the Layout Manager within the Workflow Editor.
When publishing an app, the system asks:
Use current workflow layout?
Choosing “Yes” means the app fully inherits that layout.
② App-Specific Layout
You can also create a standalone layout for an app.
Useful when:
- One workflow needs multiple UI presentations
- Workflow logic is repackaged into different products
- You want a completely different UI experience
③ Auto‑Generated Layout (Default)
If no layout is set, Pop automatically generates a basic UI based on:
- Input fields
- Output node types
Default layout:
- Left: Input form
- Right: Result display + Console
Great for quick prototyping.
3. Common Components in Layout
Form Area
Automatically generated from workflow input parameters.
Supports field types:
- Text
- Textarea
- File upload
- Number
- JSON
- Model selector
- Dropdown
- Switch
Run Panel
Used to execute the workflow.
Includes:
- Run button
- Stop button
- Parameter preview
Result Area
Displays workflow output.
Supports:
- Text
- Markdown
- Images
- Charts
- Tables
- JSON
- File download
Console
Displays workflow execution logs:
- Node input/output
- Service responses
- Error stack
- Debug messages
Useful for developers and debugging.
4. Layout Design Best Practices
1. Put form on the left / results on the right
Matches natural reading & operation flow.
2. Use split views for clarity
Keeps the interface clean and easy to understand.
3. Prefer Markdown or component‑based output for results
Charts, tables, and previews make results more intuitive.
4. Keep console collapsed by default
Most users don't need to see logs.
5. Maintain the three core sections:
Input
Run
Output
The universal interaction model for all applications.
5. Importing & Exporting Layout
Layouts can be:
- Exported along with workflow (workflow.json includes layout field)
- Exported from the App Management panel
- Imported into another workflow or app
This makes it easy to reuse UI designs across projects.
6. Summary
The App Layout system is central to the Pop application experience. It enables you to:
- Wrap workflow logic into a polished, user‑friendly interface
- Combine visual components to create complete applications
- Adjust interface layout flexibly for different scenarios
- Continuously improve the UI without touching the workflow logic or code