Apex Code Development You need to sign in to do that
Don't have an account?
Stanley Ye Visualforce inlineEditLock icon
Hi,
I'm now building a new opportunity view page to override the standard one, and the inline editing is working - we can edit on the output fields and also a pencil icon show up when mouse hover on the field is editable.
My question is If anyone knows how to display the lock icon for non-editable fields when mouse hover on ?
Thanks
I'm now building a new opportunity view page to override the standard one, and the inline editing is working - we can edit on the output fields and also a pencil icon show up when mouse hover on the field is editable.
My question is If anyone knows how to display the lock icon for non-editable fields when mouse hover on ?
Thanks
This is an ugly way to accomplish this, but it will do.
<style>
.dataCol:not(span) > span
{
background-color: black;
}
</style>
The above selector will select the read only fields, based on how they are rendered on the page. It relies on the fact that editable fields will have 2 levels of spans. Read only fields only have 1 level.
This is a very hacky approach, so be careful and test on different browsers to insure cross browser compatibility.
All Answers
You can use CSS for this.
.detailList .inlineEditLock - This is class of a field the not editable
detailList .inlineEditLockOn - This is the class of a field that is not editable on hover over
Example code that sets the background of a read only field to gray:
.detailList .inlineEditLock, .detailList .inlineEditLockOn
{
background-color: #eee;
}
Thanks for the quick reply.
I've tried to override the class .inlineEditLock and .inlineEditLockOn, but seems not work. Also I checked the page element and found the belows:
/* Standard output field*/
<td class="dataCol inlineEditLock" id="00N90000008wHbB_ilecell" onblur="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.mouseOutField(event, this);" onclick="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.clickField(event, this);" ondblclick="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.dblClickField(event, this);" onfocus="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.mouseOverField(event, this);" onmouseout="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.mouseOutField(event, this);" onmouseover="if (window.sfdcPage && window.sfdcPage.hasRun) sfdcPage.mouseOverField(event, this);">
<div id="00N90000008wHbB_ileinner">No</div>
</td>
/* output field in vf */
<td class="dataCol first "><span id="j_id0:form:page_block:registration:has_vr_status">No</span></td>
<span id="j_id0:form:page_block:registration:has_vr_status">No</span>
<td class="dataCol first "><span id="j_id0:form:page_block:registration:has_vr_status">No</span></td>
The html tag doesn't include inlineEditLock style class on customised VF page. Any advices on that?
Thanks
This is an ugly way to accomplish this, but it will do.
<style>
.dataCol:not(span) > span
{
background-color: black;
}
</style>
The above selector will select the read only fields, based on how they are rendered on the page. It relies on the fact that editable fields will have 2 levels of spans. Read only fields only have 1 level.
This is a very hacky approach, so be careful and test on different browsers to insure cross browser compatibility.
I think all good now.
Regards,