You need to sign in to do that
Don't have an account?

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!!
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
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(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.
Thanks for the sample, I will try to implement.
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.
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.