By Joel Kallman
September/October 2017
Oracle Application Express, the low-code framework of Oracle Database, enables the easy creation of modern and responsive web apps with no code. For many application requirements, however, you will need to go outside the bounds of the declarative framework and define custom logic, business rules, or an enhanced user interface. And you do this with code.
With Oracle Application Express, you can use SQL, PL/SQL, HTML, JavaScript, or CSS to extend your applications. And regardless of what you use to extend your applications, Oracle Application Express provides a gradual transition from no code to low code to high control (more code).
In this Oracle Magazine article, you’re going to build a web application on top of a table populated with employment data from the US Bureau of Labor Statistics (total nonfarm employees from 1990 to 2017). You will initially create a web application that features a chart on this table, and you will write no code in the process. You will then add some dynamic capability to this chart by writing a small amount of JavaScript. And then to complete the application, you will add a moderately complex piece of JavaScript to specify the legend of two separate charts.
This article’s sample application is built in Oracle Application Express 5.1. If you’re not already running Oracle Application Express 5.1 or later locally, you can request a free workspace at apex.oracle.com. Alternatively, you can download the Database App Development Virtual Machine from Oracle Technology Network, which includes a preconfigured Oracle Database 12c Release 2 Enterprise Edition instance, Oracle Application Express 5.1, Oracle REST Data Services, Oracle SQL Developer, and Oracle SQL Developer Data Modeler. You will also need to download and unzip the SQL script for this article to create the sample database objects.
Creating the Sample Database Objects
Begin your exploration of low-code Oracle Application Express 5.1 development by first creating the sample database objects for your application.
You’ve thus created the EMPLOYMENT table in your schema and populated it with data.
Creating the Application
Now create the initial application, which features a simple chart:
If you were to run your new application now, it would look a bit confusing. But with a few minor changes, it can look spectacular.
To start the changes, first ensure that you are in the Application Builder of Oracle Application Express, editing page 2.
select * from "EMPLOYMENT" order by state, measurement_date asc
You’ve now created a responsive Oracle Application Express application with an area line chart, showing the nonfarm employment data for four states in the US from 1990 to 2017.
Click the Run Application icon in the upper right to run your application. Log in with the same credentials you used to log in to Oracle Application Express. Hover over the lines in the chart to see the data values for each series.
Your application should look similar to Figure 1.
Figure 1: The initial chart application page
Extending with Low Code
The primary data visualization engine of Oracle Application Express is based on the Oracle JavaScript Extension Toolkit (Oracle JET), which includes a set of complete and flexible JavaScript APIs.
Using just a small amount of JavaScript, now add some dynamic interactivity for the chart in your new application.
if ($("#linechart_jet").ojChart("option","orientation") == "vertical") { $("#linechart_jet").ojChart({orientation: 'horizontal'}); } else { $("#linechart_jet").ojChart({orientation: 'vertical'}); }
Your application page now provides a button for toggling the orientation of the line chart from vertical to horizontal. The static ID attribute you entered in the Creating the Application section gives you the ability to reference the Oracle JET object in JavaScript (by appending _jet to the static ID attribute) and employ all elements of the Oracle JET API. Using a very small amount of JavaScript, you quickly and easily added interactivity to your application.
Your application should look similar to Figure 2.
Figure 2: The application with the ability to toggle the chart orientation
Adding a Second Chart and a Custom Legend
With Oracle Application Express, you can also go outside the bounds of the framework and achieve high control by including large amounts of code where necessary. This code can include CSS, JavaScript, HTML, SQL, or PL/SQL.
Now add a second chart and a custom legend to control both charts via slightly more-complex JavaScript.
select avg(employees), state from employment group by state order by state
<div id="legend" aria-controls="piechart linechart" style="height:25px;"> </div>
Your application should look similar to Figure 3. You now have an application with two charts and a custom legend. Click the states in the legend to show and hide the series from both charts. This additional functionality was provided by the 39 lines of JavaScript from the apex_lowcode_legend.js file, which makes extensive use of the Oracle JET API.
Figure 3: The application with a second chart and a single legend to control the series
Summary
With no coding, Oracle Application Express enables you to create powerful and responsive web apps. When you need to step outside of the no-code framework of Oracle Application Express to extend your application, you can use code—SQL, PL/SQL, HTML, JavaScript, or CSS. The Oracle Application Express framework enables you to customize applications with a little code or, when more control is desired, a little more code.
Next Steps
DOWNLOAD
Oracle Application Express 5.1.
the SQL script for this article.
READ more about low code with Oracle Application Express.
TRY Oracle Database Cloud Services.
Photograph by iStock.com/Nikada
Joel R. Kallman is Senior Director of Software Development for Oracle's Server Technologies division at Oracle America, Inc. He is responsible for the development and product management of Oracle Application Express. Joel has been at Oracle since 1996 and is the co-creator of Oracle Application Express. He is a contributing author of several books on Oracle technology, including Expert One on One Oracle, Beginning Oracle Programming, and Mastering Oracle PL/SQL: Practical Solutions. Joel holds a Bachelor of Science degree in Computer and Information Science from the College of Engineering, Ohio State University.