Application Development

REST Up and Build Quickly

Mash up REST services with Oracle Visual Builder Cloud Service.

By Shay Shmeltzer

July/August 2018

In May 2018, Oracle Visual Builder Cloud Service introduced a simplification of REST service consumption. This feature makes it very easy to integrate data from various back-end systems into your web and mobile applications. Oracle Visual Builder Cloud Service makes the experience of consuming REST services as declarative and visual as possible.

In the following how-to steps, you are going to see how to integrate data from two different systems into a single cohesive app user experience—all without manually writing a single line of code.

You can follow the steps in this tutorial in this video.

Defining Service Connections

Start by creating a new Oracle Visual Builder Cloud Service application, and name it RESTSample. (You can sign up for a cloud trial to create your app.) With the new application created, choose the service connection to direct to the application, as shown in Figure 1.

visual figure 1

Figure 1: Creating a service connection to the new application

When you click Service Connections to create a new service connection, you’ll see three options for the source of the service you are consuming, as shown in Figure 2.

visual figure 2

Figure 2: Service connection options

The first option, Select from Catalog, is the built-in service catalog in Oracle Visual Builder Cloud Service. It automatically shows you services in your cloud environment that you have access to. For example, if you have access to Oracle SaaS apps, you will see a list of the built-in SaaS REST services. This will enable you to easily build Oracle SaaS extension apps leveraging data from those apps.

What Is It?

Oracle Visual Builder Cloud Service empowers developers to rapidly create and deploy engaging web and mobile apps directly from a browser, using a visual development environment.

TRY Oracle Visual Builder Cloud Service.

The second option, Define by Specification, enables you to use a service that provides a specification. Oracle Visual Builder Cloud Service supports the Swagger industry standard for REST service description. If your service provides such a description, Oracle Visual Builder Cloud Service will be able to parse the description and create the service endpoint definitions for you. A similar process is also available for services that were exposed with the REST service wizards of the Oracle ADF Business Components feature of Oracle Application Development Framework.

The third option, Define by Endpoint, enables you to simply provide the URL to a service and then define the properties for the endpoints.

Define by Endpoint is the option you will use in this article. You will leverage a public REST service that provides a list of the world’s countries.

Click Define by Endpoint, paste this URL into the URL field, select GET for Method, and select Retrieve Many for Action Hint, as shown in Figure 3, so that Oracle Visual Builder Cloud Service will return many rows.

visual figure 3

Figure 3: Configure your app to point to a public REST service

Click Next to open a dialog box where you can further define the properties of the service.

In this case, you need only provide a service name, GetCountries, as shown in Figure 4. In the same interface, you can define security aspects (under Authentication) as well as headers and URL parameters.

visual figure 4

Figure 4: Adding the service name, security parameters, and more to the app

Click the Test tab and the Send button, as shown in Figure 5, to test the service to see the returned results. Click Copy to Response Body to copy the results to the Response tab. Oracle Visual Builder Cloud Service uses the response to analyze the REST values returned and helps you use them later on. Click the Response tab to see the results, and click Create to complete the wizard and create the service connection.

visual figure 5

Figure 5: Testing the response

Next follow a similar set of steps to add a connection to another service that provides information about a specific country.

In the URL for this service, note {code}, which indicates a URL path parameter.

To add this service, click + Service Connection; click Define by Endpoint, paste{code} into the URL field; and select GET for Method, as shown in Figure 6. To indicate that this service connection returns a single record, select Retrieve One for Action Hint.

visual figure 6

Figure 6: Creating and testing a second service connection

Click Next, and enter the service name CountryInfo for the service connection Click the Test tab, enter us as the value for Path Parameter, and click Test. Finally, click Copy to Response Body and Create to complete the service connection.

You are now ready to build the user interface for your application.

Visually Designing User Interfaces

Click + Web Application to create a new web application, as shown in Figure 7. Enter Countries for Id in the Create Web Application dialog box. (Note that you can follow a similar set of steps to create an on-device mobile application in Oracle Visual Builder Cloud Service.)

visual figure 7

Figure 7: Creating a new web application

Oracle Visual Builder Cloud Service will then direct you to the visual page editor, providing you with a WYSIWYG interface for creating your web application page. On the left side, you’ll see a list of many Oracle JavaScript Extension Toolkit (Oracle JET) components you can add to your page.

In the visual page editor, drag the Table component from the left to the center of the page. Note that when the table is selected, the quick-start options on the right of the editor enable you to add data to the table.

Click Add Data, as shown in Figure 8. In the wizard that opens, you’ll be able to select the methods that return many records as sources of data. Locate the REST method for the first service connection you added, GetCountries, and select it. In the next dialog box in the wizard, Oracle Visual Builder Cloud Service shows you the columns this method returns. You can select all the columns, but for this example, make sure to choose alpha2_code as the primary key of the record, as shown in Figure 9. This will be helpful later on, because this ID will be passed in the row selection event to help identify which record is selected. When you have selected the columns you want to appear in the app, click Next.

visual figure 8

Figure 8: Creating a table in the visual page editor

visual figure 9

Figure 9: Choose the columns to appear in the records returned by the app

Click Finish to complete the wizard, and the application page will refresh to show you the real data returned from the service in the table (see Figure 10).

visual figure 10

Figure 10: Real data on display in the main application page

Now click Add Detail Page to add a detail page—a page where you’ll see more information about a specific record.

For this page, use the endpoint you added in the other service connection, CountryInfo, as shown in Figure 11. This endpoint provides information on a country, based on the country code. The table selection event automatically passes this ID/code to the service call.

visual figure 11

Figure 11: The Select Endpoint screen of the Add Detail Page

In the second step of the wizard, select the service-returned fields you want to show on the detail page, as shown in Figure 12. You can also modify the title of the button that navigates to this page (Button label) and the page title (Page title). Change the Page title value to Country Detail. When you have made all the selections and changes, click Finish.

visual figure 12

Figure 12: The Add Detail Page’s Page Details screen

You can now run the application and see it in action. Click the run button (right arrow) in the upper right.

The application opens in a new browser tab. You will see a page listing countries and will be able to select one of the countries and click the Detail button to go to the Country Detail page to see more information about that country, as shown in Figure 13.

visual figure 13

Figure 13: The main application page, ready to provide country details

Of course, you can continue to tweak your application. For example, you can reorder fields in the Country Detail page or represent some of the data in other ways, using the rich visualization components available in Oracle Visual Builder Cloud Service. Figure 14, for example, shows a Country Detail page with an added avatar component to show the flag of the selected country.

visual figure 14

Figure 14: Updated Country Detail page showing information on and the flag of the selected country


As this article demonstrates, integrating REST services into your application is quite easy. Oracle Visual Builder Cloud Service was built from the ground up to support the modern HTML5/JavaScript/REST architecture, and with the latest features of the service, creating these apps is easier than ever.

Next Steps

TRY Oracle Visual Builder Cloud Service.

LEARN more about Oracle Visual Builder Cloud Service.

WATCH Working with REST Services in Visual Builder Cloud Service.

Photography by Francisco Gomes, Unsplash