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 **

  1. function numToWords(number) {
  2.  
  3. //Validates the number input and makes it a string
  4. if (typeof number === 'string') {
  5. number = parseInt(number, 10);
  6. }
  7. if (typeof number === 'number' && isFinite(number)) {
  8. number = number.toString(10);
  9. } else {
  10. return 'This is not a valid number';
  11. }
  12.  
  13. //Creates an array with the number's digits and
  14. //adds the necessary amount of 0 to make it fully
  15. //divisible by 3
  16. var digits = number.split('');
  17. while (digits.length % 3 !== 0) {
  18. digits.unshift('0');
  19. }
  20.  
  21.  
  22. //Groups the digits in groups of three
  23. var digitsGroup = [];
  24. var numberOfGroups = digits.length / 3;
  25. for (var i = 0; i < numberOfGroups; i++) {
  26. digitsGroup[i] = digits.splice(0, 3);
  27. }
  28. //console.log(digitsGroup); //debug
  29.  
  30. //Change the group's numerical values to text
  31. var digitsGroupLen = digitsGroup.length;
  32. var numTxt = [
  33. [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'], //hundreds
  34. [null, 'Ten', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'], //tens
  35. [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'] //ones
  36. ];
  37. var tenthsDifferent = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
  38.  
  39. // j maps the groups in the digitsGroup
  40. // k maps the element's position in the group to the numTxt equivalent
  41. // k values: 0 = hundreds, 1 = tens, 2 = ones
  42. for (var j = 0; j < digitsGroupLen; j++) {
  43. for (var k = 0; k < 3; k++) {
  44. var currentValue = digitsGroup[j][k];
  45. digitsGroup[j][k] = numTxt[k][currentValue];
  46. if (k === 0 && currentValue !== '0') { // !==0 avoids creating a string "null hundred"
  47. digitsGroup[j][k] += ' Hundred ';
  48. } else if (k === 1 && currentValue === '1') { //Changes the value in the tens place and erases the value in the ones place
  49. digitsGroup[j][k] = tenthsDifferent[digitsGroup[j][2]];
  50. digitsGroup[j][2] = 0; //Sets to null. Because it sets the next k to be evaluated, setting this to null doesn't work.
  51. }
  52. }
  53. }
  54.  
  55. //console.log(digitsGroup); //debug
  56.  
  57. //Adds '-' for gramar, cleans all null values, joins the group's elements into a string
  58. for (var l = 0; l < digitsGroupLen; l++) {
  59. if (digitsGroup[l][1] && digitsGroup[l][2]) {
  60. digitsGroup[l][1] += '-';
  61. }
  62. digitsGroup[l].filter(function (e) {return e !== null});
  63. digitsGroup[l] = digitsGroup[l].join('');
  64. }
  65.  
  66. //console.log(digitsGroup); //debug
  67.  
  68. //Adds thousand, millions, billion and etc to the respective string.
  69. var posfix = [null, 'Thousand', 'Million', 'Billion', 'Trillion', 'Quadrillion', 'Quintillion', 'Sextillion'];
  70. if (digitsGroupLen > 1) {
  71. var posfixRange = posfix.splice(0, digitsGroupLen).reverse();
  72. for (var m = 0; m < digitsGroupLen - 1; m++) { //'-1' prevents adding a null posfix to the last group
  73. if (digitsGroup[m]) {
  74. digitsGroup[m] += ' ' + posfixRange[m];
  75. }
  76. }
  77. }
  78.  
  79. //console.log(digitsGroup); //debug
  80.  
  81. //Joins all the string into one and returns it
  82. return digitsGroup.join(' ');
  83.  
  84. } //End of numToWords function
  85. function showText() {
  86. var inputValue = input.value;
  87. var splitnum = inputValue.toString().split('.')
  88.  
  89. var whole = numToWords(splitnum[0]);
  90. if (splitnum.length == 2) {
  91. if(splitnum[1]!=00){
  92. var centavos = numToWords(splitnum[1])
  93. output.value = whole + ' Pesos and ' + centavos + ' Centavos ';
  94. }else{
  95. output.value = whole + ' Pesos';
  96. }
  97. }else{
  98. output.value = whole + ' Pesos';
  99. }
  100. }
  101. var output = $data.formInput.pettyCashRequestInput.amountInWords;
  102. var input = $data.formInput.pettyCashRequestInput.amount;
  103.  
  104.  
  105. 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:

  1. 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
+1
-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:

  1. <div class="col-xs-12">
  2. <input type="text" id="pbInput0" name="pbInput0" class="form-control" ng-blur="ctrl.textify()">
  3. </div>
  4. <div class="col-xs-12">
  5. <br />
  6. </div>
  7. <div class="col-xs-12">
  8. <input type="text" id="pbInput1" name="pbInput1" class="form-control" ng-model="properties.value" ng-readonly="properties.readOnly">
  9. </div>

Copy the following to the Controller:

  1. function ($scope) {
  2.  
  3. this.textify = function(){
  4.  
  5. function numToWords(number) {
  6.  
  7. //Validates the number input and makes it a string
  8. if (typeof number === 'string') {
  9. number = parseInt(number, 10);
  10. }
  11. if (typeof number === 'number' && isFinite(number)) {
  12. number = number.toString(10);
  13. } else {
  14. return 'This is not a valid number';
  15. }
  16.  
  17. //Creates an array with the number's digits and
  18. //adds the necessary amount of 0 to make it fully
  19. //divisible by 3
  20. var digits = number.split('');
  21. while (digits.length % 3 !== 0) {
  22. digits.unshift('0');
  23. }
  24.  
  25. //Groups the digits in groups of three
  26. var digitsGroup = [];
  27. var numberOfGroups = digits.length / 3;
  28. for (var i = 0; i < numberOfGroups; i++) {
  29. digitsGroup[i] = digits.splice(0, 3);
  30. }
  31. //console.log(digitsGroup); //debug
  32.  
  33. //Change the group's numerical values to text
  34. var digitsGroupLen = digitsGroup.length;
  35. var numTxt = [
  36. [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'], //hundreds
  37. [null, 'Ten', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'], //tens
  38. [null, 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'] //ones
  39. ];
  40. var tenthsDifferent = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
  41.  
  42. // j maps the groups in the digitsGroup
  43. // k maps the element's position in the group to the numTxt equivalent
  44. // k values: 0 = hundreds, 1 = tens, 2 = ones
  45. for (var j = 0; j < digitsGroupLen; j++) {
  46. for (var k = 0; k < 3; k++) {
  47. var currentValue = digitsGroup[j][k];
  48. digitsGroup[j][k] = numTxt[k][currentValue];
  49. if (k === 0 && currentValue !== '0') { // !==0 avoids creating a string "null hundred"
  50. digitsGroup[j][k] += ' Hundred ';
  51. }
  52. else if (k === 1 && currentValue === '1') { //Changes the value in the tens place and erases the value in the ones place
  53. digitsGroup[j][k] = tenthsDifferent[digitsGroup[j][2]];
  54. digitsGroup[j][2] = 0; //Sets to null. Because it sets the next k to be evaluated, setting this to null doesn't work.
  55. }
  56. }
  57. }
  58.  
  59. //console.log(digitsGroup); //debug
  60.  
  61. //Adds '-' for gramar, cleans all null values, joins the group's elements into a string
  62. for (var l = 0; l < digitsGroupLen; l++) {
  63. if (digitsGroup[l][1] && digitsGroup[l][2]) {
  64. digitsGroup[l][1] += '-';
  65. }
  66. digitsGroup[l].filter(function (e) {return e !== null});
  67. digitsGroup[l] = digitsGroup[l].join('');
  68. }
  69.  
  70. //console.log(digitsGroup); //debug
  71.  
  72. //Adds thousand, millions, billion and etc to the respective string.
  73. var posfix = [null, 'Thousand', 'Million', 'Billion', 'Trillion', 'Quadrillion', 'Quintillion', 'Sextillion'];
  74. if (digitsGroupLen > 1) {
  75. var posfixRange = posfix.splice(0, digitsGroupLen).reverse();
  76. for (var m = 0; m < digitsGroupLen - 1; m++) { //'-1' prevents adding a null posfix to the last group
  77. if (digitsGroup[m]) {
  78. digitsGroup[m] += ' ' + posfixRange[m];
  79. }
  80. }
  81. }
  82.  
  83. //console.log(digitsGroup); //debug
  84.  
  85. //Joins all the string into one and returns it
  86. return digitsGroup.join(' ');
  87.  
  88. }
  89. //End of numToWords function
  90.  
  91. // console.log("in testify");
  92. // console.log(document.getElementById("pbInput0").value);
  93.  
  94. document.getElementById("pbInput1").value = numToWords(document.getElementById("pbInput0").value);
  95.  
  96. // console.log("out testify");
  97.  
  98. };
  99.  
  100. }

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