Step 1: Single-screen app

At Boomi Flow, the word we use for an ‘app’ is ‘flow’. We build a flow by logging into the Boomi Flow Drawing Tool, connecting an Identity Service for authentication, dragging and dropping Elements into a Canvas, configuring the Elements, and connecting them with Outcomes.

The elements represent screens that are shown to the user (from a simple screen to a page with complex forms), or actions (like Database Save). The outcomes show how the flow progresses. We can also use swimlanes to set permission-based access for different categories of users (Account Manager, VP – Sales, CFO, etc.) for different elements of the flow. The canvas gets automatically saved every time we change something.

When we run or publish a flow, the Boomi Flow Engine converts the visual representation into a fully-functioning app; which the flow builder (that’s you!) can deploy right away for 1, 10, or 10,000 users. It’s advanced magic!

Here is a link to a single-screen app.

Flows can be exported/imported as a JSON (JSON or JavaScript Object Notation is a lightweight data-interchange format). You can download a JSON of the flow, import it your tenant, open the flow, and customize it to meet your requirements.

Let’s get building!

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.

This is what our canvas will look like, once we are done:

What we need

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to get one.)

Creating a new flow document
  1. Click LOG IN to login to the Drawing Tool.
  2. Click New Flow.

Connecting an Identity Service
      1. From the dropdown menu Which Service should be used for authentication? select ManyWho Identity Service and click Continue.

This opens the Flow: New Flow screen where we will name our flow.


Naming the flow
      1. Enter a name for the flow in the Name field. Example: HelloWorld.
      2. Select Anyone can run this flow in the Access menu.
      3. Select None from the Social feed for collaboration menu.
      4. Click Start Building!

This opens the canvas where we will build our flow.


 Creating the ‘Welcome’ screen
  1. Drag a Step element from the sidebar, to the Boomi Flow Canvas. A Step element shows the user a screen.
  2. The Configuration Panel on the right, lets us configure the screen. In the Configuration Panel, copy-paste the text Hello World in the Name text field.
  3. In the Content Editor, copy-paste the text I just built a ManyWho app! 
  4. Click Save Step.
    This is what the canvas looks like now:

 Creating an outcome

A flow begins with the Start element, which is fixed on the canvas. The first outcome in the flow is the outcome of the Start element, which connects an arrow from Start to the first element the builder places on the canvas.

      1. Hover your mouse on Start. The mouse pointer changes from a crossbar to a hand.
      2. Drag an arrow from Start to Welcome. This opens a Configuration Panel on the right-hand side.
      3. In the Configuration Panel, type Go in the Name text field, and click Save Outcome.

This creates an arrow from Start to Welcome, with the legend Go on it.


That was fast!

You have just built your first flow. Congratulations!
screen-shot-2016-12-01-at-9-38-03-pm-minishadow

Let’s run the flow now, and see how easily it converts into an app.


Running the flow
  1. Click Run on the right-hand-side navigation.
    screen-shot-2016-12-01-at-9-40-39-pm-minishadow
  2. Click the Run button.
    screen-shot-2016-12-01-at-9-42-15-pm-minishadow

Appchievement!

It took us less than two minutes to build a single-screen app with a placeholder text.

This is what the app looks like on a browser:

On your mobile, this is what the screen looks like:


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, Drawing Tool, technical documentation, blogs, and marketing communications.