You could start using a nanoflow, which runs client side. If you can perform all the actions you need in the nanoflow you are done directly. If you need to retrieve database from the (online) database, then you could opt for checking connection in the Nanoflow, if connected continue and call a microflow as sub microflow from the nanoflow. Otherwise terminate the nanoflow and inform user that there is no connection.
Hi Naomichi,
Can you detect the connection? Then you might be able to evaluate that in the OnChange in a split, and use a context object (non persistant preferably) that is on the highest layer of your page, and refresh that.
To clientside detect if the client is connected or not, you can create your own connection-detection-javascript, add an HTML-widget to your page add that javascript to the HTML-widget. Trigger it at the moment of opening the page and based on the result add a class to a container and use css to alert the user and disable the dropdown.
Still with me? Then you will be wondering what the javascript should look like. See this stackoverflow answer:
window.addEventListener('online', () => console.log('came online'));
window.addEventListener('offline', () => console.log('came offline'));
This would also be a good addition to the Mx8 module NanoflowCommons
Fiddling around with it I first added a container around the connection-dependant items and gave it a class ‘myContainer’. Then I added this
mx.addOnLoad(function () {
if ($('.myContainer').length) {
var MyContainer = $('.myContainer')[0];
window.addEventListener('online', () => cameOnline());
window.addEventListener('offline', () => wentOffline());
function cameOnline() {
MyContainer.className = "myContainer isConnected";
}
function wentOffline() {
MyContainer.className = "myContainer isNotConnected";
}
(navigator.onLine?cameOnline():wentOffline());
} else {
console.log('The mx.addOnLoad script in the html-snippet on page xyz does nothing because no Dom element with class myContainer is present on page xyz.')
}
});
... to this HTML-widget:
... resulting in myContainer getting an aditional class isNotConnected at the splitsecond the connection is lost. As soon as the connection is recovered, the class is replaced by isConnected.
Now it is up to you how to modify your page to make the dropdown readonly. One option is to use an overlay. Another, my preference, to add some styling to your project, showing and hiding whatever your need shown or hidden:
.isConnected{
background-color: $brand-success;
.online{
display: inline;
}
.offline{
display: none;
}
}
.isNotConnected{
background-color: $brand-warning;
.online{
display: none;
}
.offline{
display: inline;
}
.form-group {
display: none;
}
}
I added this to my homepage on https://mydemoversion7-sandbox.mxapps.io/. The text “This is myContainer having internetconnection. class 'online'” and the input box Somestring change upone losing connection. You can try it by setting you network to flightmode and back.
Was great fun to create this :-)