So, you still haven't had enough of the UI actions? Good!
In this chapter, we will explain the 2 custom possibilities to take UI actions go to the next level by writing your own javascript.

If you haven't heard of UI actions before, check out the documentation regarding UI actions here.

Custom UI actions

You can create your own UI actions with the custom UI action option. Here you can directly enter your code in the text box that will appear. Here you can make multiple functions as complex as you like in one event.

Another great function which you can use here is to call functions that are written in javascript templates. (what are javascript templates, and how to add them?)
How do I do that? When you write a function you declare a variable name to it like this: function myFunction ( ) { }. Use the myFunction() in the code block and it will run on the selected event as shown in the example below.

Create new UI action

If you still haven't had enough of all the possibilities within the UI actions, there is one more. This option makes it possible to create your own action which will appear in the same list as the create new UI action.

When you select this option you will notice that some things are changing. You now have 3 ways to build the action, first, we start at the settings.

Here you can create a name and a description to keep it organized for yourself and your colleagues. Next, we have the code screen, here is where you type the magic. You can use javascript to build anything that will run on a single mouse click or other events.

Last but not least we have the arguments tab. What are the arguments? These are the parameters passed through the action into the javascript function.
We have 4 different options for arguments available. These 4 options are:

  • Text
  • Component
  • Code
  • Endpoint

Text - Here you can fill in text which will be passed as a string. For example the text you can enter in here can be compared to the alert message action. The text will be the input for the alert function so the function knows what to print on the screen.

Important note: because the text is wrapped into a string, integers (numbers) will also be seen as a string. If you try to add 2 numbers as strings it will appear as follow: 5 + 5 = 55. This is because the strings are seen as text instead of a number value. If you want the outcome to be correct, in this case 10, you will have to add 2 lines of code in your code block.
For example, if we have 2 arguments called number1 and number2 we need to parse them into integers (numbers). To do so you need to convert the same variable into a different data type.

var number1 = parseInt(number1);
var number2 = parseInt(number2);

After you have done this you can make calculations with the variables!

Component -
This option gives you the possibility to select a component on the page. For example, if you want to show a modal, select the component model and use it in your code to show it.

Code - The code you enter here is also wrapped as a string. The difference between this option and the text option is: You can write something like a function and call it in the UI Action code block inside an Eval( ) function.

Endpoint - This option is still in development. But it will be possible to select an endpoint to use in the function. Think of Ajax calls to receive data from your other endpoints.

When you are done defining the arguments, they will appear as input fields when you select the UI action as seen below. In this example, I gave the input fields a similar variable name to show the differences between the data types.

Now you can use input data into your custom made UI action to use it any way you like.
Fun fact about building your own custom UI action: It will be stored in your own Blocks Store overview after saving it. More about that in the next chapter.

UI actions in the Blocks Store

The worst thing to do is to do the same thing over and over. Should you have to repeat building the same actions? No! The Blocks Store offers you the possibility to save and share your work including the UI actions. I hear you asking yourself, "Will it be possible for my colleague to use the action I just created while he is building a page on his own account?" Oh yes it will be, in fact you can share it with everyone in your organization. Even better, if you think yours is the best action you can possibly build ever, you can even make it public and share it with the world!
After you created your new UI builder action you can check in the Blocks Store by heading to it through the Tools menu in the Builderbar or by pressing the Blocks Store icon in the bottom of your screen like the image below. (Please keep in mind that the Show in Blocks Store text will only show up when you hover your mouse above it).

Now you can customize how the UI actions look in the Blocks Store and choose with whom you want to share your beautiful creation. 

More information about Blocks and the Blocks Store.

That's it! You just saw how you can build and work these actions from the ground up and use them to make your app look even better.
Still want to learn more about the UI Builder? Check out our documentation about the UI builder here and if you have any questions please visit our forum here.

Good luck building!

Did this answer your question?