Thursday, March 12, 2015

APEX 5.0: pimping the Login page

When you create a new application in APEX 5.0, the login page probably looks like this:


I love the build-in login page of APEX itself - luckily it's easy enough to build that in our own apps too. Thank you APEX Dev team!

The first step is to change the region type to be of Login Region Template:


We want to add a nice icon on top of the Login text. You can use the Icon CSS Class in the Region options - in this case I opted for fa-medkit:


Next up is making the Login button bigger and make it the complete width like the items.
In APEX 5.0 you can use the Template Options to do that:


Once we stretched the Login button it fits the entire size.

Next up is getting some icons in the username and password field.
For the username we use the "icon-login-username" css class.
Instead of the label we make that hidden and specify a placeholder, so before you start typing you see the word username and when you start typing the text disappears.


For the password field we do the same thing, but for the css class we specify "icon-login-password".


Finally your login screen looks like this:


Great? Absolutely - and so easy with APEX 5.0!

What's next? Is there anything better? Euh... yes, what about live validation?
Sure we can do that in APEX 5.0 without too much hassle :)) Thanks once again APEX Dev Team!

In the item make sure the item is set to Value Required and add in the Post Text following span:


That will give you a nice visual indication if you entered text:


Cool? Creating login pages in APEX 5.0 is ... (you fill in the word)

Interested in more? We're doing an APEX 5.0 UI Training in May.

16 comments:

Scott Wesley said...

Awesome! Will there be a reference of available classes?

Anonymous said...

Very cool. Such simple things that make a big difference to the user experience.

Anonymous said...

They seem to be using "font Awesome"

Checkout link below for complete list of icons:
http://fortawesome.github.io/Font-Awesome/examples/#

When you add the following classes:
"fa fa-spinner fa-spin" you get a spinner icon in your login page:

see:
https://apex.oracle.com/pls/apex/f?p=40826:

Unknown said...
This comment has been removed by the author.
Anonymous said...

I did exactly as what you had show but why it doesn't have any affect & still same?

Simon said...

Hi Dimitri,

Thanks for all of the useful information on your blog, it's well used and appreciated.

Is it possible to implement the icon and verification tick in a regular 'password' item in a normal region?

I can only make it work if the containing region is 'login' type.

I would like to make it work in a standard region with password items.

Thanks Again.

Arun said...

HI,

How to display our Image in the Icon position of the region?

Dimitri Gielis said...

I created a quick how-to add your own image in this post http://dgielis.blogspot.be/2015/09/custom-image-on-your-apex-app-login-page.html

Nisha said...

Recently i tried migrating my application which was developed in apex 4.0 version to apex 5 and has a lot of customized templates region types. Everything seemed to be working perfectly fine when the compatibility mode was set to Pre 4.1 , 4.2 or even 5. I then tried switching the theme to universal theme , after which the problem started. The layout and grids for the region, tabs and logo image seems to have lost its layout and seems to appear all over the page layout.Please be noted that i have tried using the various grid reset combinations while switching the themes to universal theme. None of the grid reset options seems to help.



I have previously migrated and switched the themes using same steps before this for another application, that was not using any customized templates and only standard theme templates and it seemed to be working fine.i was using the Reset fixed region positions for grid reset while switching theme.

Does anyone face similar issues for applications with customized template application in universal theme switch?



Can you help?

Dimitri Gielis said...

This is common as not all templates can be mapped...
Also Universal Theme differs a lot with other themes, the grid system is completely different.

Nisha said...

thanks alot Dimitri . appreciate it.

Unknown said...

Thank you.

Anonymous said...

Anyone here that could help me about this?

I want the logo to be above the "Utilization Report" label.

Because when trying the solution mention above it is placed beside the username and password field.

Dimitri Gielis said...

Can you create an example on apex.oracle.com?
It's a bit hard to understand what is not working for you.

Anonymous said...

That's great, I've got a tabbed region so a user can register too. When loading, the tabs show up as vertically positioned regions before the js turns them into tabs. It looks terrible so wondered if there was a way of sorting that out please?
Thanks
Fred

Prze-Moc said...

Nice... but the icon does not show up.
If I add "#IMAGE_PREFIX#pkgapp_ui/css/5.0#MIN#.css" to Application's User Interface -> Cascading Style Sheets -> File URLs then "app-group-calendar" in Icon CSS Classes works.
Do I need to add sth similar for font Awesome icons to work there?