Creating complex screens with Mendix which are user and keyboard friendly

If you have worked with the Mendix application, you are probably familiar with users requesting for more keyboard friendliness. In the end, keyboard friendliness is about usability and therefore extremely important.

In this post I will describe how we created a very (keyboard) friendly screen for a application for one of our customers.

The case

The case is about heavy users who want to add invoices into the applications in a very fast way without using the mouse, unnecessary tabs, having to scroll down, ect. From my experience I can tell that this is pretty hard to realize in complex dynamic screens in Mendix (editable listviews, conditional grids, etc.). Nevertheless with the help of a few awesome widgets and a lot of trial and error I managed to get it working.

Old behaviour (standard Mendix)

From the video you can see the following problems:

1. Initial focus is not on the first input field but somewhere in the navigation.
2. Tabbing through fields includes several buttons which are not so relevant for the heavy users.
3. When clicking in the auto completion reference selector it doesn’t automatically select the content.
4. When changing fields in the editable list view which have a on change microflow connected the whole list grid is refreshed. I lose the focus and I have to use the mouse.
5. When adding multiple rows I have to scroll down each time to see my entire screen. Added rows are not directly visible.
6. When adding a new row to the listview I’ll also lose the focus.
7. Finally I have to use the mouse to save and open the next invoice booking

Some of these points are likely details for you, but don’t under estimate the win you can get in usability when solving all these issues. We did that and I will extensively describe it for you.

The solution

Problem 1: Initial focus is not on the first input field but somewhere in the navigation. Solution: Normally you can set tab index to -1. But for the navigation that’s not possible. Therefore, we used the Attribute Setter widget from Appronto. This gives the ability to select elements and change an attribute property on the fly.  This is a very powerful widget which can be used for a lot of cases as you will see with the other problems. Below a screenshot of the configuration.

Problem 2: Tabbing through fields includes several buttons which are not so relevant for the heavy user.

Solution: This can mainly be fixed by setting tab-index to -1 on the widgets which you don’t want to include in the tab flow. Furthermore, we used the Attribute Setter to change some more fields to -1

Problem 3: When clicking in the auto completion reference selector it doesn’t directly select.

For normal input fields this is what you want, but for reference selectors you want to directly select all. Solution: We used the attribute setter widget to connect the onclick event of the input reference selector to the JavaScript this.select() function.

Problem 4: When changing fields in the editable list view which have an on change microflow connected, the whole list grid is refreshed

Solution: This was the hardest problem and we had to restructure the screen completely. Basically the problem lies with the Mendix listview. Whenever changing something, the whole grid is refreshed. So instead of  just an editable listview we created a dataview below the grid which looks like just another row. This dataview has the function to add new rows. As we don’t want to confuse users with a default extra row to add new rows, we preload the dataview with the last row or the list view and filtered this last row from the listview. Now we can add records from a dataview which doesn’t have losing focus problems, because that’s a problem with the Listview widget.

Problem 5: When adding multiple rows, I have to scroll down each time so see my entire screen.

Added rows are not directly visible. This is very annoying and users have to scroll down each time. Solution: Used the Attribute Setter to connect to the onclick event of the “Regel toevoegen” (which means: add row) to scroll down. Unfortunately we can’t scroll down directly on click, because the row has to be added first otherwise we scroll directly down and the row will be added after that, which will have no effect. So we have to build a bit more complex JavaScript in the attribute setter which uses a little time-out. setTimeout(function(){var mainDiv = dojo.query(“.main .mx-layoutcontainer-wrapper”)[0]; mainDiv.scrollTop = mainDiv.scrollHeight;},1000); See also the next problem for more details.

Problem 6: When adding a new row to the listview I lose the focus.

This problem also applies to the new situation with the dataview for adding rows instead of the listview. What we want is to refocus on the first field of the dataview after the button is hit. Solution: We tried to connect the Attribute Setter to the onclick event of the button. But since this is a standard button this extra onclick event handler is ignored. This probably is a bug in Mendix but we have no time to wait for a solution. Therefore, we worked around this one.

1. Create a button yourself with the formatstring widget: <button  type=”button”>Regel toevoegen</button>
2. Connect the Attribute setter to this homemade button and let the Attribute Setter ‘click’ the Mendix button. We don’t want the buttons on the screen. I removed the default button with display:none CSS. The code to use in the Attribute Setter which is connected to the onclick of the format string (combined with the code of problem 5):

dojo.query(“.addRegel”)[0].click(); dojo.query(“.GBRekeningInvoerVeld input”)[2].select(); setTimeout(function(){var mainDiv = dojo.query(“.main .mx-layoutcontainer-wrapper”)[0]; mainDiv.scrollTop = mainDiv.scrollHeight;},1000);

This code does the following:

• Select the Mendix button and fire the click event
• Select the first field of the dataview again
• Scroll down after timeout of 2 seconds to make sure the new row is added before scrolling

Sidestep: This worked great but we found a really weird timing problem which wasn’t consistently reproducible in certain browsers. In the end we conclude that this was a timing issue. When changing field x and directly click on a button (without tabbing out the field) the sequence of requests of the client so the server may not be right. What you want is that the client first make the change known (xas/change) so that the microflow that executes after the button click has the right, updated, data. When working really fast Mendix has this caching problem where the microflow accesses the old data. Therefore, we had to build a little sleep in the microflow.. Really hacky but it works great now .

Problem 7: Finally I have to use the mouse to save and open the next invoice booking Solution: using the key manager widget to connect shortcuts to buttons. Works really great.

Conclusion

Creating this kind of complex screens and letting them behave very well for keyboards users was a big pain. I, and my colleagues involved, learned a lot and the next time it probably won’t cost days to create a screen like this and debug weird (timing) issues. I’ll file my recommendations to Mendix as well so that some issues will hopefully not occur in the future. The main suggestions there are:

• not refreshing the whole listview but just the updated record(s)
• fixing the onchange + microflow button timing issues.

You’ll probably agree that this is on the very edge of the Mendix default possibilities and I had to use several widgets and hacks to get this working. A very powerful one for me was the Attribute Setter which will be in the app store very soon for free. Furthermore, a key thing was to combine the Listview with a dataview instead of just the Listview. So the question: is creating keyboard/user friendly, complex and dynamic screens possible within Mendix? Definitely a yes with some experience, and I hope that my blog post will give you a kick start whenever your end users start complaining. To close: we get a lot of very positive feedback from the end users. Although these are very technical enhancements to the screen, this is what end users will call users friendliness.