Wednesday, 27 February 2013

Modifying APEX Workspace login page

Many APEX developers would love to customise the first thing they see when logging in each day - the workspace login page.

Peter Raganitsch has done some awesome things for the APEX community, and one of them was to provide a script that can spruce up this page.

Trouble is, the APEX development team keep changing the look and feel of the environment, stuffing up training manuals world-wide ;-)
Edit - Peter informs me he has updated his version, I can't remember why I couldn't see it at the time.

By default, the APEX 4.1 login looked like this
APEX 4.1 Workspace Login
 And 4.2 looks like this
APEX 4.2 Workspace Login
Last time I checked, Peter's version hasn't been modified to suit the latest version so I thought I'd tackle this myself and add some improvements of my own - partially to enable some font color changes between environments.

Or just allowing me to put SAGE green in this example, complete with stretched logo. Lucky I thought too late to put a green pig instead.
Customised for SAGE
Here is some sample code you need to add in the APEX Administration (INTERNAL), under Manage Instance -> Login message.
<script src="/i/themes/theme_sage/custom/ApexLib_Loginpage.js" type="text/javascript"></script>
<script type="text/javascript">
apexlib.loginpage.customizeLoginPage
( "SAGE Computing Services"
, "1.5em"
, "darkgreen"
, "Isn't this brilliant?"
, "/i/sage.gif"
, "http://sagecomputing.com.au"
, false
, false
, false
, false
, false
, false);
</script>
And here is the ApexLib_Loginpage.js script with my modifications
//==============================================================================
//  PROJECT: ApexLib - The APEX Library (http://apexlib.soureforge.net/ )
//
//  DESCRIPTION:
//
//    This JavaScript library contains helpful functions used to
//    customize the APEX Workspace Login Page.
//
//  SUPPORTED APEX VERSIONS:
//
//    4.2
//
//  REFERENCED OTHER LIBRARIES:
//
//  AUTHOR(S):
//
//    Original: Peter Raganitsch (http://www.oracle-and-apex.com/ )
//
//    Update for APEX 4.2: Scott Wesley (http://grassroots-oracle.com/ )
//
//  SVN HEADER:
//
//    $Id: $
//
//==============================================================================

//==============================================================================
// Initialize the namespace for ApexLib.
//==============================================================================
if (!window.apexlib)    window.apexlib    = {};
if (!apexlib.loginpage) apexlib.loginpage = {};

//==============================================================================
// Global variables used by most of the functions.
//==============================================================================
apexlib.loginpage.sVersion = "1.0";

//==============================================================================
// used in the "Login Message" to customize the APEX Workspace Login Page
//==============================================================================
apexlib.loginpage._customizeLoginPage = function
  ( pLoginRegionTitle
  , pLoginRegionTitleFontSize
   ,pLoginFontColor
  , pLoginRegionText
  , pLoginRegionLogoImage
  , pLinkLogoToHref
  , pShowLoginMessageRegion
  , pShowWorkspaceRegion
  , pShowGettingStartedRegion
  , pShowCommunityRegion
  , pSocialNetworkingRegion
  , pShowOracleBanner
  )
{
  // if user passed a region title we remove the Oracle-Application-Express image
  // and display the given string instead (in the given font size which is 2.2em by default)
  if (pLoginRegionTitle)
  {
    //var vLoginTitle$ = jQuery("img[src$='apex-logo-white.gif']").parent();
    var vLoginTitle$ = jQuery("div.aLoginHeader h1");
    vLoginTitle$.text(pLoginRegionTitle);
    if (pLoginRegionTitleFontSize)
      vLoginTitle$.css("font-size",pLoginRegionTitleFontSize);
    else
      vLoginTitle$.css("font-size","2.2em");
    if (pLoginFontColor)
      vLoginTitle$.css("color",pLoginFontColor);
    else
      vLoginTitle$.css("color","black");
  }

  // identify the big APEX Logo image, this is used to navigate inside the login region
  var vLoginRegionLogoImage$ = jQuery("img[src$='apex-db-apps.png']");

  // shall we replace the default explanation text below the login-button?
  if (pLoginRegionText)
  {
    //vLoginRegionLogoImage$.parents(".rc-content-login").children("div").eq("3").children("div").html(pLoginRegionText);
    var loginText$ = jQuery("div.aLoginIcon p");
    loginText$.html(pLoginRegionText);
  }

  // does user want to display his company logo instead the APEX Logo?
  if (pLoginRegionLogoImage)
  {
    vLoginRegionLogoImage$.attr("src",pLoginRegionLogoImage).removeAttr("width").removeAttr("height");

    // should the logo be a link to a specified address?
    if (pLinkLogoToHref)
    {
      vLoginRegionLogoImage$.wrap("<a href='"+pLinkLogoToHref+"' target='_blank'></a>");
    }
  }

  // if user doesn't want to show the Login-Message-Region we hide it (display:none)
  if (pShowLoginMessageRegion === false)
  {
    //jQuery(".htmldbBodyMargin").children("div").eq(1).children("div").eq(1).css("display","none");  // APEX 4.1

    // APEX 4.2 remove yellow notice
    jQuery(".notice").css("display","none");
  }

  // if user doesn't want to show the Workspace Region we hide it (display:none)
  if (pShowWorkspaceRegion === false)
  {
    //jQuery("a[href^='f?p=4550:7:']").parents(".rounded-corner-region").css("display","none");  // APEX 4.1
    jQuery("a[href^='f?p=4550:7:']").parents(".borderlessRegion").css("display","none");         // APEX 4.2
  }

  // if user doesn't want to show the Getting Started Region we hide it (display:none)
  if (pShowGettingStartedRegion === false)
  {
    //jQuery("a[href^='f?p=4600:6:']").parents(".rounded-corner-region").css("display","none");
    jQuery("a[href^='f?p=4600:6:']").parents(".borderlessRegion").css("display","none");
  }

  // if user doesn't want to show the Community Region we hide it (display:none)
  if (pShowCommunityRegion === false)
  {
    //jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".rounded-corner-region").css("display","none");
    jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".borderlessRegion").css("display","none");
  }

  // if user doesn't want to show the Social Networking Region we hide it (display:none)
  if (pSocialNetworkingRegion === false)
  {
    //jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".rounded-corner-region").css("display","none");
    jQuery("a[href='http://twitter.com/oracleapexnews']").parents(".socialNetworking").css("display","none");
    //$('.aLoginSubBody socialNetworking').css("display","none");
  }

  // if user doesn't want to show the black Oracle image banner we hide it (display:none)
  if (pShowOracleBanner === false)
  {
    // remove Oracle APEX black banner
    jQuery(".aHeader").css("display","none");
  }

} // apexlib.tool._customizeLoginPage

//==============================================================================
// used in the "Login Message" to customize the APEX Workspace Login Page
//==============================================================================
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
   ,pLoginFontColor            // Color of region title, eg: green for dev, darkorange for test
  , 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
  , pSocialNetworkingRegion    // true/false: show the Social Networking region
  , pShowOracleBanner          // true/false: show the black Oracle image top banner
  )
{
  // make sure, that the whole document (page) is loaded before changing it
  jQuery(document).ready(function(){apexlib.loginpage._customizeLoginPage(pLoginRegionTitle,pLoginRegionTitleFontSize,pLoginFontColor,pLoginRegionText,pLoginRegionLogoImage,pLinkLogoToHref,pShowLoginMessageRegion,pShowWorkspaceRegion,pShowGettingStartedRegion,pShowCommunityRegion,pSocialNetworkingRegion,pShowOracleBanner);});
}
Hopefully blogger doesn't butcher the syntax to make it difficult to copy. Let me know if you have problems, or download the file here.

And thanks again to Peter for the awesome groundwork for this option to add style to your APEX environment.

Scott
Post a Comment