Customising Workspace Login

Ever logged in to an APEX Workspace using a page that looked like this…?

Well this is the login page now presented to me when I log in to my local version of APEX running on a Docker instance of my laptop. But why would I do such a thing? And what’s the purpose of the pineapples? The pineapples only demonstrate that is possible to modify the APEX Workspace login page through CSS (in this case) and therefore you can modify layout objects such as the background images or colours to emphasise which environment you are logging in to.

For example, a Green background for development and a Red environment dotted with warning triangles for production (although you’d be most likely using a Runtime installation for Production) .

So how have I done it?

• Browser Extension – No
• A custom version of APEX page designer – Nah
• A trick using chrome developer tools – Nope

To customise the workspace login page; log in to the INTERNAL workspace and head over to Manage Instance > Messages > Define Login Message

This allows you to add a message which then appears on Workspace Login Page. For example, if I type in Matt’s Local Docker Instance, then I see…

However, because the Define Login Message box supports full HTML content which is then rendered on the Workspace Login Page… then this is where to magic happens.

You can customise the login page by editing the Define Login Message box and adding <STYLE> tags (for CSS) and <SCRIPT> tags (for JS) which will then render on the page.

Here are two simple examples of the Development/Green and Production/Red themes I created in a few minutes. Don’t worry, all these themes are downloadable at the end of this blog.

Going a step further, we’ll experiment with JavaScript. The next picture shows the APEX Version, Authentication Scheme and a little Workspace selector menu I have created where I have listed all the available workspaces.

I then use a little bit of JavaScript to auto-populate the Workspace field whenever the user clicks on a row from the table. This then places the focus in the username field ready for the developer to complete the authentication process.

$(document).ready(function(){
  $(".ws_list_item").click(function(){
      var selectedWS =$(this).text();
      $("#F4550_P1_COMPANY").val(selectedWS);
      $("#F4550_P1_USERNAME").focus()
   })
})

Whilst massively convenient to select from a table, the only downside of this approach is that I don’t have a connection to the server and therefore this message is static and cannot dynamically adapt. For example, if I were ever to upgrade APEX, change the authentication or add a workspace then the Define Login Message will need to be manually updated or even… scripted.

The workspace selector table above is what we typically have at Explorer since we have dozens of APEX Instances, hundreds of workspaces and all sorts of Workspace Authentication Schemes. We also have a development team which works on these environments; each with a unique login. On this scale, we script the Instance configuration, which contains several settings to customise the Instance to a configuration which suits our needs. This includes a fetch of the active workspaces and generation of the table above. All this is set within the Login Message.

A final observation is that the Login Message Box is limited to 4000 characters. This is fine for the themes described in this blog, however the Workspace Table approach would max out at about 20 rows. Therefore, we typically show to most recent ones at the top of the table and add a message in the final row, typically ‘…and x more workspaces’.

Here are the themes:

• Pineapples.txt
• Green-Development.txt
• Red-Production.txt
• WS_listing.txt

I’m expecting you all to tweet screenshots of your Workspace Login screens now. I’d love to see what you come up with. Here are some ideas…

• Your company logo as a background image
• APEX 19.1 style Dark Mode
• Replace the Workspace Text Item with a Select List
• Animated backgrounds
• DVD Bouncing Logo – only joking!

Author: Matt Mulvaney

Job Title: Senior Oracle APEX Development Consultant

Bio: Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.