+ Start a Discussion
Marc PannenbergMarc Pannenberg 

Formatting issues in Visual Force for column headers

Hi,

I've built a matrix of PageBlockTables with a bunch of values in the columns and the totals in the header. Now for the problems:
  • How do I format the header? None of my efforts to get the column header to align on the right hand side of the column has had any effect.
  • How do I display a currency symbol in the header?
Code:
<apex:facet name="header">&euro;{!totalCAssets}</apex:facet>
OR 
<apex:column style="text-align:right" headerstyle="text-align:right" width="25%" headerValue="&euro;{!totalCAssets}">

didn't work. It simply displays the string "&euro;

Still trying to work out a few other issues I'm experiencing, but those would be a great help already!

Thanks for your help!
Marc

Best Answer chosen by Admin (Salesforce Developers) 
jlojlo
Just realized that I was doing things the hard way. Here's the easy way:

Visualforce PageCode:

<apex:page standardcontroller="Opportunity">
<html>
<body>
<apex:form >
<table align="left" border="0">
<tr>
<td>Opportunity Name</td>
<td>{!Opportunity.Name}</td>
</tr>
<tr>
<td>Account Name</td>
<td>{!Opportunity.Account.Name}</td>
</tr>
<tr>
<td>Type</td>
<td>{!Opportunity.Type}</td>
</tr>
<tr>
<td>Close Date</td>
<td><apex:outputField value="{!Opportunity.CloseDate}"/></td>
</tr>
<tr>
<td>Stage Name</td>
<td>{!Opportunity.StageName}</td>
</tr>
<tr>
<td>Probability</td>
<td>{!Opportunity.Probability}</td>
</tr>
<tr>
<td>Amount</td>
<td><apex:outputField value="{!Opportunity.Amount}"/></td>
</tr>
<tr>
<td></td>
<td><apex:commandButton action="{!edit}" value="Edit"/></td>
</tr>
</table>
</apex:form>
</body>
</html>
</apex:page>



Message Edited by jlo on 10-23-2008 05:01 PM

All Answers

hisrinuhisrinu
Hi Marc,

You can try this.


<apex:column>
<apex:facet name="header">
<B>&euro</B>
</apex:facet>
&nbsp;{!list.Status__c}</apex:column>

Thanks
Srini
Marc PannenbergMarc Pannenberg
Hi Srini!

I ended up writing my own code in the controller that converts Double to String while formatting it the way currencies are displayed in sfdc. That way I don't have to worry about logic on the VPage should this ever move to multi-currency.

Thanks again for your help!
Marc
VornoVorno
How did you go about converting and formatting the Double as a String?

I'm facing a similar problem in getting a Double to present nicely with 2 decimal places, comma seperators for thousands etc.

Would you mind showing the code you used to do this with your currency example?

Regards
Vaughan
jlojlo
Here's some javascript that I've used to do currency formatting client-side. (You'll also notice some server-side date formatting)

Visualforce Page Code:
<apex:page standardcontroller="Opportunity">
<html>
<head>
<script type="text/javascript" src="{!$Resource.CurrencyJS}"/>
</head>
<body onload="formatAmounts();">
<apex:form > 
 <table align="left" border="0">
     <tr>
         <td>Opportunity Name</td>
         <td>{!Opportunity.Name}</td>
     </tr>
     <tr>
         <td>Account Name</td>
         <td>{!Opportunity.Account.Name}</td>
     </tr>
     <tr>
         <td>Type</td>
         <td>{!Opportunity.Type}</td>
     </tr>
     <tr>
         <td>Close Date</td>
         <td><apex:outputText rendered="{!IF(NOT(ISNULL(Opportunity.CloseDate)), true, false)}" value="{!month(Opportunity.CloseDate)}/{!day(Opportunity.CloseDate)}/{!year(Opportunity.CloseDate)}"/></td>
     </tr>
     <tr>
         <td>Stage Name</td>
         <td>{!Opportunity.StageName}</td>
     </tr>
     <tr>
         <td>Probability</td>
         <td>{!Opportunity.Probability}</td>
     </tr>
     <tr>
         <td>Amount</td>
         <td><div name="amount" id="amount">{!Opportunity.Amount}</div></td>
     </tr>
     <tr>
         <td></td>
         <td><apex:commandButton action="{!edit}" value="Edit"/></td>
     </tr>
   </table>
</apex:form>
</body>
</html>
</apex:page>

 
CurrencyJS Code:
/* Modified version of: http://javascript.internet.com/forms/currency-format.html */
function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)){ num = "0"; } var sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); var cents = num%100; num = Math.floor(num/100).toString(); if(cents < 10){ cents = "0" + cents; } for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++){ num = num.substring(0,num.length-(4*i+3))+',' + num.substring(num.length-(4*i+3)); } return (((sign)—'':'-') + '$' + num + '.' + cents); } function formatAmounts() { var amounts = null; try{ amounts = document.getElementsByName('amount'); } catch(e){ alert(e); } if(amounts != null){ for(i = 0; i < amounts.length; i++){ amounts[i].innerHTML = formatCurrency(amounts[i].innerHTML); } } }

 


jlojlo
Just realized that I was doing things the hard way. Here's the easy way:

Visualforce PageCode:

<apex:page standardcontroller="Opportunity">
<html>
<body>
<apex:form >
<table align="left" border="0">
<tr>
<td>Opportunity Name</td>
<td>{!Opportunity.Name}</td>
</tr>
<tr>
<td>Account Name</td>
<td>{!Opportunity.Account.Name}</td>
</tr>
<tr>
<td>Type</td>
<td>{!Opportunity.Type}</td>
</tr>
<tr>
<td>Close Date</td>
<td><apex:outputField value="{!Opportunity.CloseDate}"/></td>
</tr>
<tr>
<td>Stage Name</td>
<td>{!Opportunity.StageName}</td>
</tr>
<tr>
<td>Probability</td>
<td>{!Opportunity.Probability}</td>
</tr>
<tr>
<td>Amount</td>
<td><apex:outputField value="{!Opportunity.Amount}"/></td>
</tr>
<tr>
<td></td>
<td><apex:commandButton action="{!edit}" value="Edit"/></td>
</tr>
</table>
</apex:form>
</body>
</html>
</apex:page>



Message Edited by jlo on 10-23-2008 05:01 PM
This was selected as the best answer
boihueboihue

Hi,

I'm also facing with this issue and thanks for your solution.

Regards!

ShikibuShikibu
This markup will fail if you move to advanced currency management/dated exchange rates. The VF docs say You cannot associate this output field with a currency merge field if that field value is calculated using dated exchange rates. I've been struggling with this, and our salesforce account exec tells me that there is no workaround.
LinvioIncLinvioInc

Anyone know if there's been any movement at SF torward making visualforce friendly with Advanced Multicurrency support (e.g. the issue above)?

 

- Ron