function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How can I make a field editable on click - to mimic the effect of a regular detail page


When a user views a detail page and rolls over a field value, they get a little pencil icon on the right and can then click and edit the value. How can I do this on a visualforce page?

Thanks for you help!!


Hello hgolov;

Still we can't use this feature in VF pages. However you may use your own JavaScript code to do something similar.

see this post :


Thanks for the link, I appreciate your taking the time.


Try out the sample code for inline editing :


            function HideShow(rId,Id,mode)


                                                                var rowId = rId;

                                                                var accountId = Id;

                                                                var editrowId = 'edit:'+ Id;

                                                                if(mode == 'n')


                                                                                document.getElementById(rowId).style.display = 'none';

                                                                                document.getElementById(editrowId).style.display = 'block';


                                                                else if(mode == 'e')


                                                                                var rrowId = 'detail:'+ Id;

                                                                                document.getElementById(rrowId).style.display = 'block';

                                                                                document.getElementById(rowId).style.display = 'none';




            <apex:repeat value="{!Account}" var="a" >

                <div style="width:61%;display:block;" ondblclick="HideShow(,'{!}','n');">

                <table border="2">

                <tr><td width='25%'><a href="#" onclick="popu('{!}');fetchdata('{!}');fetchdata1('{!}');" ondbclick="change();"><h2>{!}</h2></a></td>

                         <td width='25%'><h2>  <span style="width:45%">{!}</span></h2></td>

                          <td width='25%'><h2> <span style="width:25%" >{!a.billingcity}</span></h2></td>

                         <td width='25%'>  <span style="width:25%" class='rows'>{!a.CreatedDate}</span></td>



                <div style="width:35%;display:none;" >

                  <table border="2"><tr>

                  <td width='25%'><h2><span style="width:25%"><apex:inputField value="{!}" id="MTBName" /></span></h2></td>

                  <td width='25%'> <h1><span style="width:25%"><apex:inputField value="{!}"/></span></h1></td>

                   <td width='25%'> <h2><span style="width:25%"><apex:inputField value="{!a.billingcity}"/></span></h2></td>

                  <td width='25%'> <h2><span style="width:25%"><apex:inputField value="{!a.createddate}"/></span></h2></td>

                   <td width='25%'><input class="btn" value="save"/></td><td><input type="button" class="btn" value="cancel" onclick="HideShow('edit:{!}','{!}','e');"/></td>

             </tr>  </table>




Hope this helps.


Thanks for the sample, I will try to implement.



I'm trying to write similar code on <apex:pageBlockSectionItems>. I've created two items - one for the data display and one for the data input. However, visualforce doesn't support the style element on this component, so I can't set the item to display none. I am also unable to access the item via the dom - I successfully pass the id in, but I get an error - the element is null. Here is my code.



<script type='text/javascript'>
function toggleDisplay(showId, hideId){
alert('the show id: ' + showId + ', the hideID ' + hideId);
    document.getElementById(hideId).display = 'none';
    document.getElementById(showId).display = 'block';


 <apex:pageBlockSectionItem id='RegionDisplay' onDatadblclick="toggleDisplay('{!$Component.RegionEdit}','{!$Component.RegionDisplay}')"><apex:outputLabel value="Region"/>{!contact.Region__c} </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id='RegionEdit' labelStyle="display:none;" dataStyle="display:none;"><apex:outputLabel value="Region"/>{!contact.Region__c} </apex:pageBlockSectionItem>



Do you have any advice? I'd really like to stay with this format because the client likes the ui.


Thanks again for your time.