Custom component: Linking telephone numbers for click to call

Boomi Flow comes with a ton of pre-built components that we can use straight out of the box. For example, combo box, user inputs, or charts. (A complete list of available components can be found in our documentation site, under App design and user experience.) What happens if we want… more?

We get what we want! Creating our own components that can be reused again and again is fairly straightforward. Let’s look at one example.

Clicking a phone number to initiate a call (click to call) from within an app is a very convenient feature to have. We will build a custom component that will make phone numbers clickable in a few minutes. What is more, the user will be prompted to confirm the call before she dials. If the app is run on a computer, it will pull up the default client (like  say, Skype) configured by the user to make calls.

Spoiler alert: No coding experience necessary!

This is what the canvas will look like when we are done:

We will need:

  1. Boomi Flow username/password. (Get a free fully-loaded Boomi Flow account here.)

Our plan of action:

  • Create a player with a bit of custom component code (included in the procedures)
  • Create a type with Name and Telephone number as properties
  • Create a flow with a page layout
  • Add a table that displays names and numbers
  • Create a few values (of the type we created earlier) with sample data
  • Edit the table metadata component type property to the component
  • Publish the flow with the player we created
  • Marvel at wow, how easy all this is

This is a sneak peek of a screen of the app:

Let’s get building!

    1. Create a new player called PhoneNumberPlayer based on the Flow default player. We will add a few lines of custom code to this player.
    2. Copy this code:
    3. Paste the lines above var tenantId = queryParameters[‘tenant-id’]; in the player code.
    4. Click Save to save the player with the updated code.
    5. Next up.. We need a new type. Let’s create a new type called Phone list example.

    6. The Phone List Example type will need a couple of properties. Let’s give it a Name and a Phone property, both strings, and save the type.
    7. We will need a flow of course. Create a new flow called Custom component with the Flow Identity service. Access of the flow should be set to Anyone can run this flow. The social feed for collaboration option will be None.
    8. The first thing we will do in the flow is create a page layout called Sample page.
    9. A table sounds like a good idea…

      Let’s call the table Listing.
    10. The data source for the contents of the table will be the type we created earlier – Phone list example. We will be getting the data from a list value.
    11. We will save the selection made by the user to a new value called Phone list values, which is a list of the Phone list example type.
    12. We are going to add three names and phone numbers as sample data. Clicking the +icon under Default Object Data lets us do this. We can use any name/number combination we like. For example: Happy, 1234567890; Sleepy, 1234567891; and Sneezy, 1234567892.

      Blinding flash of the obvious. But yes – we will save the value, once we have added the default data.
    13. Unselect the Save the whole selection option. This is what the page component configuration panel looks like now:
    14. Now that we have our sample data all saved and available, we will need a way to display the data. Let’s add columns! We will two columns. The first will be for Name…

      … And we will do the same thing for the Phone number column.
    15. Let’s go ahead and save the page component.
    16. Click the Save icon on the right-hand-side navigation to save the page.
    17. We will now edit the page metadata.
    18. Let’s scroll down the lines of code till we see the Phone number label. (Ln 32 in the following image.) We will change the componentType property of this element. The component type code is located just after the boundTypeElementPropertyTypeId, and three lines above the component label.
    19. Copy-paste phone-link inside the quotes of componentType. This is what the entire line of code will be: “componentType”: “phone-link”,

    20. Let’s save the component.
    21. Let’s save the page layout, and go back to the canvas.
    22. We will need to refresh the available pages to see the new page layout.
    23. Select the Sample page.
    24. Save the page.
    25. Create an outcome from Start to Sample page called Go.

That was fast!

And… we are done building.

This is what the canvas looks like now:

Let’s publish the flow now.

We will select the PhoneNumberPlayer we created as our player when we are running the flow.


Appchievement!

When we run the app, this is what we see:

It’s magic. The phone numbers are automatically converted into hyperlinks. What happens we click a number? We can make a call of course!


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.

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.