APEX 5 Login Screen

July 23, 2015 at 11:48 am | Posted in Oracle Developement | 4 Comments
Tags: , , , ,

The login screens of some of the APEX 5 sample applications have a nice look and include a check mark when you enter text into the username/password fields. This article will demonstrate how to create your own login page to look like that of some of the sample applications.

Edit your Login page (101):

  • Change login region template to Login.
  • Changes to Username and Password fields:
    • Change Template to Hidden.
    • Change Value Placehoder to Username / Password respectively.
    • Change Value Required to Yes.
    • Change CSS classes:
      • Username: icon-login-username
      • Password: icon-login-password
    • Change Post Text for username and password to
      <span class=”t-Login-iconValidation a-Icon icon-check”></span>.
  • Change the Login button Button Position to Next.

Save the changes and run the page. The result should look like this:

login1

To can add one of the application icons from the the packaged applications select on of the icons my previous blog post and make the following changes:

Navigate to Edit Application Definition -> User Interface, and edit the interface for your application.

Edit User Interface

Under Cascading Style Sheets add the this CSS file: #IMAGE_PREFIX#pkgapp_ui/css/5.0#MIN#.css

Add CSS file

On the Login page (101) click the Log In region and add the name of the icon class to Icon CSS Classes:

css

Save and run the log in page. It should look something like this:

login2

Advertisements

4 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Hi Chrsitoph, thanks for your valuable inputs, however, i couldn’t able to find few steps mentioned above:
    Change Value Placehoder to Username / Password respectively.
    Change Value Required to Yes.
    Change Post Text for username and password to
    .

    and finally Change the Login button Button Position to Next. in Edit Page of 101.

    As i have mentioned earlier, i am new to Oracle Apex, could you please suggest how to start with and learn, provide some authors to read. I have Understand Oracle Application Express 5.

    Regards
    Satish Vemuri

  2. Hi Christoph, Finally i have found the values in Shared Components view. Please help me on how to set background image to set full screen in login page. I was able to do it in 4.2 version.

    Regards
    Satish Vemuri

  3. Hey the green images aren’t displaying next to the items, what have i done wrong?

    • You probably didn’t edit the Post Text properties of the fields.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Entries and comments feeds.

%d bloggers like this: