cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MartinVargas
Helper V
Helper V

Add field mask – PowerApps

I am working with forms in PowerApps portals, do the procedure of how to add masks to a field within an entity form in the following blog by @OliverRodrigues . And it worked pretty well.

 

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

 

MartinVargas_0-1652400981637.png

 

However, implement a list for the creation of a new record with the above form. But apparently it is not taking the programming of the code in this part.

 

MartinVargas_1-1652401010612.png

 

This is the form code:

$(document).ready(function(){
    

    //DECIMAL NUMBER

    let fieldName = "crb57_decimalnumber";
    //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 = parseFloat($("#maskedInput").val().replace(/\D/g, ''), 10)/100;
    console.log(newValue);
    $("#" + fieldName).val(newValue);
    }
    //apply mask
    $(maskedInput).mask("###,##0.00", {reverse: true});
    //insert maskedInput after initial one
    $(maskedInput).insertAfter($("#" + fieldName));

    // WHOLE NUMBER

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

    // TEXT

    $("#crb57_text").mask("#,##0.00", {reverse: true});

    
});

 

From my perspective you need to reference the JS. But I don't know this part.

 

$(document).ready(function(){
    
	src="/jquery.mask.min.js";

        ...
});

 

Could someone help me here?

 

Thanks in advance!

1 ACCEPTED SOLUTION

Accepted Solutions
OliverRodrigues
Super User
Super User

hi @MartinVargas the JS reference you can do in multiple places, in my article I am giving the example as being the Web Page, you can also add the reference in a generic Content Snippet called Tracking Code

simply create (or update) the content snippet and add the reference, this will make the mask js library be loaded on every page

 

hope this makes sense




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


 

View solution in original post

3 REPLIES 3
OliverRodrigues
Super User
Super User

hi @MartinVargas the JS reference you can do in multiple places, in my article I am giving the example as being the Web Page, you can also add the reference in a generic Content Snippet called Tracking Code

simply create (or update) the content snippet and add the reference, this will make the mask js library be loaded on every page

 

hope this makes sense




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


 

MartinVargas
Helper V
Helper V

Hi @OliverRodrigues, I did the solution you mentioned but I still have the same problem.

 

This is the content snippet I created

MartinVargas_0-1652454788855.png

 

MartinVargas
Helper V
Helper V

Apparently it was just capitalizing the first letter of "code".

 

Name: "Tracking Code"

 

Thank you very much.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Carousel News & Announcements 768460.png

What's New in the Community?

Check out the latest News & Events in the community!

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Users online (4,309)