Control the page experience

In the page configuration, you control what happens after submission. The following options are:

Show success message 

• Default behavior

• Good for one-step forms

• Displays a configurable success banner or message

Move to next page 

• Creates multi-step flows

• Shows a loading message during action execution

• Essential for app-like experiences

Redirect to URL 

• Sends users to an external system after submission

• Useful for:

  • Linking to dashboards or external reports

  • Jumping to a different application entirely

  • Jumping to the landing page to restart your story flow

Conditional page elements 

Conditional elements allow your pages to adapt dynamically based on user input or story data, creating more tailored user experiences. Conditions evaluate specified criteria and then show, hide, or disable elements accordingly.

You can base these evaluations on things like:

• Input values from other elements on the same page

• Data from upstream actions or resources, accessed using formulas

Set up conditional page elements 

To apply conditions to an element:

1. Enable conditional visibility: In the element editor, check the "Show / hide conditionally" option.

2. Set the behavior: Choose whether to show, hide, or disable the element.

3. Define when it applies: Specify whether the action applies when all, some, or none of the conditions are met.

4. Add conditions: Click "Add condition" and configure how values should be evaluated.

When creating conditions, you can:

• Compare against values from other page elements.

• Use date or file upload fields as condition triggers.

• Apply regular expressions for pattern matching.

• Specify whether text comparisons should be case-sensitive.

Apply conditions to page containers 

Conditions can be applied to entire containers, affecting all elements within them simultaneously. When a container has conditions applied, a visual indicator appears to show it's conditionally controlled.

Loop page elements 

Looping within pages lets you dynamically render page elements multiple times based on a formula input. This is incredibly useful when you need to display or collect information for multiple items.

Enable page looping 

To configure a looping container:

1. Select the container you want to repeat.

2. Navigate to Advanced settings in the element editor panel.

3. Enable the "Loop" toggle.

4. Enter your loop formula.

Access page loop data in elements 

Within a looping container, you can access loop-specific data using META.page_elements_loop:

• META.page_elements_loop.index: 

  • Provides a number from 0 to the number of loop iterations

  • Useful for numbering items

• META.page_elements_loop.current_value:

  • Outputs the loop iteration value for the current index

  • For simple arrays like ["hello", "world"], this returns "hello" on the first loop iteration and "world" on the second.

  • For arrays of objects, you can access an object's value by referencing the key value in the META reference path. For example, if your loop target array is the following JSON below, then accessing META.page_elements_loop.current_value.name ("name" is the key) will display Tino:

[
  {
    "name": "Tino",
    "email": "tino@tinesuniversity.io" 
  },
  ...
]

User-driven loop application 

You can optionally enable user-driven duplication, which allows users to manually add more elements to a looping container.

When enabled:

• A + button appears at the bottom of the looped elements.

• Users can click it to add more entries.

• An X button appears to remove manually added elements.

• This works whether you have a loop formula or not.

Understand page loop output 

When a page with looping containers is submitted, the looped data is organized into an array in the page's event output. The array name is derived from your page container name, converted to lowercase, and with underscores replacing spaces.

For example, a container named "Alert Review" within a page produces output structured as "alert_review" in the page's event:

{
  "alert_review": [
    {
      "current_value": { "source": "firewall", "severity": "high" },
      "resolution_action": "investigate"
    },
    {
      "current_value": { "source": "ids", "severity": "medium" },
      "resolution_action": "acknowledge"
    }
  ]
}

Each array element includes both the original loop data and the user's input. You can process this array in downstream actions using Event Transform actions.

Page access control 

One of the key considerations when building pages is determining who should be able to access them. Tines provides flexible access control options to match different security and distribution requirements.

Understand page access levels 

By default, pages are restricted to signed-in team members, but you have several options to adjust access based on your needs. Each page can be configured with one of four access levels:

Choose the right page access level 

Consider these factors when selecting an access level for your page:

• Security requirements: How sensitive is the information on the page?

• User base: Who needs to access this page?

• Authentication needs: Do users need to be verified through your corporate identity system?

• Convenience vs. control: More open access is convenient but reduces control

By thoughtfully configuring page access control, you can ensure your workflows are both accessible to the right people and protected from unauthorized access.