Saturday, December 17, 2016

Start to develop in APEX 5.1, you will gain at least an hour a day!

Yesterday APEX 5.1 (5.1.0.00.43) was installed on apex.oracle.com.
This means that you can start developing your apps in APEX 5.1 from now on. Unlike the early adopter releases (apexea.oracle.com) you can develop your apps on apex.oracle.com and later export them and import in your own environment once the on-premise version of APEX 5.1 is available.

APEX 5.1 is again a major update behind the scenes. The page processing is completely different from before; where previously full page reloads were done, now there's much more lightweight traffic and only necessary data is send across.

The big features in this new release are the introduction of Interactive Grids, which is both a successor for Interactive Reports as for Tabular Forms. The other big feature is the integration of Oracle JET, which you see mostly in the data visualisation (charts) part of APEX, but more components will probably follow in future versions. Although those two features addresses the most common issues we previously had (outdated tabular forms and charts), APEX 5.1 brings much more than that. Equally important for me are the "smaller" improvements which makes us even more productive. Below you find some examples...

When creating a new application, the login page is immediately a great looking page:


Previously in APEX 5.0 you had to adapt the login page, see my blog post Pimping the Login Page.

When you want your item to look like this:


APEX 5.1 has now a template option to display the Pre and Post text as a Block:


Or when you want an icon inside your item, there's an Icon CSS Class option selector which shows the gorgeous looking new handcrafted Font APEX icons:



You could do all the item customisations above in APEX 4.2 or 5.0 too, but it would require custom css and some code, whereas now it's declarative in APEX 5.1.

And there's so much more; ability to switch style by user, new packaged apps, warn on unsaved changes, no reload page on submit etc. features that haven't been talked about much yet, but which before you had to do with a plugin or a lot of custom code and now it's just there.

So those "smaller" features are actually not so small, they are an enormous timesaver and bring your apps in warp-speed to modern and great looking applications.

In the next blog posts I'll go in more detail on some specific features that will gain you at least an hour a day, but in the meantime, embrace APEX 5.1 and start earning those extra hours :)

Update: on December 21th APEX 5.1 was made available to download on OTN.

6 comments:

Amis Calian said...

Error Validation links appeared differently and (to my surprise) stopped working in APEX 5.1 jQuery.
Is it a bug or the feature was disabled?

Chris said...

Hello Dimitri,

since you've mentioned the new design of the login page in APEX 5.1 I wanted to ask if there's a better way for getting your own logo on it now, too.
The new login page uses fa-sign-in as it's standard symbol CSS class so how would I best go about changing it for an image that I've uploaded to my shared components (e.g. #APP_IMAGES#example_logo.jpg)?
Would I still have to use custom inline CSS as described in your post here or is there a better way now?

Thanks in advance for your reply!

Dimitri Gielis said...

Hi Chris,

Just add this to inline css of the page:

.t-Login-logo {
background-image: url(/i/calc2.gif);
background-repeat: no-repeat;
}

You can style it further to your needs.

Hope that helps,
Dimitri

Mark Stewart said...

When I select the pop-up for "Icon CSS Classes" I just see "Font Awesome" -- how do I add/load "Font APEX"?

Dimitri Gielis said...

Hi Mark,

You can go to Shared Components > Themes and in there you find the setting to change the Icons Library.
If you change that to Font APEX you should be able to see them.

Hope that helps

Anonymous said...

Hello Dimitri,

The 'warn on unsaved changes' feature is not working for button in tabular form. Is there anyway I can get this working to warn the unsaved changes when the Back button in my page is pressed.

Thanks.