Customize the APEX Workspace Login Page

One nagging thing about APEX occurs often to me. It’s the inability to customize the Workspace Login Page.

In APEX Instances within corporations you may want to display your own Logo or some custom text explaining your developers what to do and what not.

Some lines of javascript and jQuery to the rescue, i build a nice little function which is super easy to call and gives you full flexibility to customize the Workspace Login Page.

Many thanks to Chris for testing and reviewing the function and some important hints on how to improve my code!

This is what the Login Page per Default looks like:

After calling the new function the Login Page looks much nicer (notice the missing 3 regions at the bottom):

Looks way better, doesn’t it?

Now the most important part, here is all the code you need to get it running on your instance, you put this code in the “Login Message” which is defined in the Apex Administration panel under “Manage Instance”:

<script type="text/javascript" src="http://apexlib.oracleapex.info/ApexLib_Loginpage.js"></script>
<script type="text/javascript">
apexlib.loginpage.customizeLoginPage
( "click-click IT Solutions"
, "1.8em"
, "Welcome to the APEX Hosting Instance of <a href='http://www.click-click.at' target='_blank'>click-click IT Solutions</a>.<br />If you don't have a login please contact the Administrator to get one.<br /><br />Have a nice day!"
, "http://www.click-click.at/wp-content/themes/click/images/clickclick_logo.gif"
, "http://www.click-click.at"
, false
, false
, false
, false);
</script>

You can hotlink the new ApexLib_Loginpage.js directly from http://apexlib.oracleapex.info, or you download a local copy from the ApexLib Sourceforge SVN.

Taking a look at the function declaration should explain the options:

apexlib.loginpage.customizeLoginPage = function
( pLoginRegionTitle          // string to be displayed in the region header
, pLoginRegionTitleFontSize  // font-size for the region title, should include em or px
, pLoginRegionText           // replaces the explanation text inside the login-region, can include HTML
, pLoginRegionLogoImage      // URL pointing to an image with max size 240x200px
, pLinkLogoToHref            // when user clicks the new Logo, this URL will be opened
, pShowLoginMessageRegion    // true/false: show the Login Message Region (the yellow one)
, pShowWorkspaceRegion       // true/false: show the Workspace Region
, pShowGettingStartedRegion  // true/false: show the Getting Started Region
, pShowCommunityRegion       // true/false: show the Community Region
)

19 thoughts on “Customize the APEX Workspace Login Page

  1. Thank you very much for the details.
    This makes our environments much more recognizable!
    Again…thx.

  2. Peter,

    This is really very slick. One feature I’d love to have, though I’m not sure how feasible it is, would be to change the workspace selector to a drop-down list. Do you think this is possible?

    -David

  3. This is nice. but any body know how to place two regions or two sub regions besides each other …
    By default it is placed down after….

    Like let us say you have two column in an web site, and two of them are actually showing output from two different table…….

  4. Hi Soumen,

    don’t know how your question is related to the Workspace Login Screen.

    Anyways: in the Region settings you can set the “Column” where you want to display your region. This way you can put one Region in Column 1, the next Region in Column 2 and both will appear next to each other.

  5. Pingback: OraExplorer » Customize/Personalize Oracle APEX Workspace Environment

  6. It looks good, but how can i create a form for a password reset?

  7. Hi,
    Am new to Apex,
    How can I create the login page for my application?
    kindly tel me.

    Thank you,

    with regards,
    gurujothi.D

  8. Hi gurujothi,

    this topic is about the Login to the Development Area (the so called “Application Builder”). It’s not the Login of your Application.

  9. Hi Peter,
    Thank you for response, I understood, Am working as a Apex developer,
    SO I need to create one application which has planned to have one login page for my users,
    when they enter there username and password it should be redirected to next page , there the user can enter the details,Kindly tel me How can i create the login page for my application,I installed Apex 4.0
    Thank you.

  10. This is awesome. I want to alter size of my logo. Using html I am not able to do that. So Is that any other trick to do that??
    Please Reply
    Thank You.

  11. Hi,
    how can i localy install and use ApexLib_Loginpage.js with an EPG implementation?
    Thanks

  12. Hi Peter,

    is it possible to install and run ApexLib and ApexLib_Loginpage.js on a local server which runs with EPG.
    How to process in order to do this?
    Thanks,

    Mathieu

  13. Hi,

    it doesn’t work with APEX 5.
    Is there a new package for this version?

Leave a Reply

Your email address will not be published. Required fields are marked *