Edit the record in a related list of an object without opening the related list edit page

Use Case

If there is a requirement to edit the record in a related list of an object without opening the related list edit page, here is a solution for this.

Solution

This scenario can be implemented by Apex Customization with following steps:.

è  Creating a VF page, that  will have ability to edit records just by double clicking the field value(Inline Editing)

è  Adding this VF page to the object page layout and remove the related list from the detail page layout. The UI of VF will be similar to a related list.

Reusable Code

Visual Force Page – AccountDisplay

<apex:page standardController="Account" extensions="ContactControllerExtension">

    <apex:form >

        <apex:pageBlock title="{!Account.Name} - Contacts" mode="inlineEdit" >

            <apex:pageBlockButtons location="top">

                <apex:commandButton value="New Contact" action="/003/e?retURL={!account.id}&accid={!account.id}" />

                <apex:commandButton action="{!save}" value="Save" id="saveButton" />

                <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel" />

            </apex:pageBlockButtons>

              <apex:pageBlockTable value="{!contacts}" var="item">

                   <apex:column headerValue="Action" >

                            <apex:outputLink value="/{!item.id}/e?retURL=/apex/accountDisplay/{!Account.id}" target="_parent">Edit

                            </apex:outputLink>&nbsp;|&nbsp;

                           

                     <apex:outputLink value="{!URLFOR($Action.Contact.Delete, item.id)}&retURL=%2F{!Account.id}" target="_parent" onclick="return window.confirm('Are you sure?'); ">Delete

                      </apex:outputLink>    

                      

                 </apex:column>             

                <apex:column value="{! item.name}" headerValue="{!Account.Name} - Contact"/>

                <apex:column value="{!Account.Name}" />

                <apex:column value="{! item.Birthdate}" />

                <apex:column value="{! item.Title}" />

               

                <apex:column headerValue="Phones" >

                    <apex:outputField value="{!item.phone}">

                    <apex:inlineEditSupport showOnEdit="saveButton,cancelButton"

                        hideOnEdit="editButton" event="ondblclick"

                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>

                </apex:outputField>

                </apex:column>

            </apex:pageBlockTable>

        </apex:pageBlock>

    </apex:form>

</apex:page>

               

Apex Controller

public class ContactControllerExtension {     public List<Contact> contacts {get;set;}         public ContactControllerExtension(ApexPages.StandardController controller) {         contacts = [select id,name,birthdate,title,phone,account.name from Contact where accountid =:controller.getId()];     }         public PageReference save() {         update contacts ;         return null;     } }

How the code can be re-used

Use the inline edit mode for editing the records directly on related list.

For each column on the related list, use the below code

<apex:inlineEditSupport showOnEdit="saveButton,cancelButton"

                        hideOnEdit="editButton" event="ondblclick"

                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>

Screenshot