If you are wanting to make significant changes to your Community which require both changes in the admin console and via the Community “Customize” button, you cannot do this in offline mode. Therefore you cannot make these changes without users being able to see incremental changes. This isn’t ideal for some situations. There needs to be an option to allow admins to customise the Community user interface (widgets, CSS, etc) while the Community is offline.
There are some areas where the UI is easier to edit directly, but the changes can be made via the admin console (phrases for example). But there are some things you can only do via the “Customize” button in the UI (widgets, etc).
I have got around this by using this code in the “Insert in <HEAD>” section of the “Third-party Scripts”….
<style>
body{ display:none;}
</style>
<script>
//Maintenance Screen
let useMaintenance = false; // Set to true for the maintenance window and false for the normal screen.
if(useMaintenance){
document.addEventListener('DOMContentLoaded', function() {
// Check if the current user is an admin
var isAdmin = checkIfAdmin();
if (!isAdmin) {
// Prevent default page load and display maintenance message for non-admin users
document.body.innerHTML = '<div style="text-align:center; padding-top: 20%;"><h2>Maintenance Message</h2></div>';
}
});
}
// A simple check using the inSidedData JSON to see if the user is an admin
function checkIfAdmin() {
if(inSidedData.user.role === 'roles.administrator'){
return true;
}else{
return false;
}
}
</script>
All this does is switch off the body from displaying...this prevents the page being seen at all, otherwise you can see a glimpse of the page before your code rewrites the body object. It then checks to see if the maintenance window is required. If it is required, it checks to see the role of the user. If the user is an admin, it loads normally. If the user is not an admin, it will display a maintenance message.
There is one more change that is required, this is to switch the body back on. To do this, go to the “Before </Body>” section and add this code….
<script>
//Switch on the body display
document.body.style.display = 'block';
</script>I hope this helps.
