Return to top page when connection error occurs

1
Hi all, The OnChange event of the dropdown calls Microflow to change the values of the other input items. If the user's network is unstable and the user is offline at the moment the dropdown is changed, a connection error will occur. In this case, the dropdown value is changed, but the input item that was supposed to be changed by OnChange Microflow remains unchanged. I do not want the user to continue input. Because if they are online at the time of saving afterwards, the data will be saved with invalid values. Therefore, when a connection error is occured, I want the user to return to the top page and start the input again from the beginning. (The top page may not open if the user is still offline, but that's not a problem.) Is there any good way to do this? 
asked
3 answers
2

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.

answered
0

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.

 

answered
0

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 :-)

answered