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

Notifications

Announcements

Community site session details

Community site session details

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

Liquid tag to format number

(0) ShareShare
ReportReport
Posted on by

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:
I have the same question (0)
  • 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
    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
    8,338 Super User 2025 Season 2 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
    on at

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

  • Community Power Platform Member Profile Picture
    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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Pages

#1
Jerry-IN Profile Picture

Jerry-IN 71

#2
Fubar Profile Picture

Fubar 62 Super User 2025 Season 2

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard