Functions are critical for building bezls. You can bind functions to button clicks, or use the default functions to set variables or respond when data is returned from data subscriptions.
We are going to start on a blank custom builder screen.
There are some default functions created. The function ngOnInit is called when the bezl first loads, this is a great place to set default values, but do not try and access the UI using like jQuery because the interface hasn’t been built yet.
Note that we include requirejs, so you can also require in external libraries if you want to.
The function ngAfterViewInit is the next function that gets called. This function in called after the UI has been built, so if you need to use something like jQuery now would be the time to do it. If you are calling datasubs using the process command, this would also be the place since they are not available in ngOnInit.
Next we have onDataChange, this function is called when data subscriptions return results. You can read more about this in the data subscriptions article.
Next we have onParentChange and onChildChange. Bezls can call other bezls, these functions are called when either a parent bezl or a child bezl reaches out to update other bezls.
You can create a new function by right clicking on the Functions folder and selecting Add New:
By default it will be called func0, but you can right click the function to change the name of it.
Clicking edit will take you to the editor. You can use any valid typescript in the editor, you can call data subscriptions, edit or access variables, navigate to other pages, and much more. Functions are your cornerstone for writing interactive interfaces for users. We are going to make this one pretty simple.
I am calling the Javascript function alert and passing in the parm value. Parm is whatever we pass to the function, it can be a string, or a complex object. I can click on the verify function which will compile the function to Javascript and ensure there are no syntax issues. And then click Save and Close to save the changes.
Now I want to add a button and call my function.
I am using Angular material, read more about building interfaces in the article for building user interfaces.
Note I can drag and drop variables, functions, or data subscriptions directly into the code. Here I am calling the function we created and passing a string to it saying hello.
Clicking on Preview I get the following:
And when I click the button I get:
