Skip to main content
Feedback

Building a simple web application

Getting started with using Flow to build your first flow web application.

The flow canvas

In this example, you will build a simple 2 page web application to collect user input on one page, and display these details on a subsequent page.

The example is tutorial is designed for flow beginners, and aims to introduce some of the main basic concepts involved in creating a simple flow web application, such as flows, pages, values, the flow canvas, steps, outcomes, and running and publishing a flow.

Step 1: Sign in to your tenant

Once you have created a Flow account, you can sign in and select a tenant in which to create the flow.

  1. Sign in to your Flow account.
  2. Select the tenant in which to create the flow from the Account menu.
  3. The Flows page opens. Any existing flows in the tenant are shown.
note

A tenant is where all your flows, values, connector integrations, and content is stored. You can have multiple tenants.

Step 2: Create a new flow

First, you need to create a new flow.

  1. Click New Flow.
  2. On the Create New Flow form, name the new flow, for example "User Feedback".
  3. Click Save.
  4. The new flow is created, and the flow canvas opened in a new tab.
note

The flow canvas is the visual drag-and-drop interface you use to build your flows.

Step 3: Create the user feedback page

On the flow canvas, add a page step to create the first page where a user can enter their feedback.

  1. Drag a Page step from the left-hand menu onto the canvas.
  2. On the New page form, name the page, for example "User Feedback".
  3. Click New Layout to create a new layout for the page.

Step 4: Design the page

Use the page builder to design and layout components to the page.

  1. Drag an input component onto the page to add a single line text box for a user to input their name.

    • Name: Enter a name for the component, for example "*Name" as this field will allow a user to enter their name.
    • Label: Enter a label for the component, for example "Name".

  2. In this example, you will store the user input inside a value. Values are used to store data in a flow.

    1. Click Select or create a new value.
    2. Click Create a new value.
    3. Name the value, for example "Name". Make sure the value type is set as a string.
    4. Click Save.

  3. Click Save to save the page.

  4. Next, drag another input component below the "Name" component, and repeat the process above to create an "Email" component (including creating a new value to store the user input). This is to add a single line text box for a user to input their email.

    • Name: Enter a name for the component, for example "Email" as this field will allow a user to enter their email.
    • Label: Enter a label for the component, for example "Email".
    • Value Name: Email
    • Value Type: String

  5. Click Save to save the page.

  6. Finally, drag a textarea component below the "Email" component, and repeat the process above to create a "Feedback" component (including creating a new value to store the user input). This is to add a multi-line text box for a user to input their feedback.

    • Name: Enter a name for the component, for example "Feedback" as this field will allow a user to enter their feedback.
    • Label: Enter a label for the component, for example "Feedback".
    • Value Name: Feedback
    • Value Type: String

  7. Click Save to save the page.

  8. Click on the User Feedback page tab to open the new page step again.

  9. Click Save to save the page.

Step 5: Create the feedback details page

Now that you have created the first page to allow a user to input their feedback, you can create the next page to show their feedback.

This time, you will add a presentation step instead of a page step. As a general rule in flow, if a page in your web application requires user input you should use a page step, but if you just need to render a simple page (as in this case) you can use a presentation step.

  1. Drag a presentation step onto the canvas.

  2. On the New Presentation form, name for the presentation step, for example "User Input".

  3. In the The content to be displayed to users field, you can choose what content to show on the page. In this example, you will display the values entered by the user on the first page.

    For example:

    Name: {![Name]}
    Email: {![Email]}
    Feedback: {![Feedback]}

    You can insert a value by clicking on the Insert value button in the content editor. This will insert the value reference, for example {![Name]}.

  4. Click Save.

Step 6: Join the pages using outcomes

The canvas now contains the 2 pages of your web application, which you will join together using outcomes.

  1. Hover over the start step until the cursor changes to a hand, then click, drag and drop onto the "User Feedback" step.
  2. Name the outcome, for example "Go".
  3. Repeat this process, this time linking the "User Feedback" page to the "User Input" presentation step.
  4. The flow should now show the steps joined together on the flow canvas.
note

Outcomes allow a flow user to move from one step to another, or from a step into another flow. When the flow is run in a browser, outcomes are converted to clickable buttons. This is how a flow user can move between steps (pages) in the flow.

Step 7: Run the flow

You can now run the flow in a browser to check that it works correctly.

  1. Click the Run icon on the right-hand menu.
  2. On the Run dialog, click Run to run the flow.
  3. The flow is built, and runs as a web application in your browser.
note

Running a flow allows you to generate and view a flow, but without making it the default version of a flow. This is different to publishing a flow, as the run URL changes each time you run a flow.

Step 8: Publish the flow

Once you have tested it, you can publish the flow to make it available to your users.

  1. Click the Publish icon on the right-hand menu.
  2. On the Publish Flow dialog, click Run to publish the flow.
  3. The flow is built and published, and runs as a web application in your browser.
note

Publishing a flow creates a snapshot of the flow and all the steps contained within it, and sets this as the default version of the flow. You can then always access the flow web application using the published flow URL.

Next steps

tip

You can install this example "User Feedback" flow from the Flow Library.

On this Page