Custom widget output binding

Hello, I use 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 Bonita auto generated fields 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.

Hello,

In the UIDesigner > my Custom widget > template is:

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

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

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

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

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

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

 

In the UIDesigner > my Custom widget > Controller is:

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

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

In the UIDesigner > my Custom widget > Properties 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

 

In the UIDesigner > my page that hosts the Custom widget > the Custom widget Properties are linked as below:

Montant CA HT <-> formInput.declarationISInput.montantCAHT

Résultat bénéfice <-> formInput.declarationISInput.resultatBenefice

Résultat déficite <-> formInput.declarationISInput.resultatDeficit

Centre d'imposition <-> formInput.declarationISInput.centreImposition

Taux d'imposition <-> formInput.declarationISInput.tauxImpotMinimumForfaitaire

Montant de l'impôt <-> formInput.declarationISInput.montantImpot

 

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.

 

Hey Julvens,

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!

Hey Julvens,

I believe that what you're looking for is explained here: https://documentation.bonitasoft.com/bonita/2021.2/pages-and-forms/variables

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

Thanks and hope this helps.

Cheers!