To me, the way an APEX application looks, could be the key to making people use it. There are many examples where a great app with great features is unpopular, simply because it doesn’t bring the best user experience. A simple fact about APEX and the developers using it is that the majority of us have database development background and the only user interface having to deal with, before meeting APEX, was the command line, SQL Plus, SQL Developer, or any other tool like it.
And for many people it’s hard to shift the focus towards a web design and unleash the full power of APEX – to give you a great UI and themes for a start, but also allow you to extend it limitlessly. I am sure that any of you knows that the weapons of choice here are
I’ve tried to select 5 of the things I find important from User Interface perspective to consider when building an application in APEX. Ofcourse there are many more and I will update that list further, but I hope I can help you even a little with this initial ones.
Get familiar with browser DEV tools
All that allows you to inspect and get inspired by other applications and web sites design implementation. It is allowing you to make changes to the HTML and DOM and see the change reflected in the page after the change is made. You can also play around with the CSS styles, change different properties and see the effect immediately in the page. These features are available in the
Inspector) tab in your browser DEV tools.
Network tab contains valuable data about network operations, which are communications between your browser and the server. When your Network tab is opened and you load a page, you’ll see how all the elements that are loaded in a sequence and see any slow ones that might affect the performance of your application. The Network tab looks complicated at first, but it’s worth getting familiar with.
Get familiar with the APEX Grid Layout concepts
It is probably one of the most important things to consider if you want to create an application that is looking good both on Desktop and Mobile. The concept is built around Bootstrap’s Grid System which consists of 12 columns that form a container. This allows your element to take different part of the row, depending on the screen width and device being used.
The structure of a container will be always the same, as you can change the individual elements’ classes to fit your needs and fill as much space as you like in different screen sizes.
<div class="container"> <div class="row"> <div class="col col-6 col-start"></div> <div class="col col-4"></div> <div class="col col-2 col-end"></div> </div> </div>
In this example, you can see that the
container div is always having a class "container". Then it is followen by a div, that is having a class
row. It is needed to tell the rendering engine that all of the next three divs inside should be using the Grid Layout and form together a 12 column layout. Then each individual nested div is having a class
col, followed by classes with different prefixes.
col-2 for example mean that the first div will take half of the container’s space (6 out of 12 columns in total), the second will take 4/12 (or a third of it) and so on. On top of that you could use a number of modifier classes. They could be as follow:
|≤640px||>640 and <768px||≥768px and <992px||≥992px and <1200px||≥1200px|
As the table suggests, by adding
.col-xxs-N prefix you will tell the browser, that the div should take
N columns out of 12, when your screen is less than
640px wide. Similar to this, you can add
.col-lg-N which will allocate
N columns out of 12, when your screen is more than
So by adding just those two CSS classes, you achieve a different look for your application in desktop and mobile version. And if those screen widths don’t speak much to you it’s fine – here is a table showing what typical devices width is:
|≤640px||>640 and <768px||≥768px and <992px||≥992px and <1200px||≥1200px|
|Device||Phone||Phone||Phone/Tablet||Tablet/Small Laptop||Laptop and Desktop|
*Those are valid numbers for the majority of devices. Nowadays you can see the industry evolve constantly, so phones having a screen width of over 768 pixels or tablets having screen width of 992px are nothing rare.
To illustrate it with an APEX Region, I have created a demo page and a region, containing 6 input items. To fit best on any device (and according to my initial design), I will make them appear on a single line when open in a Desktop browser, 3 on a line when displayed on tablet and 1 at a row when displayed on mobile device.
To do that I will add a new set of classes to each item.
This can by done by adding the CSS classes in the
Layout - Column CSS Classes section of your Item properties. Check the
New Column toggle and then
Column CSS Classes field will appear. Enter
col-xs-12 col-md-4 col-lg-1 as a property for each of your items.
See it in action in this APEX AppLab DEMO.
You can read more in the APEX Universal Theme documentation: https://apex.oracle.com/pls/apex/apex_pm/r/ut/grid-layout
And a very good tutorial about Bootstrap’s Grid System with many examples: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
Shared Components – either in
Static Application Files (if you use them in only one application) or
Static Workspace Files (if you want to reuse them in multiple applications across the same workspace).
- Reuse code
- Make it tidy and readable
- Easy track the changes in your version control system
- Minify your files, allowing the browser to load them faster
- Debug a single file when something goes wrong
- Fix an error in a single place
Use Dynamic Actions and AJAX calls
Now you might think what does AJAX has to do with the design of an APEX application. Or the Dynamic Actions. It is simple – the less page reloads – the better. The shorter time to load an element – the better. And by using those two in the right way your application with certainly make the User Experience (UX) better. It’s no wonder that it is nowadays a whole different path where experts are specializing.
The thing with APEX is that is not built with the concept of being a Single Page Application (or SPA). This is relatively new approach compared to the times when APEX was built as a platform. It is natural for us as APEX developers to produce an app, containing multiple pages, where each page redirects to another and then the browser is refreshed.
The cool thing is that APEX has enabled developers to use things like
Application Processes (or
There is also a whole big feture, called
APEX already has a lot of cool JS libraries included – starting from jQuery and Oracle JET, going through FullCalendar that helps rendering the Calendar regions, they could be used on the fly.
If you like however some third party library, you simply include the path to the file in your app and you are ready to use it. You can directly reference a CDN, where it is hosted, download it and put it in the Shared Components, you name it.
Application Properties –
User Interface –
Cascading Style Sheets sections.
To name just a few good JS libraries, widely used across the APEX community (and some of them used in popular APEX plugins):
- DropzoneJS (and the APEX plugin based on it)
And these are just of few. You can find tons of useful ones in any subject area you need.
2 thoughts on “5 tips to help you build better APEX user interfaces”
I agree. But I can attest using the FOEX plugin framework for APEX which is based on ExtJS my productivity has gone up dramatically when building complex applications or migrating complex Forms applications to APEX. It saves me having to integrate JS libraries and writing a lot of js code.
I have used APEX since beta HTMLDB.
Totally agree. One of my all time favourites is the “APEX Builder Extension by FOS”, which dramatically decreased the time it takes to modify a CSS or JS files. In the new version of APEX – 21.2 there is finally similar functionality, allowing us to edit files directly in the APEX Builder. And it’s also generating minified versions of the CSS and JS files automatically. So definitely a great tip, Raymond – using a high quality plugins can make wonders!