+ Start a Discussion
JessBJessB 

Create Table in VF page with Form fields?

I have a VF page that is currently in the page layout under the standard "Lead Status" field in SF. I am replicating this field with a VF page that has the drop-down for edit directly in view, since we need our reps to easily change the Status field on their iPads (because in-line editing does not work on iPads). 

 

I need the VF page field name, the dropdown, and the save button all appear in one row, and have the field name directly line up to where all other left-hand column fields align in SF record pages. The VF page currently puts the start of the field name all the way at the edge of the record, unaligned with other field names.

 

What do I need to change to get this to align correctly, and appear all on one row?

 

Here is the VF page:

<apex:page standardcontroller="Lead" extensions="TestLeadCancel">
    <apex:form >
    <apex:outputPanel id="reloadPanel" rendered="{!reloadNeeded}" >
            <script type="text/javascript">
                // redirect the top level window
                window.top.location.href = '{!pageURL}';
            </script>   
        </apex:outputPanel>
        <h2>Lead Status</h2>
           <apex:inputhidden value="{!Lead.Id}"/>
           <apex:inputfield value="{!Lead.Status}"/>
           <apex:commandbutton value="Save" action="{!Save}"/>
    </apex:form>
</apex:page>

 

Here is the class:

public class TestLeadCancel {
    
    ApexPages.StandardController sc = null;
    Lead ld;
    
    public String pageUrl {set;}
    public Boolean reloadNeeded {get; set;}
      
    public TestLeadCancel(ApexPages.StandardController ctlr)  
    {  
       sc = ctlr;
       ld = (Lead) ctlr.getRecord();                 
    }  
    
    public String getPageUrl() {
        PageReference pr = new ApexPages.StandardController(ld).view();
        return pr.getUrl();
    }
             
    public PageReference save()  
    {  
        ld = (Lead) sc.getRecord();
        update ld;        
        reloadNeeded = true;
        return null;            
    }
    
    public PageReference cancel()
    {
        ld = (Lead) sc.getRecord();
        reloadNeeded = true;
        return null;        
    }      
}

 

BDArnzBDArnz

Have you tried using simple HTML table markup?  This would force the fields into a single row:

 

<table>
	<tr>
		<td><h2>Lead Status</h2></td> 
		<td><apex:inputhidden value="{!Lead.Id}"/><apex:inputfield value="{!Lead.Status}"/></td>
		<td><apex:commandbutton value="Save" action="{!Save}"/></td>

	<tr>


</table>


 I put the hidden control into the same cell as the input field.  It should not affect the layout since it's hidden.

 

It would probably take other formatting tricks to get it to line up with the page fields but maybe this'll get you started.