How to fire the Custom Widget

Q&A
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

2

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

3

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

4

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

5

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

Thanks

6

@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

c1c2c3c4
r1datar1c3r1c4
r2datar2c3r2c4
r3datar3c3r3c4
r4datar4c3r4c4
r5datar5c3r5c4

and Click Submit

  1. 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

  1. 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.

  1. 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.
  1. now change the statement in the Html Text field to

    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

7

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