Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
hgolovhgolov 

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

hi,

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!!

prageethprageeth

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 : http://boards.developerforce.com/t5/Visualforce-Development/Inline-Editing-in-Visuaforce/m-p/114037
hgolovhgolov

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

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(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/>

 

Hope this helps.
hgolovhgolov

Thanks for the sample, I will try to implement.
hgolovhgolov

Hi,

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';

}
</script>

 <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.