As Published In
Oracle Magazine Logo Social black
March/April 2017

TECHNOLOGY: Oracle Application Builder Cloud Service

 

High on Power, Low on Code

By Shay Shmeltzer

 

Get started with Oracle Application Builder Cloud Service.

Oracle Application Builder Cloud Service provides a browser-based visual development environment for creating web and mobile applications quickly. It also includes a runtime platform for publishing applications and storing data in a built-in Oracle Database instance. Business users and developers can use Oracle Application Builder Cloud Service to create bespoke applications and applications that get their data from external apps using REST interfaces.

Oracle Application Builder Cloud Service excels at extending Oracle software as a service (SaaS) apps. To support that capability, it includes a built-in service catalog that provides easy access to services exposed by Oracle SaaS, enabling developers to build applications that incorporate data from those apps along with custom data objects they create. Oracle Application Builder Cloud Service also includes out-of-the-box support for the Oracle Applications simplified look and feel, so applications can look and behave like Oracle SaaS apps.

In this article, I’ll show you how to create a basic Oracle Application Builder Cloud Service application without writing a single line of code. In addition, this article’s demonstration video shows the steps for building the application and the Oracle Application Builder Cloud Service features described in the article.

To walk through the article steps, sign up for a free trial account for Oracle Application Builder Cloud Service. Get your account at Oracle Cloud.

Creating a Basic Application

With your trial account created, log in to Oracle Application Builder Cloud Service. When you log in, you’ll be prompted with a list of applications you and your team have created. (Note that users can collaborate simultaneously on the development of an application in Oracle Application Builder Cloud Service).

Logged into Oracle Application Builder Cloud Service, as shown in Figure 1, click the big green + icon to create a new web application. The mobile option enables you to create an app that deploys and runs on a mobile device directly. The web option creates an application that is web-based, with responsive adaptation to various screen sizes, including mobile devices.

o27abcs-f1

Figure 1: Oracle Application Builder Cloud Service home screen

Choose Web for the application type. A three-step Create Application wizard will then guide you through

  • Providing a name for the application
  • Specifying the look and feel of the app (which you can choose from a set of built-in templates, such as Oracle Alta UI or Oracle Applications Cloud Look and Feel, or from additional themes you can develop and add to the list)
  • Defining the main area of the app that will represent the top-level menu

In this case, you’ll create a new budget planning application, entering the name (I used Project Planner for my application), choosing Oracle Applications Cloud, and creating two top-level menu options—Projects and More info—as shown in Figure 2.

o27abcs-f2

Figure 2: Create the Oracle Application Builder Cloud Service application

Click Finish to create the application. When the application is created, you’ll be directed to the visual page editor. Oracle Application Builder Cloud Service uses the familiar concepts of a component palette on the left, a visual what-you-see-is-what-you-get layout editor in the middle, and a property inspector on the right.

To design your page, drag components from the component palette (on the left) onto the visual editor (in the middle) and set their properties in the property inspector (on the right). You can click the page title and set a title and a logo for the application, as shown in Figure 3.

o27abcs-f3

Figure 3: Oracle Application Builder Cloud Service visual editor

In this application, you’ll want to track information about various projects, so start by dragging a table component from the component palette (under the Collection label) and dropping it onto the visual editor page. You’ll be prompted to connect this table to a source of data and, because you don’t already have one, create a new business object. In the Table Creation wizard on the right, click New Business Object and enter Project as the object name.

Next, add the specific fields to track. Fields can be of various types: text, numeric, currency, date, email, URL, and so on. Create each of the following fields by clicking New Field, entering the name in the Default Display Label field, choosing the type button, and clicking the check mark button:

  • Project Name is a character field.
  • Budget is a currency field.
  • Due Date is a date field.

Figure 4 shows that as you add fields, the visual editor immediately reflects the changes in the UI, showing you a preview of how your page is going to look.

o27abcs-f4

Figure 4: Table Creation wizard

Click the “next” arrow (>) to continue through the steps of the Table Creation wizard. Indicate which operations—Create, Edit, Delete, Details—you would like to do on the new object. These are all On by default, and those are the settings you want for this application. Next, indicate that clicking the name of a project will take you to the page that will enable you to edit its details. From the Field to link on menu, select the Project Name field.

What Is It?

Oracle Application Builder Cloud Service provides an easy way for business users to create their own web and mobile applications and host them in a cloud environment. Through an intuitive visual development interface and with no need for prior development experience, creating engaging applications and reducing IT backlogs have never been easier.

Try Oracle Application Builder Cloud Service.

Click the “next” arrow (>) to add filters to the table to enable users to search through the data. For Basic Filter, click the On button. Project Name is the default value for the Filter Field and the value you want for this application.

Click Finish to close the Table Creation wizard, and click the Run button (right-arrow icon at the upper right of the screen) to run the application. Because the application is completely HTML/JavaScript–based (leveraging the advanced Oracle JavaScript Extension Toolkit [Oracle JET] UI technologies), no additional compile, build, and deploy steps are needed—the application is immediately functioning in the browser.

You can add records and update the data as needed. By default, a full set of create, read, update, and delete (CRUD) operations and pages is provided for your new custom object. Add a first project to the application to see how the application presents data at this point. Click the Create button, and enter data for the project. For Project Name, enter Holiday Party; for Budget, enter 5000; and for Due Date, choose February 14, 2017. Click Save and Close to save the project data. The application should now look similar to Figure 5.

o27abcs-f5

Figure 5: Running the Oracle Application Builder Cloud Service application

Modifying the page layout and adding another field are also quite easy. While you are previewing your application, click Back to Designer to navigate to the project editing page.

Now change the page layout to use two columns for the current project data and add a remarks field. Drag a Two-Column Layout component from the component palette (under the Layout label), and drop it onto the visual editor page. Then drag the Project Name, Budget, and Due Date fields into the new layout component, keeping their original order from top to bottom. Now drag a Text Area component from the component palette (under the Field label), and drop it onto the visual editor to the right of the two columns you just defined. For Label, enter Remarks and click OK. In the Text Area property inspector pane on the right, change Label Position so the Remarks label is left-aligned and above the text entry field. Click Run to see the new two-column layout and remarks area in the application runtime.

Now add master/detail (or parent/child) relationships to the application. Click Back to Designer, and drag a Tabs component from the component palette (under the Layout label) and drop it onto the visual editor page, below the current page content. In the visual editor, click Tab 1 and name it Tasks in the Tabs property inspector pane (on the right). Click Tab 2, and use the same process to change the name of that tab to Costs. Click Tab 3, and click Delete in the Tabs property inspector pane to remove the tab from the application.

Onto the first tab, drop a new table component. In the Table Creation wizard, use the same general process you used to create the Project business object earlier in this article. Click New Business Object, name the object Tasks, and add the following fields:

  • Task, a character field
  • Cost, a currency field
  • Owner, a lookup

To create the Owner lookup, enter owners in the Create New field, and click Define Lookup Values. In the next dialog box, click Add Lookup Value and enter three values: David, Jane, and Jack. Click Add Lookup Value before adding each new value. Click OK. Click Finish, and click Run.

The application runtime shows the Edit Projects page with the Tasks and Costs tabs and a couple of additional tasks, as shown in Figure 6. Refer to the article’s video for instructions for adding the tasks.

o27abcs-f6

Figure 6: Edit Projects, with Tasks and Cost tabs

Oracle Application Builder Cloud Service offers a collection of data visualization components, including various charts and gauges that help represent data in meaningful ways. The article’s video shows how to add and configure a doughnut chart to represent tasks and their costs, as shown in Figure 7.

o27abcs-f7

Figure 7: Dragging and dropping a chart

Although you have used a UI-first approach to building the complete application, if you were to dig deeper into what has been created, you would discover a set of tables in an Oracle Database instance, a set of REST services providing full CRUD access to the data, and an Oracle JET–based set of web pages.

Powerful Data Designer

A UI-first approach is just one of the approaches Oracle Application Builder Cloud Service supports. Oracle Application Builder Cloud Service also includes a powerful data designer component.

Navigate to the data designer from the main (hamburger) menu of Oracle Application Builder Cloud Service. You’ll see that you can manage both custom objects you created as well as new external REST services you can add to your application as extra datasources. If your Oracle Application Builder Cloud Service instance is located in the same cloud instance as an Oracle SaaS application, you will see the REST services those apps expose in a service catalog—for easy addition to your application.

For this application, focus on editing the custom components you’ve created. The article’s video shows how to

  • Use the data designer to add an Expenses field (of type Currency)
  • Configure the Expenses field to aggregate the cost of tasks (as shown in Figure 8)

    o27abcs-f8

    Figure 8: Configuring the Expenses field to aggregate the costs of tasks
  • Add a circular status meter (under the Gauge label) object to the application. Configure that object to show expenses from 0 to the allocated budget

The finished application looks similar to the application in Figure 9.

o27abcs-f9

Figure 9: The completed application

Sharing Your Application with the World

Oracle Application Builder Cloud Service is not just about easy development; it also simplifies the process of rolling out your application to production.

The stage option in the main menu of Oracle Application Builder Cloud Service creates a new instance of your application with a URL you can share with team members who you would like to test your application. This instance of the application has its own copy of the database, which can be blank or include data from your development environment.

When you are happy with the test results, you can publish the application—creating another instance that will be your production application.

Next Steps

 TRY Oracle Application Builder Cloud Service

 LEARN more about Oracle Application Builder Cloud Service

 EXPLORE the Oracle Application Builder Cloud Service Channel

After an application is published, you can manage further changes to the application through Oracle Application Builder Cloud Service’s automatic version management features. Working on a new version doesn’t break the existing code, and upgrading to the new version is seamless, because Oracle Application Builder Cloud Service takes care of advanced rollout functionality, including updating existing database tables and columns with the latest changes.

What’s Next?

This article only scratched the surface of Oracle Application Builder Cloud Service. The environment enables you to create much more complex and advanced applications, manage security, import data from external sources, create mobile apps, and more. Future articles will explore these features.


Shay Shmeltzer is director of product management for Oracle’s development tools and frameworks. He is focused on helping developers simplify and streamline their work by leveraging the right tools and technologies.

Send us your comments