cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MS5
Helper III
Helper III

format number when filling in

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!

9 REPLIES 9
OliverRodrigues
Super User II
Super User II

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

OOlashyn
Super User
Super User

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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

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!

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)?

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

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));
});

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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);
  }

 

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

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!

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");
----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (2,629)