App Inputs & Parameter Settings

Application inputs determine how users interact with an app.
All input fields come directly from the workflow’s input definitions, meaning:

Workflow inputs = App form fields

This chapter helps you understand:

How input fields are generated
What field types are supported
How to configure parameter properties
Default values & validation rules
How inputs relate to workflow execution

1. Where Do App Inputs Come From?

App inputs originate from three sources:

1. Workflow Inputs — the ONLY data source

Defined inside a workflow:

Field name
Field type
Default value
Required or optional
Placeholder text
Dropdown options

After publishing an app, these fields automatically render into a form.

2. Form Widgets in the Layout Manager

The Layout Manager controls:

Where fields appear
Display style (single-column / two-column)
Field order
Whether fields are collapsible
Whether combined with other components

However — layout does NOT modify field definitions.
The source of truth remains the workflow inputs.

3. Global or Environment Parameters (future expansion)

Examples include:

User profile
API keys stored in system settings
Debug parameters

These are system-level inputs and do not require user entry.

2. Supported Field Types

Pop supports multiple input types and automatically selects the best UI component.

Field Type	Form Component	Common Use Case
`string`	Text input	Name, title, keywords
`text`	Textarea	Descriptions, AI prompts
`number`	Number input	Count, limits, ranges
`boolean`	Switch	Enable/disable feature
`file`	File upload	Images, PDFs, documents
`image`	Image upload/preview	Image tools
`select`	Dropdown	Models, modes, languages
`json`	JSON editor	Advanced configuration
`list`	Dynamic list	Batch data
`date`	Date picker	Time parameters
`model`	AI model selector	GPT / DeepSeek / Local models
`vector`	Variable reference	Advanced workflow logic

Field types are chosen inside the workflow editor; the UI adapts automatically.

3. Field Property Details

Each field supports the following properties:

1. label

User-visible name.

2. name

Internal workflow key — do NOT change casually.

3. default

Auto-filled when the form loads. Very important for:

Better user experience
Preventing empty-parameter errors
Providing template guidance

4. required

If enabled, the user cannot run the app without filling it.

5. placeholder

Helps users understand what to enter.

6. options (dropdown values)

Used for:

Model selection
Language selection
Modes
Data types

7. advanced

Placed under “Advanced Options,” typically for developers.

4. How to Manage Input Fields

You can manage inputs in two places:

① Workflow Editor → Inputs Panel

Here you can:

Add / delete fields
Adjust field types
Set default values
Configure placeholder text
Add validation rules

This is the “source of truth.”

② Layout Manager

Controls how fields appear:

Which area they belong to
One-column or two-column layout
Collapsible or not
Combined with other panels
Sorting and grouping

Layout affects presentation, not definition.

5. How Inputs Affect Workflow Execution

When the user clicks Run:

Form collects all field values
Values are passed to the workflow engine as JSON
Workflow starts from the first node
Any node can reference these input values

Example:

User inputs:

productName = “Smart Watch”
tone = “Professional”

Then in the workflow:

{{ inputs.productName }}
{{ inputs.tone }}

These values become accessible anywhere.

6. Best Practices for Input Design

✔ Set default values

Improves usability dramatically.

✔ Prefer dropdowns instead of free text

Reduces errors, improves clarity.

✔ Put complex or technical fields under “Advanced Options”

Keeps the interface clean for regular users.

✔ Use layout to group related fields

Primary fields at the top, secondary fields collapsed.

✔ Avoid excessive fields

Simplicity improves success rate.

7. Summary

The input & parameter system is the foundation of Pop applications.

It provides:

Flexibility
Extensibility
Control
Readability
Ease of use

By combining input definitions, layout configuration, and sensible defaults, you can quickly create professional-grade visual applications.