Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Melissa BunchMelissa Bunch 

Display comma in number on Visualforce Page

Hello,

I have a visualforce page that displays currency and it shows a $ and decimal just fine, but it isn't displaying commas.

The code is below (I did not write it - I am not a dev). Is there an easy input I can add to have a comma display?

The fields populate with existing values and area also editable, if that matters.

<apex:page standardController="Account" extensions="New_Business_Plan_Process_Controller" action="{!mangerCheckAction}"  showheader="false" sidebar="false" standardStylesheets="false">
   <!-- <script src="jquery.js" type="text/javascript"></script>-->

    <apex:form id="formId">

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <apex:stylesheet value="{!URLFOR($Resource.ManningtonSlds, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

      <style>
      body{background:url("/resource/ManningtonSlds/assets/images/body-noise.jpg") repeat 0 0;}
      .slds-container--large{ margin: 0 auto;padding:0 1rem}

      .main-sec{border-radius:5px;border:2px solid #009ddc;box-shadow:0 0 6px rgba(0,0,0,0.6);margin:3rem 0 1rem;background:#fff}
      .sldsform-details{padding:1.5rem 1rem 1rem;}
      .sldsform-sec .slds-form-element__row{padding-bottom:1rem;display:flex; display:-webkit-flex; align-items: center; -webkit-align-items: center;}
      .sldsform-sec .sldsleft-col{min-width:300px;padding-right:1.5rem;text-align:right}
      .sldsform-sec .sldsright-col{width:400px;position:relative}
      .slds-btn-row{display:flex; display:-webkit-flex; justify-content: center;margin-top:0.5rem}
      .Mannington .heading{background:#009ddc;color:#fff;padding:0.25rem 0 0.3rem;text-align:center;font-weight:700 }
      .currencyinput{    position: absolute;left: 5px;top: 0;line-height:32px;}
      .common-error-message .message table{color:#cc0000}
      /*resposive css start */
       @media (max-width: 767px) {
       .main-sec{margin-top:1rem}
       .sldsform-sec .sldsleft-col{min-width:230px}

       }

       @media (max-width: 479px) {

       .sldsform-sec .slds-form-element__row{padding-bottom:0;flex-wrap: wrap;-webkit-flex-wrap: wrap;}
       .sldsform-sec .sldsleft-col{width:100%;text-align:left;padding:0 0 5px 0}
       .sldsform-sec .sldsright-col{width:100%;padding-bottom:0.8rem}
       .sldsform-sec .first-form-element__row {flex-wrap: inherit;-webkit-flex-wrap: inherit;padding-bottom:1rem}
       .sldsform-sec .first-form-element__row .sldsleft-col{min-width:80px;padding:0 10px 0 0;width:auto}
       .sldsform-sec .first-form-element__row .sldsright-col{padding-bottom:0}
       }
      </style>
    </head>
    <div class="common-error-message">
     <apex:pageMessages id="showmsg"></apex:pageMessages>
     </div>
    <div class="Mannington">
    <div class="slds-container--large">
    <div class="main-sec">
    <h1 class="slds-text-heading--medium heading">Business Plan</h1>
    <div class="slds-scope sldsform-details">

           <apex:outputPanel id="divShow0" rendered="{!managerFlag}" >
                <div class="sldsform-sec">
                    <div class="slds-form-element__row first-form-element__row">
                        <div class="sldsleft-col">
                            Account:
                        </div>
                        <div class="sldsright-col">
                            {!Acc.Name}
                        </div>
                    </div>
                   <div class="slds-form-element__row">
                       <div class="sldsleft-col">
                            Choose Product Category:
                        </div>
                        <div class="sldsright-col">
                         <div class="slds-select_container">
                            <apex:selectList styleClass="slds-select" id="PickList" value="{!ValuePickList}" size="1" required="true">
                                <apex:selectOptions value="{!PicklistValues}"/>
                                <apex:actionSupport event="onchange" reRender="formId" action="{!showDiv}"/>
                            </apex:selectList>
                            </div>
                        </div>
                    </div>
                </div>

  </apex:outputPanel>
    <apex:outputPanel id="divShow" >
        <apex:outputPanel id="NetPotential" rendered="{!flag}">
            <div class="sldsform-sec">
               <div class="slds-form-element__row">
                    <div class="sldsleft-col">
                        {!ValuePickList} Annual Purchase Potential:
                    </div>
                   <div class="sldsright-col">
                     <span class="currencyinput">$</span>
                    <apex:inputtext styleclass="slds-input " html-type="number"  value="{!netPotential}">

                    </apex:inputtext>

                    </div>
                </div>

                <div class="slds-form-element__row">
                    <div class="sldsleft-col">
                        {!ValuePickList} Annual Commitment:
                    </div>
                    <div class="sldsright-col">
                     <span class="currencyinput">$</span>
                    <apex:inputtext styleclass="slds-input" html-type="number" value="{!commitment}"/>
                    </div>
                </div>

              <div class="slds-form-element__row">
                    <div class="sldsleft-col">
                        {!ValuePickList} Annual Revenue:
                    </div>
                    <div class="sldsright-col">
                     <span class="currencyinput">$</span>
                        <apex:Outputtext styleclass="slds-input" html-readonly="true"  value="{!AnnualRevenue}"/>

                    </div>
                </div>

               <!--  <div class="slds-form-element__row">
                    <div class="sldsleft-col">
                        Plan Name:
                    </div>
                    <div class="sldsright-col">
                        <apex:inputtext styleclass="slds-input"   value="{!planName}" />
                    </div>
                </div> -->
                <div class="slds-form-element__row">
                    <div class="sldsleft-col">
                        Plan:
                    </div>
                    <div class="sldsright-col">
                        <apex:inputtextarea styleclass="slds-input"   value="{!plan}"/>
                    </div>
                </div>



            </div>
            <div class="slds-btn-row">
                <apex:commandButton styleClass="slds-button slds-button--brand" value="Save Business Plan" action="{!updatePlan}" oncomplete="closeWindowFunc();" rerender="formId"/>
                <apex:commandButton styleClass="slds-button slds-button--destructive" value="Cancel"  onclick="closeButton();" rerender="formId"/>
                </div>


        </apex:outputPanel>
    </apex:outputPanel>
    </div>
    </div>
   </div>
   </div>
   <script>
    function closeWindowFunc()
    {
        var flag="{!closeFlag}";
        //alert(flag);
        if(flag=='true')
        {
            var aid="{!acc.id}"
            var url='/'+aid;
            if((typeof sforce != 'undefined') && (sforce != null))
            {
                // Salesforce1 navigation
                sforce.one.navigateToSObject(aid);
            } else
            {
                window.close();
            }
        }

    }

    function closeButton()
    {
        var aid="{!acc.id}"
        var url='/'+aid;
        //alert(url);
        /*if ((typeof sforce != 'undefined') && sforce && (!!sforce.one))
         {
                alert(url);             // Salesforce1 navigation
                     sforce.one.navigateToURL(navigateURL);
         }*/
         if((typeof sforce != 'undefined') && (sforce != null))
        {
            sforce.one.navigateToSObject(aid);
        }
         else
         {
          window.close();
         }
    }








    </script>
    </apex:form>

</apex:page>
ShivankurShivankur (Salesforce Developers) 
Hi Melissa,

You'll need to use outputtext to format your total number.
 
Assuming your field is called Quote.Total_Price__c, the following should do the trick: 
<apex:outputText value="{0, number, ###,###,###,##0.00}"><apex:param value="{!Quote.Total_Price__c}"/></apex:outputText>
Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.
Suraj Tripathi 47Suraj Tripathi 47
Hi Melissa,
Greetings!,

Please use outputText with formatted values.
for example, 
<apex:outputText value="{0, number, ###,##0}" id="myNumberDisplay" >
    <apex:param value="{!myNumber}"/>
</apex:outputText>

Thank you!

Regards,
Suraj Tripathi