function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sohaib ansari 17sohaib ansari 17 

how to create a visualforce page in which I click on pencil icon on any one field for editing and rest of the fields become editable automatically in lightning similar to the normal lightning behavior?

how to create a visualforce page in which I click on pencil icon on any one field for editing and rest of the fields become editable automatically in lightning similar to the normal lightning behavior?
NagendraNagendra (Salesforce Developers) 
Hi Sohaib,

May I suggest you please try the sample code below which might help you further. 
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(this.id,'{!a.id}','n');">

                <table border="2">

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

                         <td width='25%'><h2>  <span style="width:45%">{!a.phone}</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>

                   </tr></table>

                </div>

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

                  <table border="2"><tr>

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

                  <td width='25%'> <h1><span style="width:25%"><apex:inputField value="{!a.phone}"/></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:{!a.id}','{!a.id}','e');"/></td>

             </tr>  </table>

                </div>

            </apex:repeat><br/>
Please let us know if this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra