Create a Front-End Application Using Oracle Visual Builder

Oracle Visual Builder supports all stages of the development workflow, from creating to staging and publishing an application.

You don't have to follow an specific order in Oracle Visual Builder for building the artifacts in your application and defining the building blocks. How you proceed is personal preference and determined by the way you planned your application.

You can quickly build your application screens in Oracle Visual Builder by creating a visual application.

Create a Visual Application

A visual application is a collection of resources that you use to develop web and mobile applications. A visual application includes metadata in JSON files that describe data sources and business objects, and includes the HTML and JavaScript files of the web application. Some resources are created by default when you create a visual application.

To create a visual application:

1. Select Visual Applications in the menu on the Home page if you aren't on the Visual Applications home page.

   To create visual applications you must first open the home page for Visual Applications.

2. Click New on the Visual Applications home page.
3. Enter the application name in the Create Application dialog box, and click Create.

   The Application ID field is automatically populated based on the application name that you provide. You can modify the application ID, but it must be unique in your identity domain.

Your new visual application opens automatically when you create it and displays the Artifact Browser and Welcome screen. Your new application doesn't contain any artifacts. You can use the Welcome screen to help you decide which artifacts you want to create first. Click any of the tiles in the Welcome screen to open the panel in the Artifact Browser where you can create and manage the artifacts. You can add multiple mobile and web apps, and all the apps can access the data sources that you expose in your visual application.

Create a Service Connection from an Endpoint

You create a connection from an endpoint when you know the base URI of a service and can provide the necessary parameters for connecting to the service, such as the authentication details and an example of the body of the response.

To create a service connection from the URL of an endpoint:

1. Open Service Connections in the Artifact Browser, and click Create Service Connection ( ).

   You manage and create your service connections in the Artifact Browser.

2. Click Define by Endpoint in the Select Source pane of the Create Service Connection wizard.
3. Select the HTTP method, and enter the URL of the endpoint. Click Next.
4. In the Service tab, confirm that the service base URL, service name and service ID are correct.
   Depending on the endpoint that you specified, these values might be automatically populated for you.
5. Click the Authentication tab, and enter your authentication details, if required.
6. Click the Request tab to add headers and URL parameters to the request.

   Depending on the endpoint, you might want to add custom headers or a path or query parameters that are passed as part of the request.

7. Click the Response tab and enter the response body for the endpoint.

   The Response tab contains a text area where you can paste an example of the body of the response. The example in the response is the definition of the structure of the returned object. If you don't have an example, you can use the Test tab to send a request to the service and view the response. You can edit the response body in the text area in the Response tab.

8. Click the Test tab to test your request and view the response from the endpoint.

   Click Send to view the response body and headers that will be received, to confirm that you will receive the data you want.

   You can experiment with the different request parameters until you achieve the response you want.

   Note:

   You use the Test tab to test the service and view the response to the request that will be sent to the endpoint based on the settings in the other tabs. If your response returns an error you will need to check the details of your connection, for example, to ensure that you are using the correct credentials or that the service uses a valid SSL certificate. For development purposes you can try to enabling Token Relay for authentication if the service supports it.
9. Click Copy to Response Body to copy the current response into the text area in the Response tab, where you can edit it further.
10. Click Create when you are satisfied with the parameters of your request and the response.

Tip:

After you add an endpoint from the service, you can add more endpoints from the same service by clicking + Endpoints in the Endpoints tab of the connection and choosing From Original Service from the menu.

Create a Mobile Application

Each mobile application in your visual application is independent, but all the applications can use the data sources defined in the visual application.

To create a mobile application in a visual application:

1. Click Mobile Applications in the Artifact Browser to open the Mobile Apps pane.
   Structural representations of each of the mobile applications in your visual application are displayed in the Mobile Apps pane.

   If no mobile applications were created, you will see a message in the pane and a + Mobile Application button that you can click to open the New Mobile Application dialog box.

2. Click Create Mobile Application in the Artifact Browser.
   In the General page of the New Mobile Application, provide the application name for the mobile application you are about to create. You can also choose between one of two navigation styles. The Bottom Bar navigation style with three navigation items is configured by default. You can modify the number of navigation items down to the minimum of two or up to the maximum of five. A page flow, with a starter page, is generated for each navigation item. Alternatively, select None if you want to configure the navigation items for your mobile application later. If you select None, one page flow is generated for the mobile application.
3. Click the Next icon if you want to choose a layout for the Home screen of the mobile application from a selection of predefined options or click Finish if you want configure the layout of the Home screen later.

Oracle Visual Builder uses the Apache Cordova framework to access the capabilities of the devices on which your mobile application is installed. Apache Cordova is an open-source cross-platform development framework that enables application developers to use standard web technologies (HTML, CSS, and JavaScript) to develop mobile applications.