Step 1: Single-screen app

Hello, world! Welcome to Boomi Flow.

Let’s start at the very beginning.. a place generally believed to be a very good place to start. Here is a link to a single-screen app. We will be building this app in a minute.

At Boomi Flow, the word we use for an ‘app’ is ‘flow’. We build a flow by logging in to the Boomi Flow drawing tool, connecting an identity service for authentication, dragging and dropping elements to a canvas, configuring the elements, and connecting them with outcomes. We can think of elements as building blocks, which we combine to build an app. Outcomes connect elements in the canvas and show how a flow progresses. The outcomes get converted into clickable buttons in the app.

All flows begin with the Start element.The Start element give us, the builders, a way to know where we are starting on the canvas; and does not get rendered in the app.

The canvas gets automatically saved every time we change something.

There is more. Much, much more! A service element lets us work with third-party service integrations like Salesforce, or Box. We can use a macro element for custom scripts.

A swimlane is used to set permission-based access for different categories of users (Account Manager, VP – Sales, CFO, etc.) for different elements of the flow.

An outcome shows how the flow progresses. For elements that are visible to the user on the front-end (like, say a step, or a page), an outcome gets rendered as a button in the app. The labels are capitalized by default.

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

When we run or publish a flow, the Boomi Flow engine converts the visual representation or the flow diagram, 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 magic!

In subsequent tutorials, we will learn more advanced magic – like how to embed an app in Salesforce, or how to trigger an interactive voice response call from the app. For now, let us build a quick single screen app.

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:

We will need
  1. Boomi Flow username/password  (Get a free Flow login here)
  2. A Flow tenant/subtenant with Identity Service installed

Creating a new flow document

  1. Click LOG IN to log in to the Flow Drawing Tool. We are in the Flows tab. The sidebar menu on the left-hand-side of the drawing tool is minimized by default. Clicking the arrow expands the menu.
  2. Click New Flow.

    This opens the New Flow screen.

Connecting an identity service

  1. Select ManyWho Identity Service from the dropdown menu Which Service should be used for authentication.
  2. Click Continue. This opens the Flow: New Flow screen where we will name our flow.

Configuring the flow

  1. Enter a name for the flow in the Name field. Example: Hello World.
  2. Select Anyone can run this flow in the Access menu. Anyone with the app URL will be able to run the app. Later, we will see how we can configure authentication for the apps we build – so someone with only an approved authentication service like Box or Salesforce can run the app.
  3. Select None from the Social feed for collaboration menu. In subsequent tutorials we will see how we can use a social feed (say, Salesforce Chatter) for collaborating with other users.
  4. Click Start Building! This opens the canvas where we will build our flow.

 Creating the Welcome screen

The canvas opens with the Start element. This is for our benefit; the Start element does not get rendered in the app.

  1. A Step shows the user a screen. Drag a Step element from the sidebar to the canvas.

    This opens a configuration panel.
  2. Copy-paste the text Hello World in the Name field.
  3. In the Content Editor, copy-paste the text I just built a Boomi Flow 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. This outcome does not get rendered in the app. The first screen of the app is therefore actually the second element 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. Type Go in the Name text field.
  4. 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!

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.

    This opens the Run dialog box.
  2. We will not worry about the configuration options available right now. It is good to know that a player lets us customize the user interface of the app. the Click the Run button to run the app.

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:

Once you publish the app, you can share the published URL with others or embed it into another application. Needless to say, the app will run on any mobile device with a browser.


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.