Custom widget output binding

[Julvens]

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.

[Julvens]

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.

 

[thalia.cruz]

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!

[thalia.cruz]

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!