How to fire the Custom Widget

Submitted by Sean McP on Thu, 04/06/2017 - 05:29
1
0
-1

I have a page with a Select and a Text Field from a Custom Widget in it.

When I change the Select I need the Custom Widget to fire so the Text Field can be updated.

It seems the Custom Widget only fires once on page load which means I'm not able to update my data.

Can anyone tell me how to fire my Custom Widget based on the change of a Select?

Many thanks in advance

regards
Seán

Custom Widget
select list
2 answers

Submitted by Lionel Palacin on Thu, 04/13/2017 - 18:59
1
+1
-1
This one is the BEST answer!

Hi,

Thanks for sharing your example.

First, there was a mistake in the way you're referring to the widget property that contains the input variable. You were referring to it as $scope.properties.value, where the name you gave was 'qw'. So the correct way to access it is $scope.properties.qw.

That being fixed, that doesn't fix the bigger issue here, to do so there are two ways:

  • Refer the property directly in the template: try to replace the html line <div ng-bind-html="trustedHtml"></div> by <div ng-bind-html="properties.qw"></div>, in that case the mapping will work. Because, each time the value of this variable change, the view will be re-evaluated.

  • If you don't want to change the template, in that case you need to add a watcher on the controller to trigger change on the variable value change. Add this code in your controller:

$scope.$watch('properties.qw', function(newQW, oldQW){
       console.log("qw changed");
       $scope.html = newQW;
       $scope.trustedHtml = $sce.trustAsHtml($scope.html);
});`

This code will be executed each time the value of the variable bound to the property change.

Lio

Comments

Submitted by Sean McP on Fri, 04/14/2017 - 07:00

Thanks Lionel,

1) Sorry about that, code blindness, been looking at this for days and tried a couple of different variables just to make sure, didn't see I'd sent the wrong one.

2.1) Referring to the property works but ignores the "onclick=myScript()" this being expected behaviour because of AngularJS security management.

2.2) Referring to the property works in the controller works also, and is where I need my code as it has the $sce module. Everything works now as required.

regards
Seán

Permalink

Submitted by Lionel Palacin on Tue, 04/11/2017 - 21:51
1
0
-1

Hi,

The form built with the UI Designer respect most of the concepts from AngularJS, like the two-ways data binding. If the variable bond to the Select widget is used as an input of the Text field widget, each time this variable is modified by the Select widget, the value will be updated in the Text Field widget also.

Is it not what you're trying to do?

Thanks

Comments

Submitted by Sean McP on Tue, 04/11/2017 - 22:29

Hi Lionel,

thanks for the reply, and yes, that's what I want to do.

However in my case I have a Custom Text Widget (built from the Bonitasoft one) with a $sce module added, as my text contains responsive HTML.

It seems like:

  • Using Text Widget the value is updated (the update binding works)
  • Using a Custom Widget the value is NOT updated (the update binding doesn't work)

So it looks like the Custom Widget is not being fired the same as the in-built widgets.

I can throw together an example if you would like and let you have a look.

regards

Permalink
Submitted by Lionel Palacin on Tue, 04/11/2017 - 22:44

Yes if you want to share an example, that'd be faster to investigate.

Thanks

Permalink
Submitted by Sean McP on Thu, 04/13/2017 - 05:38

@Lionel:

Link is here: two BOS files:
https://www.dropbox.com/sh/kycgqqa0h9vpy7l/AACiteL4gwMdvVWqIHQGMcFca?dl=0

Instructions follow:

1) install createBDMData and updateBDMData BOS files

2) run createBDMData and

copy the following into the **Html Text** field
<div><table><thead><tr><th>c1</th><th>c2</th><th>c3</th><th>c4</th></tr></thead><tbody><tr><td onclick="myClick()">r1</td><td id="r1c2">data</td><td>r1c3</td><td>r1c4</td></tr><tr><td onclick="myClick()">r2</td><td id="r2c2">data</td><td>r2c3</td><td>r2c4</td></tr><tr><td onclick="myClick()">r3</td><td id="r3c2">data</td><td>r3c3</td><td>r3c4</td></tr><tr><td onclick="myClick()">r4</td><td id="r4c2">data</td><td>r4c3</td><td>r4c4</td></tr><tr><td onclick="myClick()">r5</td><td id="r5c2">data</td><td>r5c3</td><td>r5c4</td></tr>    </tbody></table></div>

and Click Submit

3) run updateBDMData do not do anything yet but please note the following items:

Internal Page Variable varHTML returns only the data required for the field in question

return $data.selectedConfiguration.htmldata;

Display Field 1 is Field Type INPUT from variable varHTML
Display Field 2 is Field Type TEXT from variable varHTML
Display Field 3 is Field Type TEXT AREA from variable varHTML
Display Field 4 is CUSTOM WIDGET field from variable varHTML

4) now make a selection from the Drop Down List (on first invocation there will only be one entry)

Notice how Fields 1, 2, 3 all correctly display data. However field 4 the Custom Widget does not.

5) press F12 to open the debugger and reference the Console.

The FIRST Error is expected and understood

"Error evaluating < varHTML > data:  Cannot read property 'htmlText' of undefined"

This happens because on first invocation there is no data to read, this will be corrected at a later time with a functional return.

6) now change the

<

table> statement in the Html Text field to

<

table border=1>

Notice how Display Fields 2 and 3 change but the 4th. the Custom Text Widget, does not change.

Now this time there is NO error in the Console log, nor is there any statement tell us what the data is...

$scope.properties.value

the above should be written in the Console when the widget fires (hence the previous error: undefined) and would write the whole

...

data.

From this I see that the Custom Widget is not firing when the data field changes, and this is a problem for me.

So how to fix this?

regards
Seán

Permalink
Notifications