format number when filling in

[MS5]

Hi,

I would like to format a number while the user is filling in that field, is this possible?

For example, if the number is 100000, I would like the user to see 100.000 when writting it. I have been able to do this after the form has been submitted but I would like to do it while the form is being submitted.

Thanks in advance!

[OliverRodrigues]

Hi, a few weeks ago I wrote a blog post on adding mask to a field within an Entity Form, this might be what you're looking for:

http://oliverrodrigues365.com/2020/04/15/power-apps-portals-adding-field-mask

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[OOlashyn]

Hi @MS5  and @OliverRodrigues ,

Answer from @OliverRodrigues will work only if the number field is actually text field in CDS. If it is Whole Number field during the submission you will receive an error that the input is incorrect. To solve this we can extend @OliverRodrigues answer next way:

• hide initial number field
• create a field that will serve as a masked input
• place it after hidden initial field
• apply a mask to that field
• set oninput event to parse data from masked input and set in correct one

You can find code that implements those steps below.

let fieldName = "dwc_samplenumber";
//hide initial field
$("#" + fieldName).hide();
//create new masked input
let maskedInput = document.createElement("input");
maskedInput.className = "form-control";
maskedInput.id = "maskedInput";
//add function to set correct value
maskedInput.oninput = () => {
    let newValue = parseInt($("#maskedInput").val().replace(/\D/g, ''), 10);
    $("#" + fieldName).val(newValue);
}
//apply mask
$(maskedInput).mask('000.000.000');
//insert maskedInput after initial one
$(maskedInput).insertAfter($("#" + fieldName));

Hope this will help.

[MS5]

Hi @OOlashyn ,

First of all, sorry for the late answer, I have been very busy. 

I have tried your code with no luck, something must be wrong because if I hide the field at the end it the field is not hidden, but if I put it at the beginning, it does. 

This is the code I am using:

$(document).ready(function() {
  let fieldName = "cr027_importe";
  //hide initial field
  $("#" + fieldName).hide();
  //create new masked input
  let maskedInput = document.createElement("input");
  maskedInput.className = "form-control";
  maskedInput.id = "maskedInput";
  //add function to set correct value
  maskedInput.onInput = () => {
      let newValue = parseInt($("#maskedInput").val().replace(/\D/g, ''), 10);
      $("#" + fieldName).val(newValue);
  }
  //apply mask
  $(maskedInput).mask('000.000.000');
  //insert maskedInput after initial one
  $(maskedInput).insertAfter($("#" + fieldName));

});

Looking for sintax errors, I have tried to change "oninput" to "onInput", but it didn't change anything.

Thanks for your help!

[OOlashyn]

Hi @MS5 ,

Sorry for the long reply. You don't need to change oninput to onInput. Can you verify that you followed @OliverRodrigues article and added mask.js library to your page? Code will not work without it. Sorry if I didn't make it clear enough with my answer. Also, can you check the Developer Console for any errors if you did add it? (Ctrl+Shift+I (on Windows in Chrome) > Console tab)?

[MS5]

Hi @OOlashyn,

Thank you for your quick response. After adding the necessary js library it worked! The only problem I am having is in the case I have values which are not integers, for example 3.192,12. The mask only lets me introduce 3.192, ignoring the "," character. I have modified the mask to "000.000.000,00" but it only solves part of the issue, only being able to introduce decimals if the number is big enough. The only solution that comes to mind is to modify the mask depending on the value introduced...

I was wondering if I could also introduce actions like the "oninput" for my normal inputs, to be able to calculate the value of another field, trying to do so doesn't work. This is the code I am using:

$(document).ready(function() {
  let baseImponible = "#cr027_baseimponiblenumber";
  let importeTotal = "#cr027_importe";
  let iva = "#cr027_iva";
  //hide initial field
  $(baseImponible).hide();
  //create new masked input
  let maskedInput = document.createElement("input");
  maskedInput.className = "form-control";
  maskedInput.id = "maskedInput";
  //add function to set correct value
  maskedInput.oninput = () => {
      let newValue = parseFloat($("#maskedInput").val().replace(/\D/g, ''), 10);
      $(baseImponible).val(newValue);
      let calculatedValue = (1 + parseInt($(iva).val().replace(/\D/g, ''), 10) / 100) * newValue;
      $(importeTotal).val(calculatedValue);
  }

  $(iva).oninput = () => {
      let newValue = parseFloat($("#maskedInput").val().replace(/\D/g, ''), 10);
      let calculatedValue = (1 + parseInt($(iva).val().replace(/\D/g, ''), 10) / 100) * newValue;
      $(importeTotal).val(calculatedValue);
  }
  //apply mask
  $(maskedInput).mask('000.000.000,00');
  //insert maskedInput after initial one
  $(maskedInput).insertAfter($(baseImponible));

});

[OliverRodrigues]

hi @MS5 

can you try the following as mask:  .mask("#,##0.00", {reverse: true});

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[OOlashyn]

Hi @MS5 ,

You can find more about oniput event here. Regarding the code that you shared - it looks correct. If you are not using any mask input on your iva fields you can just use parseInt($(iva).val()). I would advise you try to add console loggers to see values and how it is working to locate where exactly issue is happening

 $(iva).oninput = () => {
      console.log("Iva On Input started");
      let newValue = parseFloat($("#maskedInput").val().replace(/\D/g, ''), 10);
      console.log("newValue", newValue);
      let calculatedValue = (1 + parseInt($(iva).val().replace(/\D/g, ''), 10) / 100) * newValue;
      console.log("calculatedValue", calculatedValue);
      $(importeTotal).val(calculatedValue);
  }

[MS5]

Hi @OOlashyn and @OliverRodrigues ,

I have tried adding the reverse clause that Oliver mentioned and it worked, the value you get when accessing the fields value is not the one I am visualizing because when introducing the number I can't introduce the "," but it works, I just have to divide it by 100.

Regarding the "oninput" event for the "iva" field (not the masked inputs I created), it is not firing when introducing the value. What I am trying is to calculate a "total" value from a multiplication of the values of the fields "base" and "iva". I want that when any of these two values are updated to recalculate the "total" value. What I have accomplished with the following code is to be able to calculate the "total" value only when the "base" field is updated by the user. If the user updates the "iva" value nothing happens, it looks like the "oninput" event is not linking well to that field.

Another funny thing that happens is that the mask for the "total" field only fires when the user modifies the input directly, is there a way to also apply the mask when I modify the value through JavaScript?

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Code:

$(document).ready(function() {

let baseImponible = "#cr027_baseimponiblenumber";
let importeTotal = "#cr027_importe";
let iva = "#cr027_iva";

//hide total field
$(importeTotal).hide();

//Create masked field for total
let maskedTotal = document.createElement("input");
maskedTotal.className = "form-control";
maskedTotal.id = "maskedTotal";

//add function to Total to set its mask when receiving input
maskedTotal.oninput = () => {
console.log("Masked total");
let newValue = parseFloat($("#maskedTotal").val().replace(/\D/g, ''), 10) / 100;
$(importeTotal).val(newValue);
}

//apply mask to total
$(maskedTotal).mask("###.##0,00", {reverse: true});
//insert masked total after original total
$(maskedTotal).insertAfter($(importeTotal));

//hide base field
$(baseImponible).hide();

//create new masked base
let maskedBase = document.createElement("input");
maskedBase.className = "form-control";
maskedBase.id = "maskedBase";
//add function to base to set its mask and to calculate the total using the field "iva"
maskedBase.oninput = () => {
console.log("Masked base");
let newValue = parseFloat($("#maskedBase").val().replace(/\D/g, ''), 10) / 100;
$(baseImponible).val(newValue);
let calculatedValue = (1 + parseInt($(iva).val().replace(/\D/g, ''), 10) / 100) * newValue;
$(maskedTotal).val(calculatedValue.toFixed(2));
}

//apply mask to base
$(maskedBase).mask("###.##0,00", {reverse: true});
//insert masked base
$(maskedBase).insertAfter($(baseImponible));

//Calculate total when the "iva" field is introduced also (we also calculate it when the base is introduced)
$(iva).oninput = () => {
console.log("Iva On Input started");
let newValue = parseFloat($("#maskedBase").val().replace(/\D/g, ''), 10) / 100;
console.log("newValue: ", newValue);
let calculatedValue = (1 + parseInt($(iva).val().replace(/\D/g, ''), 10) / 100) * newValue;
console.log("calculated Value: ", calculatedValue);
$(importeTotal).val(calculatedValue);
}

});

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Thanks for all the help!

[OOlashyn]

Hi @MS5 ,

oninput method will fire only when user input information. It will not be triggered when you will update the data through code.

To fire input event you can use the trigger method in jquery directly after you modified the value:

// you need to update the value and then trigger input
$("#sampleFieldId").val("Some Sample Value");
$("#sampleFieldId").trigger("input");

// or you can chain them in one line
$("#sampleFieldId").val("Some Sample Value").trigger("input");