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
Super User

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 Pages Super User | MVP


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 Pages Super User | MVP


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

Super User of the Month | Drew Poggemann

As part of a new monthly feature in the Community, we are excited to share that Drew Poggemann is our featured Super User for the month of February 2024. If you've been in the Community for a while, we're sure Drew's name is familiar to you, as he is one of our most active contributors--he's been a Super User for five consecutive seasons!   Since authoring his first reply 5 years ago to his 514th solution authored, Drew has helped countless Community members with his insights and expertise. In addition to being a Super User, Drew is also a User Group leader and a Microsoft MVP. His contributions to our Super User sessions and to the new SUIT program are always welcome--as well as his sense of humor and fun-loving way of sharing what he knows with others.   When Drew is not solving problems and authoring solutions, he's busy overseeing the Solution Architecture team at HBS, specializing in application architecture and business solution strategy--something he's been doing for over 30 years. We are grateful for Drew and the amazing way he has used his talent and skills to help so many others in the Community. If you are part of the SUIT program, you got to hear some great tips from Drew at the first SUIT session--and we know he still has much more to share!You can find him in the Community and on LinkedIn. Thank you for all you do, Drew!

Announcing Power Apps Copilot Cookbook Gallery

We are excited to share that the all-new Copilot Cookbook Gallery for Power Apps is now available in the Power Apps Community, full of tips and tricks on how to best use Microsoft Copilot as you develop and create in Power Apps. The new Copilot Cookbook is your go-to resource when you need inspiration--or when you're stuck--and aren't sure how to best partner with Copilot while creating apps.   Whether you're looking for the best prompts or just want to know about responsible AI use, visit Copilot Cookbook for regular updates you can rely on--while also serving up some of your greatest tips and tricks for the Community. Our team will be reviewing posts using the new "Copilot Studio" label to ensure we highlight and amplify the most relevant and recent content, so you're assured of high-quality content every time you visit. If you share a post that gets featured in the curated gallery, you'll get a PM in the Community to let you know!The curated gallery is ready for you to experience now, so visit the new Copilot Cookbook for Power Apps today: Copilot Cookbook - Power Platform Community. We can't wait to see what you "cook" up!    

Celebrating a New Season of Super Users with Charles Lamanna, CVP Microsoft Business Applications

February 8 was the kickoff to the 2024 Season One Super User program for Power Platform Communities, and we are thrilled to welcome back so many returning Super Users--as well as so many brand new Super Users who started their journey last fall. Our Community Super Users are the true heroes, answering questions, providing solutions, filtering spam, and so much more. The impact they make on the Communities each day is significant, and we wanted to do something special to welcome them at our first kickoff meeting of the year.   Charles Lamanna, Microsoft CVP of Business Applications, has stressed frequently how valuable our Community is to the growth and potential of Power Platform, and we are honored to share this message from him to our 2024 Season One Super Users--as well as anyone who might be interested in joining this elite group of Community members.     If you want to know more about Super Users, check out these posts for more information today:    Power Apps: What is A Super User? - Power Platform CommunityPower Automate: What is A Super User? - Power Platform Community Copilot Studio: What is A Super User? - Power Platform Community Power Pages: What is A Super User? - Power Platform Community

February 2024 User Group Update: Welcoming New Groups and Highlighting Upcoming Events

It's a new month and a brand-new year, which means another opportunity to celebrate our amazing User Groups!Each month, we highlight the new User Groups that have joined the community. It's been a busy season for new groups, because we are thrilled to welcome 15 New User Groups! Take a look at the list below, shared by the different community categories. If your group is listed here, give this post a kudo so we can celebrate with you!   We love our User Groups and the difference they make in the lives of our Community! Thank you to all the new User Groups, new User Group leaders--we look forward to hearing about your successes and the impact you will leave!   In addition to our monthly User Group spotlight, it's a great time to share some of the latest events happening in our User Group community! Take a look at the list below to find one that fits your schedule and need! There's a great combination of in-person and virtual events to choose from. Also, don't forget to review the many events happening near you or virtually! It's a great time of year to connect and engage with User Groups both locally and online. Please Welcome Our NEW User Groups   Power Platform: Heathcare Power Platform User Group Power Platform Connect Hub Power Platform Usergroup Denmark Mexico Norte- Power Platform User Group Pune Power User Group Sudbury Power Platform User GroupMicrosoft User Group GhanaMPPBLR - Microsoft Power Platform Bengaluru User Group Power Apps:   Myrtle Beach Power Platform User GroupAnanseTechWB PowerApps Copilot Studio: Pathfinders Power Platform Community Dynamics365: Cairo, Egypt MSD 365 Business Central/NAV/F&O User GruopMS Dynamics 365 Business Central LatamCincinnati OH D365 F&O User Group February User Group Events February 2024 Cleveland Power Platform User GroupPortallunsj - Februar 2024Indiana D365/AX February User Group MeetingQ1 2024 KC Power Platform and Dynamics 365 CRM Users Group 

Super Users 2024 Season One is Here!

   We are excited to announce the first season of our 2024 Super Users is here! Our kickoff to the new year welcomes many returning Super Users and several new faces, and it's always exciting to see the impact these incredible individuals will have on the Community in 2024! We are so grateful for the daily difference they make in the Community already and know they will keep staying engaged and excited for all that will happen this year.   How to Spot a Super User in the Community:Have you ever written a post or asked for help in the Community and had it answered by a user with the Super User icon next to their name? It means you have found the actual, real-life superheroes of the Power Platform Community! Super Users are our heroes because of the way they consistently make a difference in the Community. Our amazing Super Users help keep the Community a safe place by flagging spam and letting the Community Managers know about issues. They also make the Community a great place to find answers, because they are often the first to offer solutions and get clarity on questions. Finally, Super Users share valuable insights on ways to keep the Community growing, engaging, and looking ahead!We are honored to reveal the new badges for this season of Super Users! Congratulations to all the new and returning Super Users!     To better answer the question "What is a Super User?" please check out this article: Power Apps: What is A Super User? - Power Platform CommunityPower Automate: What is A Super User? - Power Platform Community Copilot Studio: What is A Super User? - Power Platform Community Power Pages: What is A Super User? - Power Platform Community

Did You Attend the Microsoft Power Platform Conference in 2022 or 2023? Claim Your Badge Today!

If you were one of the thousands of people who joined us at the first #MPPC Microsoft Power Platform Conference in 2022 in Orlando--or attended the second-annual conference in Las Vegas in 2023--we are excited to honor you with a special community badge! Show your support for #MPPC Microsoft Power Platform Conference this year by claiming your badge!           Just follow this link to claim your badge for attending #MPPC in 2022 and/or 2023: MPPCBadgeRequest    Want to earn your badge for 2024? Just keep watching our News & Announcements for the latest updates on #MPPC24.

Users online (5,079)