Oracle Application Express has a built-in Global Notification functionality you can use to inform your users about various things, such as a new release or scheduled maintenance. However, the default message just doesn’t look very good and sticks out like a sore thumb in an otherwise nice theme. How to make it fit a little bit better? Here’s a solution from an experienced APEX developer and an Oracle ACE.
Imagine you’ve just got your Production Application up and running. Doesn’t it look sweet with that new theme? However, the work isn’t done yet – you need to squeeze another release in, but you want to make sure you inform your users that an upgrade will be occurring soon, just in case of a hiccup. How to do that in a way that doesn’t ruin the looks?
The problem – what we’re trying to avoid
If we look under Shared Components > Edit Application Definition > Global Notification, we have exactly the correct place to add a message
When you Apply the Changes and run, it technically works, the users are informed, but it kind of ruined my theme.
APEX Global Notification messages done the right way
Luckily Global Notification accepts HTML, so we can provide a better-looking text (based on the Alert Template).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class=“row”>
<div class=“col col-12 apex-col-auto”>
<div class=“t-Alert t-Region–stacked t-Alert–colorBG t-Alert–horizontal t-Alert–defaultIcons t-Alert–info t-Alert–accessibleHeading t-Form–noPadding”>
<div class=“t-Alert-wrap”>
<div class=“t-Alert-icon”> <span class=“t-Icon “></span> </div>
<div class=“t-Alert-content”>
<div class=“t-Alert-header”>
<h2 class=“t-Alert-title”>System Maintenance</h2>
</div>
<div class=“t-Alert-body”>Please be aware the system will be unavailable between 15:00 and 15:15</div>
</div>
<div class=“t-Alert-buttons”></div>
</div>
</div>
</div>
</div>
|
And when we run the page, it looks like this:
It’s worth noting you can also change the t-Alert–info class to t-Alert–warning if you want to change it to an orange triangle.
You can even remove the classes:
- t-Alert–accessibleHeading
- t-Form—noPadding
This will make the message more visible to your users. Just like this:
Don’t lose sight of that HTML fragment!
One last thing…
Since you now have an HTML fragment that you added to PROD, when you export/import the new application from DEV it will wipe out the Global Notification, and the message along with it, as is expected.
However, the next time you plan a release, where are you going to find that fragment of HTML again? Well, you are welcome to bookmark this blog to get another copy, but you can also do what I did – add it to DEV with a style=”display:none” tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class=“row” style=“display:none”>
<div class=“col col-12 apex-col-auto”>
<div class=“t-Alert t-Region–stacked t-Alert–colorBG t-Alert–horizontal t-Alert–defaultIcons t-Alert–info t-Alert–accessibleHeading t-Form–noPadding”>
<div class=“t-Alert-wrap”>
<div class=“t-Alert-icon”> <span class=“t-Icon “></span> </div>
<div class=“t-Alert-content”>
<div class=“t-Alert-header”>
<h2 class=“t-Alert-title”>System Maintenance</h2>
</div>
<div class=“t-Alert-body”>Please be aware the system will be unavailable between 15:00 and 15:15</div>
</div>
<div class=“t-Alert-buttons”></div>
</div>
</div>
</div>
</div>
|
Technically this is rendered on all pages, however, due to the style tag, the message does not display.
So all you need to do on PROD before a release is:
- Remove the style tag.
- Change the unavailability message to suit your release slot.
Then the new imported app from DEV will retain its display:none tag.
Don’t give up on your theme
And that’s it – we’re done. That was really easy, wasn’t it? Hopefully, these few simple steps will help you stylise your System Maintenance messages a little bit better, and therefore allow you to preserve your application’s visual theme. Remember you can always bookmark this page and copy the code samples, whenever you’ll need them. For more information on APEX check out the other articles on the Pretius blog:
- How to integrate Stripe with an Oracle APEX application: Step-by-step guide
- Oracle APEX new features – the low-code platform keeps evolving
- Google Identity Services – a quick guide on using the new library in Oracle APEX applications
- What is Oracle APEX? Possibilities and career paths for low-code developers