In designing a good user experience, you want to let your users know when they click on something, that something is going on in the background.
Ideally, this is done as a modal that blocks additional user input until the process is complete to prevent them from clicking repeatedly like a madman causing all sorts of potential woe. Let’s see it in action first:
So for this bezl we wanted to view a list of customers, let a user click on a customer, and retrieve information for that customer.
Now the first loading bezl is built into the system. Any data subscriptions that are not marked on-demand execute when the bezl is first launched. In our instance our first page is built using a data subscription that automatically runs so we can just leave that alone. Here is the structure of my bezl:
So I have 2 pages, the first is our list view built out of an Angular Material list object with a click function calling onClick. GetList is a data subscription that returns our customer list, and GetById is an on-demand data subscription that takes passes the variable CustId into the query to get information about that specific customer.
Let’s take a look at the onClick function:
The first line builds the loading dialog. So we are calling:
bezl.loader.startLoading(‘Loading message…”, 10000);
The 10000 is an automatic timeout period. The default timeout is 60 seconds, but you can change that here. After the timeout it will automatically dismiss, but we will be handling that automatically.
Next is pretty standard bezl building. I set my variable value I am passing in my other datasub, I am calling to process the datasub, and I am opening my details page.
The only other bit of code we need is to dismiss the loader. For that we will open our onDataChange:
Standard stuff here, we are switching on bezl.data.changed so we know what datasub is returning, and when GetById returns we call:
bezl.loader.stopLoading();
Which will dismiss the loader!