[SalesForce] Formatting number values on Visualforce page

I am wondering if it is possible to dynamically format input numbers in Visualforce components when rendering as HTML. I am able to successfully accomplish this when rendering as output tags doing the following:

<apex:outputText value="{0, number, ###,##0}">
    <apex:param value="{!myNumber}"/>
</apex:outputText>

Which yields a value of 123,456 provided myNumber is an Integer of 123456. In an ideal world, this would work in inputText as well (and there are ways to accomplish this via javascript), but I am curious if there is anything "out of the box" with Salesforce.

UPDATE: Modified original question after noticing a syntax error.

Best Answer

I don't think there is any built-in SF function that will achieve exactly what you want. But you might be able to get close by mixing in a bit of javascript. The below is something I have scratched out here and isnt complete but should go the right way.

I think you could use a combination of a hidden inputText field to hold the value and an output field for displaying. When the outputText is clicked on it is hidden by a js function and the inputText is shown. When the input text is changed a js function hides the input and an actionSupport fires to update the outputText display. The action support may need to also update the controller with the new value but I havent added that at the moment.

<apex:inputField value="{!Object.myNumber}" id="myNumberInput"onclick="hideInput('myNumber')">
    <apex:actionSupport event="onchange" reRender="myNumberDisplay"/>
</apex:inputField> 

<apex:outputText value="{0, number, ###,##0}" id="myNumberDisplay" onclick="showInput('myNumber')">
    <apex:param value="{!myNumber}"/>
</apex:outputText>

Related Solutions

[SalesForce] Add more than 1000 picklist values in visualforce page (controller 1000 list items limit)

I'd say "you're doing it wrong" ;)

Every time you're hitting a limit like that you should stop and ask if that's really what you need to do. Even if you'd be able to input 50K contacts here - what would usability of such monster be? How is user expected to scroll through this? I'd say a lookup with a search function is really the way to go, that's what it is for.

Have you considered using an autocomplete? Jeff Douglas's blog contains a really nice example on dynamic search - it's not exactly autocompletion but you shouldn't have too much trouble modifying it.

An alternative might be @BobBuzzard's VF lookup

Or simply marry jqueryUI autocomplete and a @RemoteAction

But if you insist on reading further... ;)

public class picklistTest{
    public String selectedVal {get;set;}
    public List<SelectOption> getOptions1(){
        List<SelectOption> retVal = new List<SelectOption>();
        for(Integer i = 0; i < 1000; ++i){
            retVal.add(new SelectOption(String.valueOf(i+1), String.valueOf(i+1)));
        }
        return retVal;
    }
    public List<SelectOption> getOptions2(){
        List<SelectOption> retVal = new List<SelectOption>();
        for(Account a : [SELECT Id, Name FROM Account]){
            retVal.add(new SelectOption(a.Id, a.Name));
        }
        return retVal;
    }
    public List<SelectOption> getOptions3(){
        List<SelectOption> retVal = new List<SelectOption>();
        for(Contact c : [SELECT Id, LastName FROM Contact]){
            retVal.add(new SelectOption(c.Id, c.LastName));
        }
        return retVal;
    }
}

<apex:page controller="picklistTest">
<apex:form>
    <apex:selectList value="{!selectedVal}" size="1">
        <apex:selectOptions value="{!options1}"/>
        <apex:selectOption itemValue="Hi StackExchange" itemLabel="Hi StackExchange"/>
        <apex:selectOptions value="{!options2}"/>
        <apex:selectOptions value="{!options3}"/>
    </apex:selectList> 
</apex:form>
</apex:page>

So you can get your query results, build a <List<List<SelectOption>> for example and then have a combo of <apex:repeat> + <apex:selectOptions>... I still advise against doing this though ;)

[SalesForce] VisualForce page not formatting correctly

The reason the page is rendering the way it is, is because of your markup and the tag you are using.

The apex:panelGrid tag creates an HTML table with elements within each row up to the specified number of items per row, in your case columns=2.

It appears that you've either got an extra nested panelGrid tag that you don't intend or you are attempting to use an incorrect tag for the task at hand.

As you can see in your simplified markup below, there are two columns... and the highSchoolPanel is contained within the first cell of the second row of the panelGrid, with nothing specified to be rendered in the second cell. A panelGrid child element (rendered as a td) cannot span multiple columns in its row.

<apex:outputPanel id="studType">
<apex:outputText styleclass="tableHeader" value="High School Information" rendered="{!studentType=='Freshman'}" />
<apex:outputText styleclass="tableHeader" value="" rendered="{!studentType=='Freshman'}" />

<!-- two column table specified -->
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!studentType=='Freshman'}">

   <!-- row 1 cell 1 -->
   <apex:panelGroup >
      <apex:outputText styleclass="label" value="Home Schooled"/>
   </apex:panelGroup>

   <!-- row 1 cell 2 -->
   <apex:inputField value="{!interest.Home_Schooled__c}" >
      <apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
   </apex:inputField>

   <!-- row 2 cell 1 -->
   <apex:outputPanel id="highSchoolPanel">

      <!-- nested table within the first cell in the second row -->
      <apex:panelGrid columns="2" rendered="{!interest.Home_Schooled__c==false}">
         <apex:panelGroup >
            <apex:outputText styleclass="label" value="High School Country"/>
         </apex:panelGroup>
         <apex:inputField value="{!interest.High_School_Country__c}">
            <apex:actionSupport event="onchange" rerender="highSchoolNamePanel"/>
         </apex:inputField>
         <apex:panelGroup >
            <apex:outputText styleclass="label" value="High School State/Province"/>
         </apex:panelGroup>
[snip]
      </apex:panelGrid>
   </apex:outputPanel>
</apex:panelGrid>

I would suggest moving the highSchoolPanel out of the panelGrid that contains it and add the rendered="{!studentType=='Freshman'}" to it so that it's visibility matches the other 'Freshman' items above it.

Best Answer

Related Solutions

[SalesForce] Add more than 1000 picklist values in visualforce page (controller 1000 list items limit)

[SalesForce] VisualForce page not formatting correctly

Related Topic