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 the following steps:.

è Creating a VF page, that will have the 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 the 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

Ticker

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