How to start using Control Events in DronaHQ

The basic difference between a good application and a great application is attention to detail. Putting efforts to make the smallest events in the application can help  –

1. Tracking events & activities
2. Triggering powerful actions when these events occur
3. Provide an overall better User Experience

Typically, If you’re building a web-based application on javascript, you would use event handling classes for common events like onclick, keydown, onload and others. If you’re building an android application you might be using event listeners to handle similar use-cases. But what about when working with no-code/low-code platforms?

DronaHQ provides a quick & robust way to listen and handle action events in your app. There are many different types of events that can occur. For example:

• The user selects a certain value from selection options
• The user enters some value
• The user closes the app screen
• A web page finishes loading.
• A form is submitted.
• An error occurs.

Each event in DronaHQ can be customized and individually set up. Click here for a complete tutorial showcasing how to configure these event handlers and utilize them like a pro!  Let’s now take a look at how to add these event handlers to your low code app, and then look at some input control and screen events, and how to make the most out of them to manage all your event-handling needs.

How to add events handlers to your low code app

In DronaHQ, adding control events couldn’t have been easier! Just click on the control for which you want to add an event for, and click on the lightning bolt symbol on the right sidebar. This will show you a list of all available events for the control you have selected. Click once again on the event you want to configure and you’ll be greeted with the familiar action flow interface. Everything you can do in a normal action flow can be done here! In case you aren’t aware of action flows or want to learn more about them, click here.

Adding Custom Events

So what are the available events you can configure? Read on for a list of all supported event handlers and how you can utilize them in your app. To better understand & appreciate the power of these events, I’ve built a sample Inventory Dashboard app using which I’ll show you how I utilized these events to create an amazing User Experience! The app contains two pages – A dashboard to view statistics about your inventory and a product re-order form.

Sample Dashboard

Sample Product Re-order Form

Input Control Events

Input Control Events allow you to set up event listeners and handle them in any input control. These are applicable to controls like dropdowns, text fields, OTPs or any other control which involve some sort of an input mechanism. Currently the following input control events are supported in DronaHQ

• Value Change Event
• Focus Out Event
• Enter Press Event
• Value Select Event

The Value Change Event

This is a handy event for whenever you want to trigger a particular action based on some value! For instance, I might want to trigger an action whenever an order above a certain quantity is placed. So what I did was I created an action flow in my value_change event of the quantity control to notify the manager whenever a bulk order is placed (Qty > 500) so that he/she can approve and take action accordingly. Again, since the interface is the same as the action flow interface, you can perform all sorts of powerful tasks like sending emails, querying your database and much more!

Value Change Event to Notify Manager

The Focus Out Control Event

This Event triggers whenever you move the focus out of a particular control. If you’re confused about the whole “move out of focus”, it’s when you click somewhere else outside of a particular control. So how can you utilise such a functionality? I used the focus control action to change the focus to the “Place Order” button whenever the User comes out of focus from the “Quantity” Control. That’s a lot of “focus”, but what does this actually do? Whenever the user sets/changes the quantity and clicks elsewhere, the form auto-magically scrolls down and sets the screen to the place order button, so that the user can easily complete his/her order. Awesome right? I’m sure you can find more creative ways to use this custom event!

Focus Out Event to Shift Focus

The Enter Press Control Event

This is yet another event that can be super useful if utilised correctly! This event can trigger an action whenever the user presses enter on a certain control. The first use-case that popped in my mind was to verify passwords & OTPs using this event. Pressing enter after typing a password is a natural & faster reaction rather than using the mouse to click submit. Now you can enable this easily using the event, and that’s exactly what I did!

Enter Press Event to Verify OTP

The Value Select Control Event

This event is triggered when a particular value is selected from a selection control. It can be configured for all selection controls like Dropdowns, Image Select, Select Bars and many more. In my Inventory Dashboard use-case, I added a drop down for what type of item does the user want to order, A Limited Edition one or A Regular One? Based on this choice, I can now take some custom actions if the user decides to order a limited edition shirt. For example, I can open a custom URL containing more details on the product, I can query my database to see if there is stock before confirming the purchase, or I can send a personalised thank you mail if the user decides to order a limited edition shirt. The possibilities, as always, are limitless! 

Value Select Event to Change Price

Screen Events

The Screen Open Control Event

As the name suggests, this event is triggered whenever the screen is opened. There are several useful applications for this. For example, whenever a screen opens, you might want to set some default values in some controls which can be done using this. This is what I did in my app, I set the default re-order quantity to 100 whenever the screen is opened. Other use-cases I can think of include displaying a terms & conditions pop-up as soon as the screen opens, or querying databases and displaying only the items that are in stock rather than all items as soon as the screen opens!

Screen Open Event to set Defaults

The Screen Close Control Event

This is the counter of the screen open event – the screen close event. One way I used the screen close event was to update order status in my internal MongoDB database whenever the user closes the success popup after placing an order! (Yes popups are also screens!). You can similarly add your own custom actions to be triggered whenever these events are called.

Screen Close Event to Update Order

Wrapping Up…

That’s all of them! Why don’t you try out these control events to make your application much more interactive? Check out DronaHQ today to build robust applications blazingly fast!