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 HTML, CSS and JavaScript. So as a first step, before even reading further, get a very basic understanding of the key concepts of each – what is the syntax, what are the basic elements used, check some examples and get some small tutorials done using them.
Then, when you have that basic knowledge, you are ready to use that power. Check web sites that you like, explore their code, get some ideas and implement them in your app. Check the colours used, fonts, HTML structure. Explore some external JavaScript library, import it in your application and make it even better.
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
Every major browser has powerful suite of built-in DEV tools. Just right click and hit Inspect in Chrome or Firefox. You’ll see the HTML source of the page, the CSS styles applied to the elements, a Javascript console, static files list (JS files, CSS files, libraries, etc.), Network and Performance, etc.
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 Elements (or Inspector) tab in your browser DEV tools.
If you’ve written custom JavaScript or jQuery functions to enhance your web app, you have full access to your code inside the DEV tools. If your code has syntax errors, or if files necessary to make your JavaScript run can’t be accessed, you’ll see error messages in that console. The error messages will give you the exact place in your code where the problem occured. You can also run real-time JavaScript code, create and run JavaScript functions and output some result of it. To start using the console, navigate to the tab, named Console.
The 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-6, col-4 and 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 | |
| Class prefix | .col-xxs- | .col-xxs- | .col-xxs- | .col-xxs- | .col-xxs- |
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 1200px wide.
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 | |
| Class prefix | .col-xxs- | .col-xxs- | .col-xxs- | .col-xxs- | .col-xxs- |
| 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
Put all your CSS and JavaScript code in one place
It is a good idea to place all your CSS and JavaScript code in seperate files and store them in the 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).
Although APEX allows you to put CSS and JavaScript code in multiple places in the Builder, having them in a single file (one for the CSS code and one for the JavaScript) allows you to:
- 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 Page Processes) On Demand. The essence is that you can invoke a piece of code, or render something on the screen, without refreshing the whole page, but just a part of it. These are so called AJAX calls, which will require some JavaScript code being written to invoke the process you need.
There is also a whole big feture, called Dynamic Actions. It provides developers with a way to define client-side behavior declaratively without the need to know JavaScript. Using a simple wizard, you can select a page item, a condition, enter a value, and select an action (for example, Show, Hide, Enable, and Disable).
Comparing both Dynamic Actions and AJAX calls in APEX, Dynamic Actions could be 100% declarative and are a good way to start improving the user experience in your application. AJAX calls are a bit harder, due to the need to implement them using JavaScript, but are a very powerful tool, once you get used to them.
Don’t be afraid to use external JavaScript libraries
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.
Then another best practice is to reference your JavaScript and CSS files only once – in Application Properties – User Interface – Javascript and 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):
- HammerJS
- DropzoneJS (and the APEX plugin based on it)
- D3
- fullPage.js
- Moment.js
And these are just of few. You can find tons of useful ones in any subject area you need.
APEX App Lab - Blog 
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.
LikeLike
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!
LikeLike