Business users are key participants in most successful automation solutions. You might think that, by automating a business process, your business users no longer play a pivotal role in your business processes, but that’s rarely the case. For example, your customer service representative might need to kick off your automation when they interact with a client. Or a subject matter expert may have to step in to manually handle an error situation that isn’t yet automated or can’t be automated.
In addition, it’s often wise to build your automated solution iteratively. You’d do this by starting with a solution where there is heavy human involvement and only a little automation. You’d then incrementally inject more and more automation over time while gradually reducing involvement from your human workforce. Doing this incrementally reduces risk and gives you time to learn and refine. But it requires an agile solution – one that allows you to easily leverage your business users without a lot of upfront investment in terms of time and effort.
IBM Cloud Pak for Business Automation provides business applications that are designed to do exactly this. These business applications provide user interfaces that your business users make use of to trigger automation or to participate within a larger automation flow. They’re built using a low-code WYSIWYG user interface designer, allowing you to compose user interfaces quickly and easily via simple drag-and-drop gestures. It enables an accelerated time-to-value, which allows you to quickly adapt and pivot as your automation solution grows and matures, or as the needs of the business change.
In this chapter, we’ll demonstrate how to build a business application for client onboarding. This application provides a form that captures information about the client and demonstrates how to call a backend service that persists the information when the form is submitted.
Therefore, in this chapter, we will cover the following topics:
You can sign up for free trial access to a guided tour of IBM Cloud Pak for Business Automation. This trial includes access to the Business Application authoring experience described in this chapter. While this isn’t required to understand the concepts and techniques described, it’s highly recommended.
To sign up, follow the instructions in this IBM Automation Community blog: https://community.ibm.com/community/user/automation/blogs/bill-lawton1/2021/09/20/new-ibm-cloud-pak-for-business-automation-trial-is.
In IBM Cloud Pak for Business Automation, you can build business applications by going to Business Automation Studio:
Figure 11.1 – Business Automation Studio
Follow these steps to create a business application:
Figure 11.2 – The Business applications view
Figure 11.3 – The Create an application dialog
Now, you will find yourself in the Business applications editor. Here, you can design the user interfaces that make up your application:
Figure 11.4 – Business applications editor
Now, let’s understand the key elements within the editor, as numbered in the preceding screenshot:
You are now ready to start building your user interface.
With the business application editor open, you can start building the user interface for your Client Onboarding application. Specifically, you will create a user interface that collects contact information.
The application contains an initial starting page, as shown in Figure 11.4. Let’s give it a more meaningful name:
Figure 11.5 – The Edit pages dialog
It’s useful when you have a large or complex application that contains several pages, but this application will be relatively simple, with no need for a user to navigate between pages. You can delete it by simply clicking on it and hitting the Delete key. Alternatively, you can right-click on it and click Delete in the context menu.
Figure 11.6 – Submit Confirmation
At this point, you now have two pages:
Let’s proceed and add some UI elements to the Contact Information page using simple drag-and-drop mechanisms.
Your Contact Information page is a blank canvas at this point. You’ll start by adding a panel to it. Panels are useful for grouping widgets and for ensuring they have a consistent style. Follow these steps:
Tip
IBM Cloud Pak for Business Automation provides an extensive library of pre-built components in the widget palette. Use the dropdown to filter the palette based on categories of components. The Panel component can be found in the Layout category. Alternatively, if you know the name of the component, you can simply use the Search field to find it.
Figure 11.7 – Panel added to the Contact Information page
We want these laid out side by side. So, let’s inject some layout instructions within the panel so that we can control the placement of those fields.
Figure 11.8 – Panel with two columns
Figure 11.9 – Panel with an additional single column
You’re now ready to start adding fields to your panel.
You have enough layout elements for now. So, it’s time to start adding content:
Figure 11.10 – Panel in Content mode
Notice how the canvas’s appearance has changed. The gray boxes correspond with the layout elements you added while in grid mode.
Figure 11.11 – Panel with its first Plain text component
Figure 11.12 – The Properties tool
Here is the Properties dialog:
Figure 11.13 – The Properties dialog for the First Name input field
Figure 11.14 – Panel with the First Name and Last Name fields added
At this point, you now have a page that’s nicely laid out, with fields that prompt for first and last names.
When a user enters values into the First Name or Last Name input fields, those values must be captured somewhere. Cloud Pak for Business Automation captures these values in variables. But first, you must choose which variables should be used for which fields. That’s where data associations come in:
Figure 11.15 – Toolbar showing the Data association tool
Figure 11.16 – The Data association dialog
Continue building out your Contact Information page, using the techniques you’ve learned so far. You can add input fields for an email address, telephone number, and other typical kinds of information you’d use for contact purposes. Explore the component palette and try different layouts using grid mode. Don’t forget to associate each of your input fields with a variable so that the input values are captured:
Figure 11.17 – The Contact Information page with all fields
Once you have all the required fields to capture input, you need the means to send the values somewhere.
In this section, you’ll provide a button that a user can click when they’re ready to submit their details.
In the editor, toggle to Grid mode and add a Single column component at the bottom of the panel. This will hold the button, but we want the button placed over on the right:
Figure 11.18 – Grid configured for a right-justified button
Figure 11.19 – Panel with the Submit button
Figure 1120 – The Next step tool on the Submit button toolbar
Then, select the Next step tool in the toolbar:
Figure 11.21 – The Next step dialog
Figure 11.22 – Page flow setting
You’ll also want to switch to the Submit Confirmation page and add some content to it. A simple Success! message would suffice. You can also add images or instructions if required.
If your user interfaces must be available on mobile devices, whether on a phone or tablet, then you will want to ensure your experience responds to different screen sizes and the components are laid out appropriately.
Business applications built using IBM Cloud Pak for Business Automation are inherently responsive in this fashion, with no additional work needed on your part.
You can easily view how your experience responds using the screen size toggles at the top of the editor:
Figure 11.23 – The Contact Information page’s layout on a small-sized (mobile) screen
Follow these steps:
At this point, your user interface is all set. All that’s left is to ensure that the data your users input goes to the appropriate backend systems. For that, we need Automation Services.
Automation Services are reusable business automations that have been published to IBM Automation Studio for use within your business applications or automation workflows.
As a best practice, your automation services should be designed to satisfy a business need, with inputs and outputs that are easily understood. This allows them to be easily consumed within your low-code business applications.
Automation Services are created and managed within the Business Automations view. Follow these steps to create an Automation Service:
Figure 11.24 – Navigating to the Business automations view
Figure 11.25 – Source type options for automation services
Now, you must identify the type of service you wish to call. You have two source types to choose from:
Both will be discussed in the next two sections.
If you have a Business Automation Workflow that you wish to use, you can expose it as an Automation Service, and then call it from within your automation application.
The process app that contains the workflow must be published and deployed to a server that can be reached by you. You will need the URL for that server, as well as credentials for connecting to it, as shown here:
Figure 11.26 – Automation service configuration for workflow applications
Provide the required connection details, then select the operation that represents the workflow you wish to expose. On the final Publish page, you can configure who has access to this automation service.
Alternatively, you can create an automation service that invokes an external API, for example, a RESTful API, or one that triggers a bot that has been exposed via an API. Follow these steps:
Figure 11.27 – Uploading an OpenAPI Swagger file
As with the workflow option, you must configure who has access.
On the final page of the Create automation service dialog, you will be able to specify who has access to the service:
Figure 11.28 – Configuring automation service access
As a best practice, you will want to restrict access to the minimum set of people who might need it. If you’re unsure, start with a more restrictive setting. For example, limit access to admins only or even to yourself only. Then, gradually and selectively increase who has access.
Lastly, click Publish. You now have an exposed automation service that you can use.
Now that you have an automation service, let’s return to your automation application:
Figure 11.29 – Application editor showing palette filter
Here, you will see automation services that are available to this application. Because this is the first time you’re doing so, the palette will initially be empty.
Figure 11.30 – Automation service in the palette
The automation service will show up in your palette, which means it is now ready for you to use.
Now, let’s connect the Submit button to the automation service:
Figure 11.31 – Next step configuration to invoke an automation service
Recall that you created variables for each input field in your Contact Information panel. In this same dialog, you will need to map each variable to the input fields of your automation service. This ensures the values are sent to your backend systems.
If your automation service produces output, you can map that output to variables that display within your application. For example, if it produced a reference number, you could display that on your confirmation page.
You now have a fully configured automation that presents an elegant and responsive user interface to your users, without you needing to write a single line of code. It collects contact information and passes that information to a backend service for processing and storage.
In the previous section, you learned how to create and configure a new business application. And that works well when you’re just getting started or only have a few user interfaces. But as you scale out, you’ll likely notice repeated patterns or come across experiences that are just variations of each other. This is when reuse becomes important; otherwise, you risk effort duplication. For example, in this chapter, you built a form that captures names and addresses, which are fairly common pieces of data, likely required in multiple forms. This would be a good candidate for reuse.
IBM Cloud Pak for Business Automation provides two mechanisms that will help you reduce effort duplication. You can see these in the Business applications view.
If you have user interfaces that are essentially just variations on each other, consider creating application templates:
Figure 11.32 – Create | Template
When it’s time to create your application, select your template in the Create Application dialog.
By doing this, you will start with an application that already contains everything that was in your template. Then, you simply need to tweak or adjust it with what’s unique to this application.
Toolkits allow you to contribute new components to your component palette. These could be simple custom widgets, or they could be composite panels containing other widgets. Follow these steps:
Figure 11.33 – Creating a View component
IBM Cloud Pak for Business Automation includes several toolkits, including UI Toolkit, which provides the primitive components that you’ve used throughout this chapter:
Figure 11.34 – View components within UI Toolkit
UI Toolkit is a good reference if you wish to create your toolkit or your widgets.
If you have a content management system and you wish to build applications that integrate with it, IBM Cloud Pak for Business Automation includes a Content Services toolkit that provides common widgets and services:
Figure 11.35 – Available toolkits
In addition, it provides a Content Services Sample Template application that you can use as a starting point for your custom applications.
More information can be found in the GitHub repository at https://github.com/icp4a/content-toolkit, including a copy of the template that you can import into your environment, and detailed instructions on how to use it.
Once you’re satisfied with your business application, you’ll want to designate a version to deploy:
Figure 11.36 – Client Onboarding versions
You now have a running business application that contains a responsive user interface that your end users can launch and use to collect contact information.
In this chapter, we explored the various capabilities within IBM Cloud Pak for Business Automation that allow you to build user interfaces that call workflows or backend services via exposed automation services.
We built a responsive multi-page business application that provides a user interface for collecting contact information. We looked at the layout and configuration of view components, associated input fields with variables that held the input values, and examined how to connect the application to automation services, including how to map data from variables to service inputs.
After that, we examined templates and toolkits as mechanisms for reuse, to reduce duplication and effort. We also discussed some of the toolkits and templates provided out of the box, including UI Toolkit and Content Services.
Finally, we described the steps to version and publish the application so that it can be deployed to IBM Automation Navigator. From there, end users can launch the application.
In the next chapter, you’ll learn how to use IBM Cloud Pak for Business Automation to observe and gain insight into your running automation.