Pages in Tines are constructed from two fundamental types of elements, each serving a distinct purpose in your user interface.
Input elements
Input elements enable you to gather information from users. Tines provides a range of input types to accommodate different data requirements:
Text fields: Short text, long text, email, and URL inputs
Numeric fields: For quantities, counts, or numerical values
Selection controls: Dropdowns (select), multi-select, checkboxes, and radio groups
Specialized inputs: Date/time pickers and file uploads
When a page is submitted, each input field becomes a property in the resulting event. This allows you to reference and use that information in subsequent actions within your story.
Display elements
Display elements present information to users without collecting input. They're designed to show data that already exists within your story:
Text content: Headings, paragraphs, and highlighted values
Structured data: Tables and lists
Visual content: Images and code blocks
Interactive elements: Buttons
Display elements become particularly powerful when combined with formulas, allowing you to dynamically present data from earlier actions in your workflow.
Organize page elements with containers
A container is a grouping of page elements that can be managed as a single unit. Think of it as a box that holds related elements together.
You can create a page container in two ways:
Drag one element onto another (they'll automatically group).
Duplicate an element (the original and copy will be placed in a container together).
Why use page containers?
Page containers provide several benefits:
Logical grouping: Keep related elements together.
Shared conditions: Apply conditions to all elements at once.
Layout control: Customize how elements are arranged within the container.
Easy duplication: Copy entire groups of elements quickly.
Customize page containers
Page containers have layout and alignment options:
Layout: Arrange elements horizontally or vertically.
Alignment: Align elements to the start, center, or end of the container.
Horizontal layout: Add as many elements as you like, each gets its own column.
You can also name your containers to make them easier to identify. This is especially helpful when:
You come back to edit the page later.
Multiple people are working on the same page.
You're using looping containers (more on this later in this learning path).