web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Liquid tag to format n...
Power Pages
Answered

Liquid tag to format number

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

I would like to format a number as $1,234.4567. I am currently able to format the number to two decimal places using the following

 

item.price | format: "C", "en-US"
 
i know that i can use the round filter (eg: item.price | round: 4) to format a number to four decimals, but how can i apply the dollar symbol and commas?
Categories:
  • ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    Hi @Anonymous 

     

    Looking at the documentation. I can only see seven data types 

     

    ragavanrajan_0-1639547634205.png

     With the help of JavaScript and the combination of liquid. I played around with your scenario. Posting here as a reference

    In your page HTML area.  PFB self-explanatory 

     

    {% assign Price = "5557365.56565" %}
    <script>
     $( document ).ready(function() {
     var itemPrice = '{{Price}}';
    	console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(itemPrice));
     var formattedItemPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(itemPrice);
     console.log(555, formattedItemPrice);
     $('#myTag').empty().append(formattedItemPrice);
    });
    </script>
    

     

    In your HTML tag have an id tag like below 

     

    <div class="row sectionBlockLayout" style="text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
     <div class="container" style="display: flex; flex-wrap: wrap;">
     <div class="col-md-12 columnBlockLayout">
     <h3 id="myTag"> Price here </h3>
     </div>
     </div>
    </div>

    Note: H3 element has myTag id 

     

    Hit Save> Sync Config and Browse the website ( Ctrl + F5) 

     

    Output: 

     

    ragavanrajan_1-1639547883244.png

    Hope it helps. 

     

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

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

  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    Thank you for your response, if i have to use JavaScript then i will, disappointing that there is no native way to do this formatting with Liquid. As my number is the result of a fetchxml query, i have a for loop where i am showing numbers in a table row, so i guess i'll need to find a way with JavaScript where it can format every instance of myTag

  • Fubar Profile Picture
    17 Super User 2026 Season 1 on at

    To just display a number:

    {{ 12345.6789 | decimals: 0, "en-US" | prepend: "$" }}
    
    Would give the resulte:
    
    $12,346
  • Verified answer
    Community Power Platform Member Profile Picture
    Microsoft Employee on at

    Thank you @Fubar , this is exactly what i was looking for!

  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    For future reference, obviously you need to set the decimals to your required precision such as below (for four decimals)

     

    {{ 12345.678901 | decimals: 4, "en-US" | prepend: "$" }}

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Leaderboard > Power Pages

#1
Mohsin Ali Profile Picture

Mohsin Ali 45

#2
sannavajjala87 Profile Picture

sannavajjala87 30 Super User 2026 Season 2

#3
11manish Profile Picture

11manish 22 Super User 2026 Season 2

Last 30 days Overall leaderboard