Ever wanted to build a page with a lot of Javascript functionalities but you don't have a clue how to write Javascript? Betty Blocks solves this issue by releasing the UI actions.
In this article, we are going to show you what they are and how to use them.

What are UI actions

By selecting UI actions on your components, you can create dynamic events on web pages for example, if you want to click a button and have a pop-up appear where you can fill in your email to receive a newsletter.
To make this happen previously you would have to write a Javascript to make something appear on the click, and Javascript would point to the element that should show up. Now you can simply use a UI action to select when and what should happen.

How to use UI actions

You can add a UI action to any UI component you want, even the custom one! To check this feature out you can go to the events page of your component and select:
+New event.  

 After you click on the + New event button a new menu will appear. As you can see in the image below there are multiple options.

Now the magic is going to happen: When you click on Select UI Action... you can select what is going to happen when the action is triggered. For instance, when you select the show component option you can let other components appear with a single click! 

Next we are going to choose when this should happen. Everyone knows you can click to make dynamic events happen but did you also know you can select a lot more? Click on More... to see the full list of events!

All these events can be the trigger that your action will start. If you can't find the right event in this list, you can create a custom trigger event...
When you select Custom event option you can use javascript event listeners to customize your UI action trigger.

That's it! You have just created a UI Action, now a whole new world is going to open for you. The only limit is your imagination. 

Did this answer your question?