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
)


  1. Thamires on August 27, 2010

    Its very cool.

    Nice work

  2. Gerben de Vries on September 15, 2010

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

  3. David S. Gale on October 26, 2010

    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

  4. OEGIDIO on November 12, 2010

    Excelente, Gracias, lo estaba necesitando.

  5. Soumen on November 9, 2011

    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…….

  6. Peter Raganitsch on November 9, 2011

    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.

  7. […] Using ApexLib script in the login message (under Manage Instance) as mentioned by Peter in the comment section is another solution for customization. I like this approach as not only you […]

  8. Jeremias on January 12, 2012

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

  9. Gurujothi on March 30, 2012

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

    Thank you,

    with regards,
    gurujothi.D

  10. Peter Raganitsch on March 30, 2012

    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.

  11. Gurujothi on March 30, 2012

    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.

  12. Abhijeet on February 20, 2014

    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.

  13. Peter Raganitsch on February 20, 2014

    I’d suggest you re-size the logo-file accordingly and use that one.

  14. Mathieu on March 28, 2014

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

  15. Mathieu on March 30, 2014

    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

  16. Peter Raganitsch on April 3, 2014

    Sure, just put the file into the images folder in the XML DB, where the EPG is reading from.

  17. Mathieu on April 14, 2014

    Thanks a lot Peter, it works perfectly.

    Here’s a link about how to put the file in the XML DB without using the FTP server :
    http://www.pythian.com/blog/apex-bulk-images-upload-using-epg/

    Best regards,
    Mathieu

  18. Scott Wesley on August 18, 2015

    Have you played with this for APEX 5?

  19. Mathieu on December 1, 2016

    Hi,

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


0