+ Start a Discussion
Our Man In BananasOur Man In Bananas 

New, Edit, Save, Submit buttons in VisualForce page

I am a beginner with VisualForce pages, and a 2 week developer with SalesForce custom objects and APEX triggers/classes.

I have built a custom object called **Change Request** (with API name `Request_for_System_Change__c`), with 3 record types.

I now need to write a VisualForce page that will replicate all of the functionality of the default page, but use the styles of my org.

So I have taken the Master layout VF page provided by my org, and started to add my fields to it in the section 'Show Main data in the main panel' in the code below.

I am a little confused however about the mechanics of this.

I get that I can use `<apex:outputField value=` for each of the standard and custom fields in my custom object in display view, and use a form with `<apex:inputField` elements (with HTML `<Div>` and `<Table>` etc) and I guess I control which fields are displayed using the `render` attribute based on a mode variable, but how will I tell my standard controller that

 1. should I put all the fields for **New/Edit** and **View** modes on the same page
 2. How will I switch between modes?
 3. How would I tell the standard controller to show a list of exiting records and to display an existing records, edit an existing record for Update or **Submit for Approval**

Here is the code I have so far (in the section Show Main data in the main panel):
 
<apex:page id="CIF_Application" StandardController="Request_for_system_Change__c"
       standardStylesheets="false"
       showHeader="false"  >
   
    <head>
    <title>Change Requests </title>
    </head>
   
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
   
      <apex:stylesheet value="{!URLFOR($Resource.BCSitesStyles, 'sifr3.css')}"/>
      <apex:includeScript value="{!URLFOR($Resource.BCSitesScripts, 'sifr3.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.BCSitesScripts, 'sifr-config.js')}"/>   
   
    <apex:composition template="cif_Layout" >
   
    <apex:define name="Title">
     Change Request1
    </apex:define>
   
    <apex:define name="PageStatus" >
     <apex:actionStatus startstyleClass="popupBackgroundStatusStart" stopstyleClass="popupBackgroundStatusStop"   id="MainStatustmp">
      <apex:facet name="start">
       <apex:image value="{!$Resource.AjaxIcon}" />
      </apex:facet>
     </apex:actionStatus>
   
    </apex:define>  
         
    <!-- ------------------------------------------------------------ -->
    <!-- Top Horizontal Menu  -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="NavTool" >
     
      <apex:outputpanel id="NavPanel" rendered="true">
      <div id="TopToolBar" style="margin-left: -20px">   
      <apex:actionStatus startstyleClass="popupBackgroundStatusStart" stopstyleClass="popupBackgroundStatusStop"   id="NavStatus" />
      
       <c:cCif_Application_Navbar />         
      </div>
         </apex:outputpanel> 
    </apex:define>
   
    <!-- ------------------------------------------------------------ -->
    <!-- Side bar Navigation section (show Stage of the Application) -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="SideBar_Navigation">
     <c:cCIF_Application_Sidebar ActiveNavOption="1" mode="Console"/>
    </apex:define>
   
    <!-- ------------------------------------------------------------ -->
    <!-- Side bar Messages section (show Messages of the Application) -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="SideBar_Messages">
        <c:cCif_User_Info_Panel /> 
    </apex:define>   
         
    <!-- ------------------------------------------------------------ -->
    <!-- Shows Customer Name and Application Number top left of main Panel -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="Customer_Application_Name">
     
    </apex:define>
   
    <!-- ------------------------------------------------------------ -->
    <!-- Show Main data in the main panel -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="Main_Panel">
     <br/>
      <div class="mainpanelwidget OneMainPanel MainPanelTitlePadding" style="padding-right: 10px;">
     <table border="" style="width:100%; padding:3px" >
      <tr>
       <td>
       <font class="bocTextBold">Service Announcements</font>
        
       </td>
      <td>
       
      </td>
      </tr>
     </table>
        <apex:pageBlock title="Basic information">
           
            <apex:pageMessages />
            <apex:pageBlockSection columns="1" >
                <apex:outputField value="{! Request_for_System_Change__c.Request_Title__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.RecordTypeId }"/>
                <!--apex:outputField value="{! Request_for_System_Change__c.Owner }"/-->
                <apex:outputField value="{! Request_for_System_Change__c.Status__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Request_Priority__c }"/>
                <apex:outputField rendered="{!Request_for_System_Change__c.Request_Priority__c=='High'}"
                                  value="{! Request_for_System_Change__c.Reason_for_High_priority__c }"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection columns="2" >
                 <apex:outputField value="{! Request_for_System_Change__c.Department_Requested_by__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Description_of_change_requested__c }"/>
                 <apex:outputField value="{! Request_for_System_Change__c.Reason_for_data_request__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Systems_Affected__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Manager__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Date__c }"/>
                 <apex:outputField value="{! Request_for_System_Change__c.Are_Customers_affected_by_this_change__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Additional_information_comments__c }"/>
     <apex:outputField value="{! Request_for_System_Change__c.Benefits_Reasons__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.New_data_to_be_captured__c }"/>
     <apex:outputField value="{! Request_for_System_Change__c.Legal_Regulatory_Compliance_impact__c }"/>
                <apex:outputField value="{! Request_for_System_Change__c.Related_Committee_paper_or_action_point__c }"/>                     
            </apex:pageBlockSection>
        </apex:pageBlock>
    <apex:pageblocksection columns="1" id="pbs1" rendered="{!Request_for_System_Change__c.recordType == 'System Change Request'}">
         <apex:detail />
    </apex:pageblocksection>  
     </div>
    </apex:define>
   
    <!-- ------------------------------------------------------------ -->
    <!-- Show buttons for the page -->
    <!-- ------------------------------------------------------------ -->
    <apex:define name="Control_Panel">
     
     <!-- PUT BUTTONS IN HERE -->
     
    </apex:define>
       </apex:composition>
       </apex:page>

   
pconpcon
You really shouldn't put both the view and the edit/new pages in the same Visualforce page.  I would recommend that you have a View page and an Edit/New page (these can be seperate if you have a reason for them to be).  If all you are doing is injecting style sheets, you may want to look at using the apex:detail tag [1] instead and then you can manage everything from your layout (including your record type specific fields).

[1] https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_detail.htm