# Custom widget output binding

**URL:** <https://community.ofelia.com/t/custom-widget-output-binding/11327>\
**Category:** Q&A\
**Created:** [30 August 2022 19:28 UTC](https://community.ofelia.com/t/custom-widget-output-binding/11327 "2022-08-30T19:28:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Julvens](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julvens](https://community.ofelia.com/u/Julvens)\
**Post date:** [30 August 2022 19:28 UTC](https://community.ofelia.com/t/custom-widget-output-binding/11327/1 "2022-08-30T19:28:34Z")

</div>

Hello, I use&nbsp;Bonita Community Edition Version : 2022.1 on MacOS Monterey

I developed a simple process, with business object / data / variable, a web form input with contracts, etc.

The form is containing :

- Bonita auto generated fields auto binded to the business object
- a custom widget because I wanted to update some fields when the user type input other fields (auto calculation). It’s composed of 6 fields which interact between them. It’s working fine.

The issue is coming when I try to bind the custom fields to the business object. The data from the&nbsp;Bonita auto generated fields&nbsp;are saved in the DB but the custom fields.

I really tried to deep dive into this forum and google and Youtube but I couldn’t find any documentation or example on how the binding is done with the custom widget output.

I need help please.

---

<div class="post-metadata">

**Author:** ![Julvens](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julvens](https://community.ofelia.com/u/Julvens)\
**Post date:** [13 September 2022 17:07 UTC](https://community.ofelia.com/t/custom-widget-output-binding/11327/2 "2022-09-13T17:07:20Z")

</div>

**Hello,**

**In the UIDesigner&nbsp;\> my Custom widget \> template is:**

\<div\>  
&nbsp;&nbsp;&nbsp; \<br /\>  
&nbsp;&nbsp;&nbsp; \<br /\>  
&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Montant CA HT\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<input type="number" ng-blur="ctrl.sumFields()" id="inputCAHT" name="inputCAHT" class="form-control" ng-minlength="" ng-maxlength="" min="0" max=""\>

&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Résultat bénéfice\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<input type="number" ng-blur="ctrl.sumFields()" id="inputBenef" name="inputBenef" class="form-control"&nbsp; ng-minlength="" ng-maxlength="" min="0" max=""\>

&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Résultat déficite\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<input type="number" ng-blur="ctrl.sumFields()" id="inputDefic" name="inputBenef" class="form-control" ng-minlength="" ng-maxlength="" min="0" max=""\>

&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Centre d'imposition (DGE/DPME)\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<!--\<input type="text" id="centreImpot" name="centreImpot" class="form-control"\>--\>  
&nbsp;&nbsp;&nbsp; \<select class="form-control" name="centreImpot" required="required" ng-blur="ctrl.sumFields()"\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option style="display:none" value="" class="ng-binding"\>Sélectionner une option\</option\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option value="1"\>DGE\</option\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option value="2"\>DPME\</option\>  
&nbsp;&nbsp;&nbsp; \</select\>

&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Taux d'imposition\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<input type="text" id="tauxImpot" name="tauxImpot" class="form-control" disabled\>  
&nbsp;&nbsp;&nbsp; \<!--\<select class="form-control" name="tauxImpot" required="required"\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option style="display:none" value="" class="ng-binding"\>Sélectionner une option\</option\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option value="1"\>50%\</option\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<option value="2"\>35%\</option\>  
&nbsp;&nbsp;&nbsp; \</select\>--\>

&nbsp;&nbsp;&nbsp; \<label class="control-label col-xs-12 control-label--required"\>Montant de l'impôt\</label\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<input type="number" id="montantImpot" name="montantImpot" class="form-control" disabled\>  
&nbsp;&nbsp;&nbsp; \<br /\>  
&nbsp;&nbsp;&nbsp; \<br /\>  
\</div\>

&nbsp;

**In the UIDesigner&nbsp;\> my Custom widget \> Controller is:**

/\*\*  
&nbsp;\* The controller is a JavaScript function that augments the AngularJS scope and exposes functions that can be used in the custom widget template  
&nbsp;\*&nbsp;  
&nbsp;\* Custom widget properties defined on the right can be used as variables in a controller with $scope.properties  
&nbsp;\* To use AngularJS standard services, you must declare them in the main function arguments.  
&nbsp;\*&nbsp;  
&nbsp;\* You can leave the controller empty if you do not need it.  
&nbsp;\*/  
function ($scope) {  
&nbsp; &nbsp; // define a function to be used in template with ctrl.sumFields()  
&nbsp; &nbsp; this.sumFields = function(){

&nbsp; &nbsp; &nbsp; &nbsp; var inputCAHT = document.getElementById("inputCAHT");  
&nbsp; &nbsp; &nbsp; &nbsp; var inputBenef = document.getElementById("inputBenef");  
&nbsp; &nbsp; &nbsp; &nbsp; var inputDefic = document.getElementById("inputDefic");  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // si le bénéfice est supérieur à zéro, on valorise le déficite à zéro  
&nbsp; &nbsp; &nbsp; &nbsp; if (inputBenef !== null && inputBenef.value !== '' && Number(inputBenef.value) \> 0) {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("inputDefic").value = 0;  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // si le déficite est supérieur à zéro, on valorise le bénéfice à zéro  
&nbsp; &nbsp; &nbsp; &nbsp; if (inputDefic !== null && inputDefic.value !== '' && Number(inputDefic.value) \> 0) {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("inputBenef").value = 0;  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // sélection du taux d'imposition  
&nbsp; &nbsp; &nbsp; &nbsp; if (inputCAHT !== null && inputCAHT.value !== '' && Number(inputCAHT.value) \> 500000000) {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("tauxImpot").value = "50%";  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //document.getElementById("tauxImpot").value = "1";  
&nbsp; &nbsp; &nbsp; &nbsp; } else {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("tauxImpot").value = "35%";  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //document.getElementById("tauxImpot").value = "2";  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // calcul du montant de l'impôt  
&nbsp; &nbsp; &nbsp; &nbsp; if ((inputCAHT !== null && inputCAHT.value !== '') &&  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (inputBenef !== null && inputBenef.value !== '')) {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (document.getElementById("tauxImpot").value == "35%") {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("montantImpot").value = Math.round(Number(inputBenef.value) \* 0.35);  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (document.getElementById("tauxImpot").value == "50%") {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("montantImpot").value = Math.round(Number(inputBenef.value) \* 0.50);  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("montantImpot").value = 0;  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; else{  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("montantImpot").value = 0;  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // proceed to data binding  
&nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.montantCAHT &nbsp; &nbsp; &nbsp;= document.getElementById("inputCAHT");  
&nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.resultatbenef &nbsp; &nbsp;= document.getElementById("inputBenef");  
&nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.resultatDefic &nbsp; &nbsp;= document.getElementById("inputDefic");  
&nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.centreImpot &nbsp; &nbsp; &nbsp;= document.getElementById("centreImpot").value;  
&nbsp; &nbsp; &nbsp; &nbsp; if (document.getElementById("tauxImpot") == "50%") {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.tauxImpot &nbsp; &nbsp;= 1;  
&nbsp; &nbsp; &nbsp; &nbsp; } else if (document.getElementById("tauxImpot") == "35%") {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.tauxImpot &nbsp; &nbsp;= 2;  
&nbsp; &nbsp; &nbsp; &nbsp; } else {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.tauxImpot &nbsp; &nbsp;= -1;  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; $scope.properties.montantImpot &nbsp; &nbsp; = document.getElementById("montantImpot");  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; console.log($scope.properties.montantImpot);  
&nbsp; &nbsp; };  
}

**In the UIDesigner&nbsp;\> my Custom widget \> Properties&nbsp;are:**

montantCAHT  
Libellé: Montant CA HT  
Traiter comme Binding bidirectionnel

resultatBenef  
Libellé: Résultat bénéfice  
Traiter comme Binding bidirectionnel

resultatDefic  
Libellé: Résultat déficite  
Traiter comme Binding bidirectionnel

centrelmpot  
Libellé: Centre d'imposition  
Traiter comme Binding bidirectionnel

tauxImpot  
Libellé: Taux d'imposition  
Traiter comme Binding bidirectionnel

montantimpot  
Libellé: Montant de l'impôt  
Traiter comme Binding bidirectionnel

&nbsp;

**In the UIDesigner&nbsp;\> my page that hosts the&nbsp;Custom widget \>&nbsp;the&nbsp;Custom widget&nbsp;Properties&nbsp;are linked as below:**

Montant CA HT&nbsp;\<-\>&nbsp;formInput.declarationISInput.montantCAHT

Résultat bénéfice&nbsp;\<-\>&nbsp;formInput.declarationISInput.resultatBenefice

Résultat déficite&nbsp;\<-\>&nbsp;formInput.declarationISInput.resultatDeficit

Centre d'imposition&nbsp;\<-\>&nbsp;formInput.declarationISInput.centreImposition

Taux d'imposition&nbsp;\<-\>&nbsp;formInput.declarationISInput.tauxImpotMinimumForfaitaire

Montant de l'impôt&nbsp;\<-\>&nbsp;formInput.declarationISInput.montantImpot

&nbsp;

**All the fields are those from the business object.**

**I don't know where to see the logs. Perhaps it could help. Can you please give me a link on how to see it please?**

**Thanks for your help.**

&nbsp;

---

<div class="post-metadata">

**Author:** ![thalia.cruz](https://dub1.discourse-cdn.com/flex013/user_avatar/community.ofelia.com/thalia.cruz/32/1230_2.png) [@thalia.cruz](https://community.ofelia.com/u/thalia.cruz)\
**Post date:** [13 September 2022 14:58 UTC](https://community.ofelia.com/t/custom-widget-output-binding/11327/3 "2022-09-13T14:58:45Z")

</div>

Hey&nbsp;[Julvens](http://community.ofelia.com/users/julvens "View user profile."),

Could you tell me what you've tried to bind the custom fields, please?

If you're facing an error, could you please share your logs?

Thanks!

---

<div class="post-metadata">

**Author:** ![thalia.cruz](https://dub1.discourse-cdn.com/flex013/user_avatar/community.ofelia.com/thalia.cruz/32/1230_2.png) [@thalia.cruz](https://community.ofelia.com/u/thalia.cruz)\
**Post date:** [16 September 2022 15:34 UTC](https://community.ofelia.com/t/custom-widget-output-binding/11327/4 "2022-09-16T15:34:34Z")

</div>

Hey&nbsp;[Julvens](http://community.ofelia.com/users/julvens "View user profile."),

I believe that what you're looking for is explained here:&nbsp;[https://documentation.bonitasoft.com/bonita/2021.2/pages-and-forms/variables](https://documentation.bonitasoft.com/bonita/2021.2/pages-and-forms/variables)

Also you can easily access the logs through **Help** \>&nbsp; **Show Studio log** or&nbsp; **Show Engine log.** If there's an error, could you share it, please?

Thanks and hope this helps.

Cheers!