How to create a custom button that run a function called in properties?

Q&A
1

Hi!

i need to call a function in UI design only when a button ( or custom button ) is pressed.

I create a javascript variable that print all the input that the customer wrote in the forms.

it work but i need to call it with a click on the button only when the customer compiled all the data.

i tried to create a custom widget that run a function added in properties value but it doesn’t work.

here the code:

Template

Create PDF

Controller

function pdf() {

    this.avviaFunzione = function() {
        console.log("click");
        $scope.funzione;
    };
}

Properties

funzione
Label: Esegui questa Function
Treat as Dynamic value
Type: text
Default value: null

Thank you for help!

Michael Caruso

2

It’s relatively easy to create your own custom button that will look exactly as the standard button but will execute any JS action instead of predefined ones.

The best way to do that is:

  1. In UI designer, on the form create new variable of type javascript expression and in the code put:

    return function(){
    //body of your function
    };
  2. Create custom widget that looks exactly the same as standard button (check it in repository).
  3. Add property of type “Bidirectional bond” to this custom button (you will set there your “function variable” from the form).
  4. In controler instead of standard code put the code that will execute the function from variable. For example:

    function ($scope, $http, $location, $log, $window) {
    this.action = function() {
    $scope.properties.javascriptVariable();
    }
    }

Best regards,
bpms.help

3

Hi,

thank u for your help!

at the beginning it doesn’t works.

I think that i found a bug:

i saw that, the property field called " funzione " that i created doesn’t work,

maybe because i deleted it and added again with the same name , more times in different browser pages of the same UI page.

for example:

i created properties “function” ( bidirectional bond type )
i created properties “test” ( bidirectional bond type )

following your guide,

if i use “function” field, it doesn’t work

if i use “test” field, ( just different name! ) it work.

Maybe because the browser keept in cache ( or don’t know where ) the “function” properties.

At the end, changing the name of the properties from “funzione” to “test” it work.

Hoping that can be usefull to someone else like me :slight_smile:

Ty again!

Best regards!

Michael Caruso

4

If you still have problems with creating the custom widget you can visit my website. I’ve added such button in “download” section.

Best regards,
bpms.help

5

Thanks for the solution. I cannot believe how such a crazy procedure is needed to put a simple generic button on a form.

The most 'funny' is that all this mess has to be done using AngularJS (1.3.18 !!! with Bonita Studio 2021-2) and that the product support is discontinued as of january 2022, which means we should expect to recode everything more sooner than later :((((

Oh and of course the link to the repository is dead, probably just because they moved things around, that would not be funny otherwise.