Like promised in Oracle APEX – Tidy Up – Part 1, this blog will be about some pointers how to use your Master Application for custom templating.

Custom templating in a Workspace

It really doesn’t matter if we have one or multiple workspaces, we all want our user interface (UI) to look the same throughout our applications. Most of the time we can simply do with all the templates in the universal theme, plugins apex.world provide us or default APEX components. Sometimes however, it just isn’t enough or you just want something a little different.

Theme & Templates

Let’s say we have a client who want to have a slightly different login screen for all the applications available. The easiest way is to create this page template in your master application, publish it to all your subscribed applications and choose the template on your login page. Done. If there’s something that needs to be changed, we can simply do these changes in our master and in the futere after a publish, all will update and look the same.

Files

Custom files css & javascript for your theme can be uploaded in your theme in the file tab and used by using the #THEME_DB_IMAGES# / #THEME_DB_FILES# substitution. This depends on the version of APEX, but can always be looked up in the ‘Reference’ column;

Reference column in theme files

If you’d like to have a file only included if a certain template is loaded, you can choose between 2 options. First, you can simply add all the javascript and css in the template itself, and use the #TEMPLATE_CSS# for inline css, #TEMPLATE_JAVASCRIPT# for functions and globals in javascript and #GENERATED_JAVASCRIPT# for execute when page load javascript as substitution string in the template.

The second option, preferred when it’s a lot of code, is to upload the file in the Static Workspace Files and include them in your template. If you add the reference #WORKSPACE_FILES# to your file url’s it will load the file when the template is used.

But now, the client also would like a different background picture for each login page, so every application does have it’s own look.. Where do we place the files that aren’t common for all applications? Again, a lot of options, but I wanted to keep things based on my master, so I choose to use the Static Application Files, and included this in the (inline) css of my template in the Master Application;

.my-login {
   background-image: url('#APP_IMAGES#login_back.png');
}

Now, all I had to do is include this class in my template, and make sure each application has a file that’s called login_back.png.

This is really where substitutions strings can do their magic for you!

Related Posts