Hi,
I have an object with several views. All views contain a logical field from the object. I want to customise the view so that the column that shows this field does not have a column header and the default check mark icon is replaced. I want to extend this further by adding a tooltip to the new image.
Not sure about the best way to achieve this. I currently have a script component on the Records List page for the object...
<script>
function chgAlertColumn() {
//change action column width to 90px
$( ".actionCol" ).attr('width','90px');
//hide column header for isPV column
$("a:contains('Is PV')").hide();
//hide pencil (inline edit) icon for isPV checkbox
$("img[id*='isPV']").hide();
//change isPV checkmark image to hosted icon
$("img[src*='checkmark.png']").attr('src','{!#HOSTED_FILE.46352}');
//change column width for isPV column
$("td[id*='isPV']").attr('width','20px');
}
var selOC = $("select[name*='listViews']").attr('onchange');
selOC = selOC.replace("return ","var funcRet = ");
selOC = selOC + ";chgAlertColumn();return funcRet;";
$("select[name*='listViews']").attr('onchange',selOC);
</script>
This works when initialising the view for the first time. however when changing views using the view selector, the original layout is shown. I think this is because the function above is called before the call to rbf_doList completes.
Is there a better way to achieve this more successfully?
Thanks
Hi,
Firstly, Sorry for a late response.
(as you post is dated before the 4.0 release, Im assuming this is for classic UI. The below suggestion(s) are valid only for the classic UI)
I had a look at your requirement and unfortunately i dont think there is no straight forward or out-of-box way to achieve this.
When a view chages, an Ajax call gets the table content and replace the appropriate div. So, the javascript component of the page does not execute everytime the view changes. May be you can try adding something like below (where 120551 is the cell id of the list view)
$('#ld_120551').bind('DOMNodeInserted', function() {
$("a:contains('<CHK-BOX-FIELD-NAME>')").hide();
$("img[src*='checkmark.png']").attr('src','<ANOTHER-IMG-URI>');
});
which will execute everytime the DOM changes. (PS: this event is not supported in IE. I checked in Chrome and it was giving the result you are looking for)
However, if you switch to the New UI, there can be other ways where you can try adding a listener to the grid and perform simlar actions.
Hope this helps you. Please let us know the feedback or dif you have anything else on this.
Regards,
Harsha.