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?
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.
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:
This will make the message more visible to your users. Just like this:
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:
Then the new imported app from DEV will retain its display:none tag.
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:
