How to return a value from a custom widget

Q&A
1

Hi,

I’ve tried to return a value from a custom widget but I can’t, how I can do this?

Thanks

2

The elements you put on UI designer dont use “ID” element, instead they use name so you need to use
$(“[name=‘pbInput1’]”).val(“New Value”);

But here comes the problem I have, when you use that method it updates the view but doesn’t send it on submit unless you edit the input manually before sending it. I tried to use a Change(); after the val(); to trigger a change input but it doesnt work.

Not sure if its a problem with bonita, Jquery or AngularJs.

3

Hi,

You have to add a property to your custom widget. Then, you can access and modify it from the widget controller with $scope.properties.myProperty (or properties.myProperty from the template).

Then, on your form, select the widget and bind the property value to a form variable.

Properties panel

Regards

PS : Most of the time, it’s not necessary and not recommended to do direct DOM manipulations when using AngularJS. Instead, take advantage of data-binding and directives

4

Thank you Sean, fuego and Quentin.

Finally I solved this. I had to use a $watch, because the value of the variable was updated but not returned, with the $watch I could return the value when it changed.

I’ve upload a custom Autocomplete Widget that allows to retrieve a key different than the search key, this is based on autocomplete-alt directive by ghiden . You can get it from here.

Thank you all. :slight_smile:

5

to where?

6

Hi Sean,

To a variable or other widget.

For example, I want to make a custom autocomplete widget that works similar to the select widget, you only can select one of the available values and you have a return key different than the showed key. I’ve made all but I can’t to return any value to the form (using a “value” field like the *normal *widgets.)

Thank you in advance.

7

I think the way to do it is

Add a UI page variable to the page
use the custom widget to update the dom object (variable)

for example

I define a variable isValid Boolean on the page

in my custom widget I have code that does this

document.getElementsByID(“isValid”).value == true;

regards

8

Thank you for sharing !