+ Start a Discussion
b.ajitkumarb.ajitkumar 

Placement of a related list in between the fields on a VisualForce Page

I have two custom objects:
SOO and DMOS with a Master Detail relationship between them.
SOO being the Master object.

I am creating a VisualForce page. I want to show some fields of SOO then the related list (DMOS) and then the remaining fields of the SOO object.

I tried to implement it as follows:

<apex:page standardController="SOO__c" >
 <apex:form >
<apex:pageBlock >
    <apex:pageblockbuttons >
       <apex:commandButton action="{!save}" value="Save"/>
       <apex:commandButton action="{!delete}" value="Delete"/>
    </apex:pageblockbuttons> 
    <apex:pageblockSection title="SOO Detail" Columns="2"  >
        <apex:inputField value="{! SOO__C.Name}"/>
        <apex:inputField value="{! SOO__C.OwnerId}"/>
        <apex:inputField value="{! SOO__C.Account__c}"/>
        <apex:inputField value="{! SOO__C.SSO_Date__c}"/>        
    </apex:pageblockSection>
    
</apex:pageBlock>
</apex:form> 
<apex:relatedList List="DMOS__r" />
<div style="width:100%;text-align:right;font-size:200%;font-weight:bold;">
    <apex:outputLabel value="Sky Score: " style="font-size:50%;font-weight:normal;"></apex:outputLabel>
    <apex:outputField value="{! SOO__C.SKY_Score__c}"/>
</div>
<apex:form >
    <apex:pageBlock >
        <apex:pageblockbuttons >
           <apex:commandButton action="{!save}" value="Save"/>
           <apex:commandButton action="{!delete}" value="Delete"/>
        </apex:pageblockbuttons> 
        <apex:pageblockSection title="SOO Detail Continued..." Columns="2"  >
        <apex:inputField value="{! SOO__C.Objective__c}"/>
        <apex:inputField value="{! SOO__C.csi__c}"/>
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

 

The problem with this approach is that I am getting two sets of save buttons one for each form. I have read that it is better to have a single form per page.

One more solution that I can think of is having a custom controller/extension to the standard controller with custom Save functionality.

Please let me know what is the best way to achieve this. The reason for customization is that I am trying to simulate an excel file that the customer was using and the customer wants everything to be looking similar to the excel.

Best Answer chosen by Admin (Salesforce Developers) 
b.ajitkumarb.ajitkumar

Finally I could figure out the solution to my problem with the inputs from various users on the forums and previous posts.

 

I have posted a screenshot of the output page and the code Here

 

Complete code of the page:

<apex:page standardController="SOO__c" >
 <apex:form >
<apex:pageBlock >
    <apex:pageblockbuttons >
       <apex:commandButton action="{!save}" value="Save"/>
       <apex:commandButton action="{!delete}" value="Delete"/>
       <apex:commandButton action="{!cancel}" value="Cancel"/>
    </apex:pageblockbuttons> 
    <apex:pageblockSection title="SOO Detail" Columns="2"  >
        <apex:inputField value="{! SOO__C.Name}"/>
        <apex:inputField value="{! SOO__C.OwnerId}"/>
        <apex:inputField value="{! SOO__C.Account__c}"/>
        <apex:inputField value="{! SOO__C.SSO_Date__c}"/>        
    </apex:pageblockSection>
    
    <apex:variable var="baseId" value="{!$CurrentPage.parameters.id}" />
    
    <apex:pageblockSection title="DMOS Detail" Columns="1">
        <apex:outputLink value="{!URLFOR( $Action.DMOS__c.New , null, [saveURL='/apex/testSSO1?id=' & baseId, retURL='/apex/testSSO1?id=' & baseId, CF00Ni0000009wo9x_lkid=SOO__c.Id , CF00Ni0000009wo9x=SOO__c.Name])}">New DMOS</apex:outputLink>
        <apex:pageBlockTable value="{!SOO__c.DMOS__r}" var="item" style="width:100%;">
            <apex:column headerValue="Action" styleClass="actionColumn">
                <apex:outputLink value="/{!item.id}/e?retURL=%2Fapex%2FtestSSO1%3Fid%3D{!baseId}" id="editLink" styleClass="actionLink">Edit</apex:outputLink> 
                |&nbsp;
                <apex:outputLink value="/setup/own/deleteredirect.jsp?delID={!item.id}&retURL=%2Fapex%2FtestSSO1%3Fid%3D{!baseId}" id="delLink" styleClass="actionLink">Del</apex:outputLink>
            </apex:column>
            <apex:column headerValue="Decision Maker Name"> <apex:outputLink value="/{!item.id}">{!item.name}</apex:outputLink> </apex:column> 
            <apex:column headerValue="Title">{!item.Title__c}</apex:column>
            <apex:column headerValue="Buyer Type">{!item.Buyer_Type__c}</apex:column>
            <apex:column headerValue="Response Mode">{!item.Response_Mode__c}</apex:column>
            <apex:column headerValue="Position to SSO">{!item.Position_to_SSO__c}</apex:column>
            <apex:column headerValue="Influence Level">{!item.Influence_Level__c}</apex:column>
            <apex:column headerValue="Competetive Alliance">{!item.Competetive_Alliance__c}</apex:column>
            <apex:column headerValue="Commercial Position">{!item.Commercial_Position__c}</apex:column> 
            <apex:column headerValue="Purchase Status">{!item.Purchase_Status__c}</apex:column>
        </apex:pageBlockTable>
    </apex:pageblockSection>

    <div style="width:100%;text-align:right;font-size:200%;font-weight:bold;background-color:#ccffdd">
        <apex:outputLabel value="Sky Score: " style="font-size:50%;font-weight:normal;"></apex:outputLabel>
        <apex:outputField value="{! SOO__C.SKY_Score__c}"/>
    </div>

    <apex:pageblockSection title="SOO Detail Continued..." Columns="2"  >
        <apex:inputField value="{! SOO__C.Objective__c}"/>
        <apex:inputField value="{! SOO__C.csi__c}"/>
    </apex:pageblockSection>

</apex:pageBlock>
</apex:form>
</apex:page>

 

All Answers

bob_buzzardbob_buzzard

The single versus multi-form is more of a stylistic/understanding thing now.  The problem used to be multiple copies of the Viewstate, one per form, but Visualforce handles this now.  That said, there's no reason to have two forms that I can see.

 

The copies of the buttons are being produced by the pageblockbuttons components - by default they put buttons at the top and bottom of the page block.  If you set the location attribute you can have one set of buttons at the top of the page and another at the bottom - see the underlined attributes below:

 

<apex:page standardController="SOO__c" >
 <apex:form >
<apex:pageBlock >
    <apex:pageblockbuttons location="top">
       <apex:commandButton action="{!save}" value="Save"/>
       <apex:commandButton action="{!delete}" value="Delete"/>
    </apex:pageblockbuttons> 
    <apex:pageblockSection title="SOO Detail" Columns="2"  >
        <apex:inputField value="{! SOO__C.Name}"/>
        <apex:inputField value="{! SOO__C.OwnerId}"/>
        <apex:inputField value="{! SOO__C.Account__c}"/>
        <apex:inputField value="{! SOO__C.SSO_Date__c}"/>        
    </apex:pageblockSection>
    
</apex:pageBlock>
<apex:relatedList List="DMOS__r" />
<div style="width:100%;text-align:right;font-size:200%;font-weight:bold;">
    <apex:outputLabel value="Sky Score: " style="font-size:50%;font-weight:normal;"></apex:outputLabel>
    <apex:outputField value="{! SOO__C.SKY_Score__c}"/>
</div>
    <apex:pageBlock >
        <apex:pageblockbuttons location="bottom">
           <apex:commandButton action="{!save}" value="Save"/>
           <apex:commandButton action="{!delete}" value="Delete"/>
        </apex:pageblockbuttons> 
        <apex:pageblockSection title="SOO Detail Continued..." Columns="2"  >
        <apex:inputField value="{! SOO__C.Objective__c}"/>
        <apex:inputField value="{! SOO__C.csi__c}"/>
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

 

b.ajitkumarb.ajitkumar

Hi Bob, Thanks for the reply.

 

There are two problems:

 

1. I cannot nest the "<apex:relatedList />" tag within a "<apex:form>" tag. This is the reason why I had to go for the below mentioned arrangement.

 

<apex:form>
  <apex:pageBlockButtons location="top">
  fields 1...
</apex:form>

<apex:relatedList />

<apex:form>
  <apex:pageBlockButtons location="bottom">
  remaining fields 2...
</apex:form>

 

2. As per your suggestion I can use location="top / bottom" attributes with pageBlockButtons but the problem that I run into is that the buttons save only the fields mentioned in their respective forms.

 

e.g. buttons placed in from1 save the fields placed in form1 only.

b.ajitkumarb.ajitkumar

Finally I could figure out the solution to my problem with the inputs from various users on the forums and previous posts.

 

I have posted a screenshot of the output page and the code Here

 

Complete code of the page:

<apex:page standardController="SOO__c" >
 <apex:form >
<apex:pageBlock >
    <apex:pageblockbuttons >
       <apex:commandButton action="{!save}" value="Save"/>
       <apex:commandButton action="{!delete}" value="Delete"/>
       <apex:commandButton action="{!cancel}" value="Cancel"/>
    </apex:pageblockbuttons> 
    <apex:pageblockSection title="SOO Detail" Columns="2"  >
        <apex:inputField value="{! SOO__C.Name}"/>
        <apex:inputField value="{! SOO__C.OwnerId}"/>
        <apex:inputField value="{! SOO__C.Account__c}"/>
        <apex:inputField value="{! SOO__C.SSO_Date__c}"/>        
    </apex:pageblockSection>
    
    <apex:variable var="baseId" value="{!$CurrentPage.parameters.id}" />
    
    <apex:pageblockSection title="DMOS Detail" Columns="1">
        <apex:outputLink value="{!URLFOR( $Action.DMOS__c.New , null, [saveURL='/apex/testSSO1?id=' & baseId, retURL='/apex/testSSO1?id=' & baseId, CF00Ni0000009wo9x_lkid=SOO__c.Id , CF00Ni0000009wo9x=SOO__c.Name])}">New DMOS</apex:outputLink>
        <apex:pageBlockTable value="{!SOO__c.DMOS__r}" var="item" style="width:100%;">
            <apex:column headerValue="Action" styleClass="actionColumn">
                <apex:outputLink value="/{!item.id}/e?retURL=%2Fapex%2FtestSSO1%3Fid%3D{!baseId}" id="editLink" styleClass="actionLink">Edit</apex:outputLink> 
                |&nbsp;
                <apex:outputLink value="/setup/own/deleteredirect.jsp?delID={!item.id}&retURL=%2Fapex%2FtestSSO1%3Fid%3D{!baseId}" id="delLink" styleClass="actionLink">Del</apex:outputLink>
            </apex:column>
            <apex:column headerValue="Decision Maker Name"> <apex:outputLink value="/{!item.id}">{!item.name}</apex:outputLink> </apex:column> 
            <apex:column headerValue="Title">{!item.Title__c}</apex:column>
            <apex:column headerValue="Buyer Type">{!item.Buyer_Type__c}</apex:column>
            <apex:column headerValue="Response Mode">{!item.Response_Mode__c}</apex:column>
            <apex:column headerValue="Position to SSO">{!item.Position_to_SSO__c}</apex:column>
            <apex:column headerValue="Influence Level">{!item.Influence_Level__c}</apex:column>
            <apex:column headerValue="Competetive Alliance">{!item.Competetive_Alliance__c}</apex:column>
            <apex:column headerValue="Commercial Position">{!item.Commercial_Position__c}</apex:column> 
            <apex:column headerValue="Purchase Status">{!item.Purchase_Status__c}</apex:column>
        </apex:pageBlockTable>
    </apex:pageblockSection>

    <div style="width:100%;text-align:right;font-size:200%;font-weight:bold;background-color:#ccffdd">
        <apex:outputLabel value="Sky Score: " style="font-size:50%;font-weight:normal;"></apex:outputLabel>
        <apex:outputField value="{! SOO__C.SKY_Score__c}"/>
    </div>

    <apex:pageblockSection title="SOO Detail Continued..." Columns="2"  >
        <apex:inputField value="{! SOO__C.Objective__c}"/>
        <apex:inputField value="{! SOO__C.csi__c}"/>
    </apex:pageblockSection>

</apex:pageBlock>
</apex:form>
</apex:page>

 

This was selected as the best answer