How to execute javascript function in using the default input box in UI Designer

1
0
-1

Hi,

I want to execute a javascript function in UI designer using the default input box in bonita but when I execute the page it seems not working. I am not sure if I am correct in executing the javascript function in UI designer. I use a variable and uses a java script function (see code below). I didn't attached the variable in the default input box I use in UI designer. The purpose of this is when I enter an amount in an input it will be converted into words and the output will be shown in another input box using the javascript below. After saving the content of the input box will be save. Please help thanks.

**Javascript **

function numToWords(number) {

    //Validates the number input and makes it a string
    if (typeof number === 'string') {
        number = parseInt(number, 10);
    }
    if (typeof number === 'number' && isFinite(number)) {
        number = number.toString(10);
    } else {
        return 'This is not a valid number';
    }

    //Creates an array with the number's digits and
    //adds the necessary amount of 0 to make it fully
    //divisible by 3
    var digits = number.split('');
    while (digits.length % 3 !== 0) {
        digits.unshift('0');
    }

    //Groups the digits in groups of three
    var digitsGroup = [];
    var numberOfGroups = digits.length / 3;
    for (var i = 0; i < numberOfGroups; i++) {
        digitsGroup[i] = digits.splice(0, 3);
    }
    //console.log(digitsGroup); //debug

    //Change the group's numerical values to text
    var digitsGroupLen = digitsGroup.length;
    var numTxt = [
        [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'], //hundreds
        [null, 'Ten', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'], //tens
        [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'] //ones
        ];
    var tenthsDifferent = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];

    // j maps the groups in the digitsGroup
    // k maps the element's position in the group to the numTxt equivalent
    // k values: 0 = hundreds, 1 = tens, 2 = ones
    for (var j = 0; j < digitsGroupLen; j++) {
        for (var k = 0; k < 3; k++) {
            var currentValue = digitsGroup[j][k];
            digitsGroup[j][k] = numTxt[k][currentValue];
            if (k === 0 && currentValue !== '0') { // !==0 avoids creating a string "null hundred"
                digitsGroup[j][k] += ' Hundred ';
            } else if (k === 1 && currentValue === '1') { //Changes the value in the tens place and erases the value in the ones place
                digitsGroup[j][k] = tenthsDifferent[digitsGroup[j][2]];
                digitsGroup[j][2] = 0; //Sets to null. Because it sets the next k to be evaluated, setting this to null doesn't work.
            }
        }
    }

    //console.log(digitsGroup); //debug

    //Adds '-' for gramar, cleans all null values, joins the group's elements into a string
    for (var l = 0; l < digitsGroupLen; l++) {
        if (digitsGroup[l][1] && digitsGroup[l][2]) {
            digitsGroup[l][1] += '-';
        }
        digitsGroup[l].filter(function (e) {return e !== null});
        digitsGroup[l] = digitsGroup[l].join('');
    }

    //console.log(digitsGroup); //debug

    //Adds thousand, millions, billion and etc to the respective string.
    var posfix = [null, 'Thousand', 'Million', 'Billion', 'Trillion', 'Quadrillion', 'Quintillion', 'Sextillion'];
    if (digitsGroupLen > 1) {
        var posfixRange = posfix.splice(0, digitsGroupLen).reverse();
        for (var m = 0; m < digitsGroupLen - 1; m++) { //'-1' prevents adding a null posfix to the last group
            if (digitsGroup[m]) {
                digitsGroup[m] += ' ' + posfixRange[m];
            }
        }
    }

    //console.log(digitsGroup); //debug

    //Joins all the string into one and returns it
    return digitsGroup.join(' ');

} //End of numToWords function
function showText() {
    var inputValue = input.value;
        var splitnum = inputValue.toString().split('.')

   var whole = numToWords(splitnum[0]);
    if (splitnum.length == 2) {
                if(splitnum[1]!=00){
                var centavos = numToWords(splitnum[1])
          output.value = whole + ' Pesos and ' + centavos + ' Centavos ';
        }else{
                output.value = whole + ' Pesos';
        }  
    }else{
        output.value = whole + ' Pesos';
    }
}
var output = $data.formInput.pettyCashRequestInput.amountInWords;
var input = $data.formInput.pettyCashRequestInput.amount;

input.addEventListener('input', showText);

Comments

Submitted by Sean McP on Thu, 02/23/2017 - 19:14

A Tip on displaying CODE/LOGS correctly in Posts:

Do not use the Supplied Buttons above, for some reason they refuse to work correctly, and despite bringing it to Bonitasofts attention, it's low priority.

To Show Code/Logs correctly use

< code >
your code/log
< /code >

removing the spaces to allow the showing of code/logs correctly as here:

your code/log

You should still be able to edit your post to ensure the correct formatting of the code to help us understand it easier.

Thanks and regards
Seán

Submitted by ChristianMichae... on Fri, 02/24/2017 - 00:26

Hi,

Thanks Sean already fix it.

Submitted by ChristianMichae... on Fri, 02/24/2017 - 00:26

Hi,

Thanks Sean already fix it.

Submitted by ChristianMichae... on Fri, 02/24/2017 - 00:26

Hi,

Thanks Sean already fix it.

Submitted by Sean McP on Fri, 02/24/2017 - 02:27

Have you fixed the code or the problem?

Submitted by ChristianMichae... on Fri, 02/24/2017 - 03:53

Hi,

Not yet still not working. Please help. Thanks

1 answer

1
+2
-1
This one is the BEST answer!

You can't add JavaScript to the default input box. You have to create a custom Widget to do the job and add you code to the Widget.

regards
Seán

PS: While I understand this may not be the answer you are looking for it does answer your question, please mark as resolved by ticking the tick mark on the left of this reply so others now it is closed.

Comments

Submitted by ChristianMichae... on Fri, 02/24/2017 - 07:33

Hi Sean,

If I create a custom widget how will I get the css or the design of the default input box of bonita?

Submitted by Sean McP on Sun, 02/26/2017 - 00:37

Just use the same CSS CLASS as with the original input box.

Have a look as follows (Chrome)

Open a page with a default input box, right click and choose Inspect Element, you can determine all the necessary CSS attributes from here. All you have to do really is copy the CLASS parameter and add it to your custom widget Input Box.

regards

Submitted by ChristianMichae... on Mon, 02/27/2017 - 00:57

Hi Sean,

I created 2 input boxes 1 for setting the value and another is for just handling the output. I then put the input boxes but when I preview it only one custom widget is showing.

Submitted by Sean McP on Mon, 03/06/2017 - 07:04

I've got a fix on my other PC - Will load it as soon as... regards

Submitted by ChristianMichae... on Mon, 03/06/2017 - 07:08

Hi Sean,

Thanks will be waiting for it.

Submitted by Sean McP on Tue, 03/07/2017 - 03:08

here we are:

create a new custom widget

Delete everything in the Template and the Controller, then delete all properties.

Copy the following to the Template:

<div class="col-xs-12">
    <input type="text" id="pbInput0" name="pbInput0" class="form-control" ng-blur="ctrl.textify()">
</div>
<div class="col-xs-12">
<br />
</div>
<div class="col-xs-12">
    <input type="text" id="pbInput1" name="pbInput1" class="form-control" ng-model="properties.value" ng-readonly="properties.readOnly">
</div>

Copy the following to the Controller:

function ($scope) {

    this.textify = function(){
       
        function numToWords(number) {
 
            //Validates the number input and makes it a string
            if (typeof number === 'string') {
                number = parseInt(number, 10);
            }
            if (typeof number === 'number' && isFinite(number)) {
                number = number.toString(10);
            } else {
                return 'This is not a valid number';
            }
 
            //Creates an array with the number's digits and
            //adds the necessary amount of 0 to make it fully
            //divisible by 3
            var digits = number.split('');
            while (digits.length % 3 !== 0) {
                digits.unshift('0');
            }
             
            //Groups the digits in groups of three
            var digitsGroup = [];
            var numberOfGroups = digits.length / 3;
            for (var i = 0; i < numberOfGroups; i++) {
            digitsGroup[i] = digits.splice(0, 3);
            }
            //console.log(digitsGroup); //debug
             
            //Change the group's numerical values to text
            var digitsGroupLen = digitsGroup.length;
            var numTxt = [
            [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'], //hundreds
            [null, 'Ten', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'], //tens
            [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'] //ones
            ];
            var tenthsDifferent = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
             
            // j maps the groups in the digitsGroup
            // k maps the element's position in the group to the numTxt equivalent
            // k values: 0 = hundreds, 1 = tens, 2 = ones
            for (var j = 0; j < digitsGroupLen; j++) {
                for (var k = 0; k < 3; k++) {
                    var currentValue = digitsGroup[j][k];
                    digitsGroup[j][k] = numTxt[k][currentValue];
                    if (k === 0 && currentValue !== '0') { // !==0 avoids creating a string "null hundred"
                    digitsGroup[j][k] += ' Hundred ';
                    }
                    else if (k === 1 && currentValue === '1') { //Changes the value in the tens place and erases the value in the ones place
                        digitsGroup[j][k] = tenthsDifferent[digitsGroup[j][2]];
                        digitsGroup[j][2] = 0; //Sets to null. Because it sets the next k to be evaluated, setting this to null doesn't work.
                    }
                }
            }
             
            //console.log(digitsGroup); //debug
             
            //Adds '-' for gramar, cleans all null values, joins the group's elements into a string
            for (var l = 0; l < digitsGroupLen; l++) {
                if (digitsGroup[l][1] && digitsGroup[l][2]) {
                    digitsGroup[l][1] += '-';
                }
                digitsGroup[l].filter(function (e) {return e !== null});
                digitsGroup[l] = digitsGroup[l].join('');
            }
             
            //console.log(digitsGroup); //debug
             
            //Adds thousand, millions, billion and etc to the respective string.
            var posfix = [null, 'Thousand', 'Million', 'Billion', 'Trillion', 'Quadrillion', 'Quintillion', 'Sextillion'];
            if (digitsGroupLen > 1) {
                var posfixRange = posfix.splice(0, digitsGroupLen).reverse();
                for (var m = 0; m < digitsGroupLen - 1; m++) { //'-1' prevents adding a null posfix to the last group
                    if (digitsGroup[m]) {
                        digitsGroup[m] += ' ' + posfixRange[m];
                    }
                }
            }
 
        //console.log(digitsGroup); //debug
 
        //Joins all the string into one and returns it
        return digitsGroup.join(' ');
 
    }
    //End of numToWords function

//    console.log("in testify");
//    console.log(document.getElementById("pbInput0").value);
   
    document.getElementById("pbInput1").value = numToWords(document.getElementById("pbInput0").value);
       
//    console.log("out testify");
       
    };

}

Save
Add the widget to a new page and click preview
In the top box enter a number and press tab...
All done.

Notice I used your code, the cents don't work but I'll leave that to you,

regards
Seán

NOW can you mark this question as resolved the big check mark next to my original answer. :) and tick it up, Thanks

Submitted by ChristianMichae... on Wed, 03/08/2017 - 01:46

Hi Sean,

Thanks. Do you have any idea about creating a custom overview?

Submitted by Sean McP on Wed, 03/08/2017 - 02:45

Nope - sorry - not part of what we need.

regards
Seán

Notifications