How to execute javascript function in using the default input box in UI Designer
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 **
//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);
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
Hi Sean,
If I create a custom widget how will I get the css or the design of the default input box of bonita?
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.
Hi Sean,
Thanks will be waiting for it.
Hi Sean,
Thanks. Do you have any idea about creating a custom overview?
Comments
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:
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
Hi,
Thanks Sean already fix it.
Hi,
Thanks Sean already fix it.
Hi,
Thanks Sean already fix it.
Have you fixed the code or the problem?
Hi,
Not yet still not working. Please help. Thanks