Tips #4 and #5 from our UI session focusing on buttons, which gives some tips, tricks and best practises for using the button component in Retool - read more on our site.
4. Give Your Users Feedback Using Event Handlers
Perhaps something that is overlooked within Retool apps is the indication to the user that an action, query or the like has been successful (or even unsuccessful). Good UI means giving your users a response to the actions if the results are not clear and immediate (such as data changing in a table - which may be obvious enough).
There are a few ways you can do this:
- When you have submitted or saved changes within a modal, a simple trick is to set the modal to close upon success to indicate that the action has been completed. You can also use a form component, which will clear upon success, to show the successful submission. Here is how to close your modal on success by using an event handler in your ‘Submit Changes’ button:
- For another simple success indication, use confetti - everybody loves confetti! (And digital confetti requires no clean up). You can do this in the event handlers of your button (on click) or in your query (on success) like so:
- Another great option, which also allows you to add text explanation for specificity is the event handler option ‘Show Notification’, which you can set to appear for Success or Failure and change the message accordingly for the user. Here is an example for our ‘Delete Product’ query:
- Upon success, you would see this notification, which simply helps the user to know what has taken place and that their action has been successful, but will also indicate what exactly has happened in case of a mistake - to give the user the chance to rectify this:
5. Avoiding Mistakes: Disable Button Options
UI is not only about making processes easier, but also making it harder to make mistakes. Cluttered UI interfaces with button overload make it just as easy to click ‘Delete Client’ as ‘Create Client’ - and therefore creates space for big problems.
There are a couple of validation options within Retool to avoid these kinds of mistakes and these are great to implement in apps, particularly when the actions are risky and need extra layers of verification.
The easiest option is adding a validation within your query, which you can do in your query settings as below:
This simply creates an extra step between clicking a button and performing an action, which avoids risky mis-clicks.
Another way to avoid accidental clicks is to add a simple Captcha-style task, such as our ‘type YES to verify’ option here:
Since the ‘Send’ button here will allow someone to email a client, we want to double-check that the app user is sure they are ready to send. One step was by adding a simple alert message to get their attention (the alert component), and the other is by using a text input component which enables the button.
To make this work, simply add the following reference to the ‘Disable When’ section of the button component:
This means that unless the text input contains the string ‘YES’, the action will not be clickable, and adds an extra degree of separation between the user and that accidental ‘hit send’.
Another handy option to avoid these critical mistakes would be to disable the buttons for certain user groups who do not need access to these actions. You can do this by adding user permissions in your Retool settings and adding a ternary like this to your ‘Disable When’, which only enables a button if the current user is in the ‘Managers’ group.
{{!current_user.groups.map(group => group.name).includes('Managers')}}
Read the full post here.