[SalesForce] 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:

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

Best Answer

I would recommend using FieldSets for your section layouts and perhaps add a toggle-able field widget:

<apex:component>
    <apex:attribute type="sObject" name="record" required="true"
        description="Record for which to display data" />
    <apex:attribute type="String" name="field" required="true"
        description="Field for which to display data" />
    <apex:attribute type="String" name="label" required="true"
        description="Label to display" />
    <apex:attribute type="Boolean" name="isEdit" default="false"
        description="Whether or not the field should be editable />

    <apex:outputLabel value="{!label}" />
    <apex:inputField rendered="{!isEdit}" value="{!record[field]} />
    <apex:outputField rendered="{!NOT(isEdit)}" value="{!record[field]} />
</apex:component>

Then in your View page:

<apex:pageBlockSection>
    <apex:repeat var="field"
        value="{!$ObjectType.Request_for_System_Change__c.FieldSets.LayoutSection1}">
        <apex:pageBlockSectionItem>
            <c:fieldWidget
                record="{!Request_for_System_Change__c}"
                field="{!field}" label="{!field.Label}" />
        </apex:pageBlockSectionItem>
    </apex:repeat>
</apex:pageBlockSection>

You would need to use a separate page for New and Edit and set the isEdit property to true.

Related Topic