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">


<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:
</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>

July 20, 2021
·
Answer
·
Like
0
·
Follow
0

Shivankur (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.

July 20, 2021
·
Like
0
·
Dislike
0

Suraj 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

July 23, 2021
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Display comma in number on Visualforce Page

You need to sign in to do that.