+ Start a Discussion
VenkatNYCVenkatNYC 

Hoverlinks for custom related list

Hi,

I need to put a custom related list on the account detail page and put the Hover link on the top of the page for the custom related list.

 

I was able to do the custom related list displayed on the bottom of the Account detail page wiring a standard controller extension and visula force page.

 

Now the problem is How do I place the Hover link on the top of the page for the custom list? I saw couple of threads for the above, but the hover links issue was never discussed?.

 

Can any one please guide me how can I do this.

 

Thank you.

Best Answer chosen by Admin (Salesforce Developers) 
VenkatNYCVenkatNYC

I am answering my own post/question. I was able to put the related list hover link on the top of the detail page. It is with the parent id of the hover links div tag and write the hover tag on load of the custom related list. I guess you guys can figure it out. If needed, please let me know know I can cook some simple source for you.

All Answers

VenkatNYCVenkatNYC

I am answering my own post/question. I was able to put the related list hover link on the top of the detail page. It is with the parent id of the hover links div tag and write the hover tag on load of the custom related list. I guess you guys can figure it out. If needed, please let me know know I can cook some simple source for you.

This was selected as the best answer
Cool_DevloperCool_Devloper

Hello Venkat,

 

Your idea seem to be appealing to me.

 

I am also working on displaying hovers for records like what we have on the standard salesforce record names. I was trying to use the source code of the standard pages, but was not able to get it working :(

 

Would be great if you can give me some pointers on how can we re-use/create hovers on custom VF screens.

 

Many Thanks,

Cool_D 

DevNVDevNV

VenkatNYC,

 

Can you post your code for this?  I'd like to add the related list hover links to the top of my VisualForce page but am not sure how to accomplish that.

 

Thanks,

Niki

nbanasnbanas

My organization is also looking for a way to include the related list hovers on Visual Force pages.  We can't use the 'apex:detail' component to accomplish as we need to add additional functionality within the layout that we can't add via the standard page layout option.

 

If anyone has done this before can they post some code here as an example?

nbanasnbanas

We actually found a solution for our situation in working with the Case object.  We created a VF Component using the following code:

 

<div class="RLPanelShadow"><div class="RLPanel" id="RLPanel" onblur="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onfocus="sfdcPage.relatedListPanel.showRL()" onmouseout="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onmouseover="sfdcPage.relatedListPanel.showRL()"><iframe frameborder="0" id="RLPanelFrame" name="RLPanelFrame" src="/emptyHtmlDoc.html" title="Hidden Frame - Ignore"></iframe></div></div><div class="listHoverLinks"><span class="invisibleMinHeight">|</span></div> <script type="text/javascript"> try { sfdcPage.registerRelatedListPanel('RLPanel',false);} catch(e) {} </script> <script type="text/javascript"> function twistSection(twisty, sectionId) { var parentDiv = twisty; while (parentDiv.tagName != 'DIV') { parentDiv = parentDiv.parentNode; } var headerId = sectionId || (parentDiv.id.split('_'))[1]; var div = parentDiv.nextSibling; var elemWasOn = false; if (div.style.display != 'none') { div.style.display = 'none'; twisty.className ='showListButton'; twisty.alt = twisty.title = 'Show Section - '+twisty.name; elemWasOn = true; } else { div.style.display = 'block'; twisty.className = 'hideListButton'; twisty.alt = twisty.title = 'Hide Section - '+twisty.name; } addTwistCookie('Twister', headerId, elemWasOn); } var registeredSections = new Array(); function registerTwistableSection(headerId, mainTableId) { var obj = new Object(); obj.headerId = headerId; obj.mainTableId = mainTableId; registeredSections[registeredSections.length] = obj; } function twistAllSections(on) { for (var i = 0; i < registeredSections.length; i++) { var obj = registeredSections[i]; var img; img = document.getElementById('img_' + obj.headerId); if (on && 'showListButton' == img.className) { twistSection(img, obj.headerId, obj.mainTableId); } else if (!on && 'hideListButton' == img.className) { twistSection(img, obj.headerId, obj.mainTableId); } } } function toggleSection(headerId, on){ var sectionHead = document.getElementById('head_'+headerId+'_ep_j_id0_j_id1_j_id2'); var body = sectionHead.nextSibling; var disp = on ? 'block' : 'none'; sectionHead.style.display = disp; body.style.display = disp; } function registerTwistableSections_ep_j_id0_j_id1_j_id2() { registerTwistableSection('01B50000003WfZA', 'ep_j_id0_j_id1_j_id2'); registerTwistableSection('01B50000003WfZB', 'ep_j_id0_j_id1_j_id2'); registerTwistableSection('01B50000003WfZD', 'ep_j_id0_j_id1_j_id2'); registerTwistableSection('01B50000003WfZG', 'ep_j_id0_j_id1_j_id2'); registerTwistableSection('01BQ0000000OuMD', 'ep_j_id0_j_id1_j_id2'); registerTwistableSection('01B50000003WfZJ', 'ep_j_id0_j_id1_j_id2'); } registerTwistableSections_ep_j_id0_j_id1_j_id2(); </script>

 

BCSFDC1974BCSFDC1974
I have some custom related lists on my account object. How do I use the above code to make the hovers appear on account detail?
nbanasnbanas

The way we utilized this code is as follows:

 

We created a component using the following code and named the component 'vf_relatedlist_hovers':

<apex:component >
<div class="RLPanelShadow"><div class="RLPanel" id="RLPanel" onblur="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onfocus="sfdcPage.relatedListPanel.showRL()" onmouseout="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onmouseover="sfdcPage.relatedListPanel.showRL()"><iframe frameborder="0" id="RLPanelFrame" name="RLPanelFrame" src="/emptyHtmlDoc.html" title="Hidden Frame - Ignore"></iframe></div></div><div class="listHoverLinks"><span class="invisibleMinHeight">|</span></div>

<script type="text/javascript">
try { sfdcPage.registerRelatedListPanel('RLPanel',false);} catch(e) {}
</script>

<script type="text/javascript">
function twistSection(twisty, sectionId) {
var parentDiv = twisty;

while (parentDiv.tagName != 'DIV') { parentDiv = parentDiv.parentNode; }

var headerId = sectionId || (parentDiv.id.split('_'))[1];
var div = parentDiv.nextSibling;
var elemWasOn = false;

if (div.style.display != 'none') {
div.style.display = 'none';
twisty.className ='showListButton';
twisty.alt = twisty.title = 'Show Section - '+twisty.name;
elemWasOn = true;
} else {
div.style.display = 'block';
twisty.className = 'hideListButton';
twisty.alt = twisty.title = 'Hide Section - '+twisty.name;
}

addTwistCookie('Twister', headerId, elemWasOn);
}

var registeredSections = new Array();

function registerTwistableSection(headerId, mainTableId) {
var obj = new Object();
obj.headerId = headerId;
obj.mainTableId = mainTableId;
registeredSections[registeredSections.length] = obj;
}

function twistAllSections(on) {
for (var i = 0; i < registeredSections.length; i++) {
var obj = registeredSections[i];
var img;

img = document.getElementById('img_' + obj.headerId);

if (on && 'showListButton' == img.className) {
twistSection(img, obj.headerId, obj.mainTableId);
} else if (!on && 'hideListButton' == img.className) {
twistSection(img, obj.headerId, obj.mainTableId);
}
}
}

function toggleSection(headerId, on){
var sectionHead = document.getElementById('head_'+headerId+'_ep_j_id0_j_id1_j_id2');
var body = sectionHead.nextSibling;
var disp = on ? 'block' : 'none';
sectionHead.style.display = disp;
body.style.display = disp;
}

function registerTwistableSections_ep_j_id0_j_id1_j_id2() {
registerTwistableSection('01B50000003WfZA', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZB', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZD', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZG', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01BQ0000000OuMD', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZJ', 'ep_j_id0_j_id1_j_id2');
}

registerTwistableSections_ep_j_id0_j_id1_j_id2();
</script>
</apex:component>

 

Then on a Visual Force page, we added the following:

<apex:page standardController="case">

<!--Reference to Hover Component-->
<c:vf_relatedlist_hovers />

<!--Display the standard detail page of the case object w/o related lists-->
<apex:detail relatedList="false" relatedListHover="false" title="true" />

<!--Add related lists to the page-->
<apex:relatedList id="OpenActivitieslist" list="OpenActivities" />
<apex:relatedList id="Activitieslist" list="ActivityHistories" />
<apex:relatedList id="attachmentslist" list="Attachments" />
<apex:relatedList id="relatedcaseslist" list="Cases" />
<apex:relatedList id="TDFlist" list="Ticket_Data_Forms__r" />
</apex:page>

 

We have come across several related lists that we cannot add using the <apex: relatedList> tag including: CaseComments, CaseHistory, EmailMessages, and EmailStatuses. To find the child relationship names we used the Apex Explorer application and looked under the Case object to find the child relationships.

 

Hope this helps

Message Edited by nbanas on 11-23-2009 10:06 AM
XYZ83XYZ83

Hi,

 

I need to include the related list hovers on Visual Force pages. Could you tell me what's this hard coded Id. which component Id I need to specify?  Thanks in Advance!!

 

 function registerTwistableSections_ep_j_id0_j_id1_j_id2() {
registerTwistableSection('01B50000003WfZA', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZB', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZD', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZG', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01BQ0000000OuMD', 'ep_j_id0_j_id1_j_id2');
registerTwistableSection('01B50000003WfZJ', 'ep_j_id0_j_id1_j_id2');
}
SivarajanSivarajan

Hi,

 

Did you get any solution to show the HoverLinks for custom related list. I just want to know the following things:

1) whether the abover code is working correct or not.

2)why are you taking some hard coded ID.?

3) These IDs are related to which component?

 

Can you please explain it clearly. I am using Standard controller and Extension on the Visualforce page.

just waiting for the your reply....

 

 Thanks for your kind information.

 

 

 

EvaDEvaD

I used the component solution - but, it seems that <apex:detail ... must be included for this to work.

 

Since the page we've written is a custom VF page, we don't want to use the detail. 

 

Is there any way to get by that?  I tried renered="false" with no luck. 

devisfundevisfun

Add the following right below your <apex:page> tag:

 

<style type="text/css">
[id*=nodisp] {display:none;}
</style>

 

Then change your current <apex:detail> tag to this:

 

<apex:detail id="nodisp" />

 

I added a component for the hover list then refrenced it on the page as follows:

 

<c:HoverList />

 

The component for the hover list is exactly what was provided by nbanas, and it works as is for any object... custom or standard.

 

 

ministe2003ministe2003

in my test environment I've copied and pasted nbanas' code exactly, so my VF page is idential (minus the custom object related list) and my component is a dead copy, but the relatedlist hovers will not render.  I can only assume like others that it is something to do with the IDs.

 

I dont get any errors in firefox or ie (i do have js debugging on) has anyone managed to get this working and if so what did you need to change?

ministe2003ministe2003

I'm going to assume that when this thread was created, the relatedlist and relatedlisthovers attributes were not available on the apex:detail tag because I seem to have discovered that these make this thread redundant.

 

This seems to be true as of Winter 11:

 

I assumed the component created in this thread would enable me to add apex:relatedlist tags to the bottom of a visualforce page and the component would handle displaying the hover link at the top of the page for that relatedlist.  This is NOT the case.

What this component does is display the relatedlist hovers that are provided by the detail tag.  It would have been useful in a case where you wanted the hovers but not the whole page content; but it would only display the hovers for relatedlists that are on the standard page layout for that record type.

 

If you want to do that, you can achieve it just by using the following:

 

 

<apex:page standardController="SFDC_MDF__c" extensions="ConvRF2RC" id="thePage">
<style type="text/css">
    [id*=nodisp] {display:none;}
</style>
    <apex:detail id="nodisp"/>
</apex:page>

 What this does is puts the detail tag on the page but the javascript hides the body of it.  since relatedlists and relatedlisthovers are set to true by default, they will still be displayed despite the body being hidden, meaning you can create your custom page without having to worry about the relatedlists and hovers, which will be pulled from the standard page layout for that record type.

 

What we cannot achieve is a component which will enable us to put apex:relatedlist tags on a visualforce page and display the relevent hover link for it at the top of the page.

 

RickNTARickNTA

Hi VenkatNYC -

 

This is an old thread, but we're trying to do the same thing you were (a standard SF page with a custom related list), and don't understand how you did it.  If you could post a sample or a clarification we'd really appreciate it!

Jwdv22Jwdv22

RickNTA, did you ever figure anything out with customer related list hoverlists?

RickNTARickNTA

It's been a couple of months so off the top of my head I don't recall the details, but we basically gave up on it - just positioned the related list the best we could, without a hoverlink.  I don't recall if I concluded that we really couldn't do it via code, or if we just didn't have the time to mess with code then.  HTH!

devisfundevisfun

We ended up replicating the lists:

 

Link to the rlHovers.css file (should be something like /sCSS/21.0/sprites/1296783440000/Theme3/default/rlHovers.css)

 

Then put this after your section header but before your form/pageblock:

 

<div class="listHoverLinks">

    <a href="#oppRL" class="linklet"><span class="listTitle">Opportunities</span></a>

</div>

 

 Then at the bottom put this:

 

<a name="oppRL"></a>

<apex:relatedList list="Opportunities" subject="{!opps}" /> 

Jwdv22Jwdv22

So I added what you said to my header like so 

<apex:page standardController="Account" extensions="mycontroller2">
<link  href="/sCSS/24.0/sprites/1328729674000/Theme3/default/ie9/rlHovers.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />
<div class="listHoverLinks">
    <a href="#oppRL" class="linklet"><span class="listTitle">Opportunities</span></a>
</div>

 Then at the bottom right after my last related list I added your 

<a name="oppRL"></a>
<apex:relatedList list="Opportunities" /> 

 But without the subject since I don't use Opportunties and this was throwing an error (Error: Unknown property 'AccountStandardController.opps')

So after removing it, I didn't see the Hover For Opps. Any ideas what I did wrong?

devisfundevisfun

Without the subject the page won't know which related list to display.  The account object does have opportunities as a standard related list; you should be able to use this list.  As a test creat a dummy variable called opps in your class and assign the opportunities associated with that account.  Of course, you'll have to test on an account with opportunities to see this work.

Jwdv22Jwdv22
I messed with this a ton yesterday after your reply. I used !account instead of opps and it didn't work. Opportunities related list is on the page but no hover list. 2 questions is my linking to the CSS correct? And do you mean that I have to recreate the related lists with soql? Thanks
devisfundevisfun

Sorry... if you're using the account page then you should use !account for the subject.  Also, the related list should look like this:

 

<apex:relatedList list="Opportunities" />

 

with the name attribute being the value of your hover link.

 

If this still doesn't work, post your code and we'll go from there. 

Jwdv22Jwdv22

I tried quite a few things before posting back, but to no avail. Thanks for your help.

Here is tmy VF Page

<apex:page standardController="Account" extensions="mycontroller2">
<!-- <apex:stylesheet value="/sCSS/24.0/sprites/1328729674000/Theme3/default/ie9/rlHovers.css" / -->
<apex:stylesheet value="/sCSS/21.0/sprites/1296783440000/Theme3/default/rlHovers.css" />
<chatter:feedWithFollowers entityId="{!Account.id}"/>
<div class="listHoverLinks">
    <a href="#oppRL" class="linklet"><span class="listTitle">Contacts</span></a>
</div>
<apex:outputField value="{!account.parentId}" rendered="false"/>
<!--Reference to Hover Component-->


<apex:detail relatedList="false" relatedListHover="false" title="true" />


<!-- <apex:page controller="mycontroller2" tabStyle="Account"> -->
<a name="#oppRL"></a>
<apex:relatedList id="conRL" list="Contacts"  subject="{!account}" /> 
<apex:relatedlist list="NotesAndAttachments"/>
<apex:pageBlock title="Buyers">
<!-- <apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" id="saveButton" />
<apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton"   / 
</apex:pageBlockButtons>  -->

    <apex:pageBlockTable value="{!pcons}" var="pcontacts" > 
<!-- Add Sorting capability and Show more/Go to List links -->   
                <apex:column headervalue="Action" width="90">
                    <apex:outputLink value="{!URLFOR($Action.Contact.Edit, pcontacts.Id)}">Edit</apex:outputLink> 
        | 
<!--        <apex:outputLink value="{!URLFOR($Action.Contact.Delete, pcontacts.Id)}"> Del</apex:outputLink> -->
                    <chatter:follow entityId="{!pcontacts.id}"/>
                </apex:column> 
                <apex:column headervalue="Contact Name">
                    <apex:outputLink value="/{!pcontacts.id}">{!pcontacts.Name}</apex:outputLink>
                </apex:column>
                <apex:column value="{!pcontacts.Active__c}"/>
                <apex:column value="{!pcontacts.Contact_Title__c}"/>
                <apex:column value="{!pcontacts.Email}"/>
                <apex:column value="{!pcontacts.Phone}"/>
<!-- Ditch in productions -->    <apex:column value="{!pcontacts.Ext_Id__c}"/>
                <apex:column headervalue="Account">
                     <apex:outputLink value="/{!pcontacts.Account.id}">{!pcontacts.Account.Name}</apex:outputLink>
                </apex:column>
<!-- <apex:inlineEditSupport event="ondblClick"
showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" / -->
    </apex:pageBlockTable>
  
</apex:pageBlock>
<apex:relatedlist list="openactivities"/>
<apex:relatedlist list="activityhistories"/>
<apex:relatedlist list="End_Users__r"/>
<apex:relatedlist list="Order_Header__r"/>
<apex:relatedlist list="Budgets__r"/>
<apex:relatedlist list="AccountTeamMembers"/>
<apex:relatedlist list="Pending_Issues__r"/>
<apex:relatedlist list="RMAs__r"/>
<apex:relatedlist list="Invoices__r"/>
<!--  UNCOMMENT IN PRODUCTION <apex:relatedlist list="Promo_Items__r"/> -->



</apex:page>

 My Controller

public class mycontroller2 {
    private Account b;
    public mycontroller2(ApexPages.StandardController stdcontroller) {
    b = (Account)stdController.getRecord();
    }
 
private List<Contact> pcons;
public List<Contact> getPcons() 
{

List<Account> ac=[select id,Name,parentid from Account where (parentid <> '' and parentid=:b.parentid)];
 Set<Id> ids=new Set<Id>();
{ 
for(Account a:ac)
{
ids.add(a.id);    // collect the parentid for each account in a set
 }
 } 
//collect the all contacts related to these parent accountid
List<contact> pcons=[select id,Name,Ext_Id__c, accountId,Account.Name,Active__c,Contact_Title__c,Email,Phone from contact where Buyer__c='Y' and Account.id in:ids];
return pcons;
}
}

 

devisfundevisfun

Ah, you're showing the page detail.

 

In that case, here's what I did to make it work:

 

Create a component called HoverList.  I did not write this; I got it from another post but I can't remember which one so I cannot give credit where credit is due.

 

<apex:component >
	<div class="RLPanelShadow"><div class="RLPanel" id="RLPanel" onblur="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onfocus="sfdcPage.relatedListPanel.showRL()" onmouseout="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onmouseover="sfdcPage.relatedListPanel.showRL()"><iframe  frameborder="0" id="RLPanelFrame" name="RLPanelFrame" src="/emptyHtmlDoc.html" title="Hidden Frame - Ignore"></iframe></div></div><div class="listHoverLinks"><span  class="invisibleMinHeight">|</span></div>
	<script  type="text/javascript">
		try{sfdcPage.registerRelatedListPanel('RLPanel',false);}catch(e){}
	</script>
	<script type="text/javascript">
		function twistSection(twisty, sectionId){
			var parentDiv = twisty;
			while(parentDiv.tagName != 'DIV'){parentDiv = parentDiv.parentNode;}
			var headerId = sectionId || (parentDiv.id.split('_'))[1]; 
			var div = parentDiv.nextSibling; 
			var elemWasOn = false; 
			if(div.style.display != 'none'){ 
				div.style.display = 'none'; 
				twisty.className ='showListButton';
				twisty.alt = twisty.title = 'Show Section - ' + twisty.name;
				elemWasOn = true; 
			}else{
				div.style.display = 'block'; 
				twisty.className = 'hideListButton';
				twisty.alt = twisty.title = 'Hide Section - ' + twisty.name;
			} 
			addTwistCookie('Twister', headerId, elemWasOn);
		}
		var registeredSections = new Array();
		function registerTwistableSection(headerId, mainTableId){
			var obj = new Object();
			obj.headerId = headerId;
			obj.mainTableId = mainTableId;
			registeredSections[registeredSections.length] = obj;
		}
		function twistAllSections(on){
			for(var i = 0; i < registeredSections.length; i++){
				var obj = registeredSections[i];
				var img;
				img = document.getElementById('img_' + obj.headerId);
				if(on && 'showListButton' == img.className) twistSection(img, obj.headerId, obj.mainTableId);
				else if(!on && 'hideListButton' == img.className) twistSection(img, obj.headerId, obj.mainTableId);
			}
		}
		function toggleSection(headerId, on){
			var sectionHead = document.getElementById('head_' + headerId + '_ep_j_id0_j_id1_j_id2');
			var body = sectionHead.nextSibling;
			var disp = on ? 'block' : 'none';
			sectionHead.style.display = disp;
			body.style.display = disp;
		}
		function registerTwistableSections_ep_j_id0_j_id1_j_id2() {
			registerTwistableSection('01B50000003WfZA', 'ep_j_id0_j_id1_j_id2');
			registerTwistableSection('01B50000003WfZB', 'ep_j_id0_j_id1_j_id2');
			registerTwistableSection('01B50000003WfZD', 'ep_j_id0_j_id1_j_id2');
			registerTwistableSection('01B50000003WfZG', 'ep_j_id0_j_id1_j_id2');
			registerTwistableSection('01BQ0000000OuMD', 'ep_j_id0_j_id1_j_id2');
			registerTwistableSection('01B50000003WfZJ', 'ep_j_id0_j_id1_j_id2');
		}
		registerTwistableSections_ep_j_id0_j_id1_j_id2();
	</script>
</apex:component>

 

Next, put this in your VF:

 

<style type="text/css">
	[id*=nodisp] {display: none;}
</style>
<!-- <apex:form> or <apex:pageBlock> or whatever... -->
        <c:HoverList />

 Finally, at the very bottom of the page (right before your </apex:page> tag) put this:

 

<apex:detail id="nodisp" />

 So if you don't mind, I re-wrote your VF with the above recommendations (all you have to do is create the component):

 

<apex:page standardController="Account" extensions="mycontroller2">
<style type="text/css">
	[id*=nodisp] {display: none;}
</style>
<!-- <apex:stylesheet value="/sCSS/24.0/sprites/1328729674000/Theme3/default/ie9/rlHovers.css" / -->
<!-- <apex:stylesheet value="/sCSS/21.0/sprites/1296783440000/Theme3/default/rlHovers.css" /> -->
<chatter:feedWithFollowers entityId="{!Account.id}"/>
<!-- <div class="listHoverLinks">
    <a href="#oppRL" class="linklet"><span class="listTitle">Contacts</span></a>
</div> -->
<c:HoverList />
<apex:outputField value="{!account.parentId}" rendered="false"/>
<!--Reference to Hover Component-->

<!-- <apex:detail relatedList="false" relatedListHover="false" title="true" /> -->

<!-- <apex:page controller="mycontroller2" tabStyle="Account"> -->
<!-- <a name="#oppRL"></a>
<apex:relatedList id="conRL" list="Contacts"  subject="{!account}" /> 
<apex:relatedlist list="NotesAndAttachments"/> -->
<apex:pageBlock title="Buyers">
<!-- <apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" id="saveButton" />
<apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton"   / 
</apex:pageBlockButtons>  -->

    <apex:pageBlockTable value="{!pcons}" var="pcontacts" > 
<!-- Add Sorting capability and Show more/Go to List links -->   
                <apex:column headervalue="Action" width="90">
                    <apex:outputLink value="{!URLFOR($Action.Contact.Edit, pcontacts.Id)}">Edit</apex:outputLink> 
        | 
<!--        <apex:outputLink value="{!URLFOR($Action.Contact.Delete, pcontacts.Id)}"> Del</apex:outputLink> -->
                    <chatter:follow entityId="{!pcontacts.id}"/>
                </apex:column> 
                <apex:column headervalue="Contact Name">
                    <apex:outputLink value="/{!pcontacts.id}">{!pcontacts.Name}</apex:outputLink>
                </apex:column>
                <apex:column value="{!pcontacts.Active__c}"/>
                <apex:column value="{!pcontacts.Contact_Title__c}"/>
                <apex:column value="{!pcontacts.Email}"/>
                <apex:column value="{!pcontacts.Phone}"/>
<!-- Ditch in productions -->    <apex:column value="{!pcontacts.Ext_Id__c}"/>
                <apex:column headervalue="Account">
                     <apex:outputLink value="/{!pcontacts.Account.id}">{!pcontacts.Account.Name}</apex:outputLink>
                </apex:column>
<!-- <apex:inlineEditSupport event="ondblClick"
showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" / -->
    </apex:pageBlockTable>
  
</apex:pageBlock>
<!-- <apex:relatedlist list="openactivities"/>
<apex:relatedlist list="activityhistories"/>
<apex:relatedlist list="End_Users__r"/>
<apex:relatedlist list="Order_Header__r"/>
<apex:relatedlist list="Budgets__r"/>
<apex:relatedlist list="AccountTeamMembers"/>
<apex:relatedlist list="Pending_Issues__r"/>
<apex:relatedlist list="RMAs__r"/>
<apex:relatedlist list="Invoices__r"/> -->
<!--  UNCOMMENT IN PRODUCTION <apex:relatedlist list="Promo_Items__r"/> -->
<!-- New code:  include Promo Items related list in page layout -->

<apex:detail id="nodisp" />

</apex:page>

 

Let me know if that works for you.

devisfundevisfun

I forgot to mention that this method isn't the best for all objects.  The <apex:page> tag does render everything on the page... all the fields and info.  This means either the page will take forever to load, or you could possibly run into view state limit overages... if you have tons of stuff on your page.

Jwdv22Jwdv22

Thanks for your help.

It works as you said, but we do need the Page Detail.

 

I was also looking to create a hoverlink for the custom related list. So I thought working with the Style sheet and 

<div class="listHoverLinks"> <a href="#oppRL" class="linklet"><span class="listTitle">Contacts</span></a> </div>

 

and 

 

 <a name="#oppRL"></a> <apex:relatedList id="conRL" list="Contacts" subject="{!account}" />

 

Would work. Thanks so much though.

 

devisfundevisfun

Ironic... I needed to get this to work on another page without the use of the page detail.  I ended up creating a component and controller.  The advantage:  this is now a global solution for any object since the component is passed a parameter, which contains the object's name.

 

The first link shows a basic example of how to create a component and controller.  The format of the getter/setter methods seems to be precisely what the controller needs to work.  Otherwise you're passing in null values.  The second link is a reference for the describe result methods... it allows the controller to be globally available for any object.

 

www.salesforce.com/us/developer/docs/pages/Content/pages_comp_cust_elements_controllers.htm

www.salesforce.com/us/developer/docs/apexcode/Content/apex_methods_system_sobjects_describe.htm

 

What I did was the following for the component:

 

<apex:component controller="HoverList_main">
	<apex:attribute name="Params" description="sObject of Record, Id of Record, Name Related List [, Override Related Name]" 
		type="String" required="true" assignTo="{!hlParams}" id="params" />
	<apex:outputLink value="#{!childName}RL" styleClass="linklet" rendered="{!accessible}">
		<span class="listTitle">{!childNameOverride} [{!IF(VALUE(childSize) > 10, "10+", childSize)}]</span>
	</apex:outputLink>
</apex:component>

 

As you can see, even the rendering is taken care of within the controller.  This way the hover link isn't displayed for a related list not visible to the user.  You'll also have to set up a rendered tag for the related list as follows:

 

<apex:relatedList list="Opportunities" rendered="{!$ObjectType.Opportunity.fields.AccountId.accessible}" />

 

All of the variables in the component need to be publically declared as strings in the controller.  You'll return values from within your set method back to them to be displayed in the component.  For example:

 

public String childName {get; set;}

 

Here is a full line from the VF page in my example above (to render the Opportunity hover link on the Account):

 

<c:HoverList_New Params="Account-{!a.Id}-Opportunities" />

 

This will get the child relationships of the Account, match them with the Opportunity, query the Opportunitytable and get the count of Opportunities associated with this Account (each object maps back to the parent sObject using its own field... you have to account for this in the controller), and then set the variable to render the hover link based on whether the field of the child object is accessible.

 

While this is just to display the hover list links, it does provide a nice way to show these links and to include a count of the related list records.  But it also does so without the use of the page detail, so that's good for pages not using that tag.

rcravenrcraven

Can you kindly provide the code from your controller, "HoverList_main", thanks.

Jwdv22Jwdv22

Thanks for your help but this makes the page detail not display and we (sales) need that.

 

 

<style type="text/css">
	[id*=nodisp] {display: none;}
<apex:detail id="nodisp" />
devisfundevisfun

If you display the detail, then you don't need to worry about the hover links... they are included in that detail.

Jwdv22Jwdv22

Seems elegant.

 

Since I can't seem to get custom hoverlinks AND have a page detail (don't think that is asking too much), I can try this and then worry about re-createing the PageDetail section from scratch.

devisfundevisfun

If you need custom hoverlinks, then why not create the rest of the page rather than using the detail... the detail's advantage is the hover links... and less development time.

Jwdv22Jwdv22

 

 


devisfun wrote:

If you display the detail, then you don't need to worry about the hover links... they are included in that detail.



They are included in  the PageDetail for the Related List Objects, but not for my PageBlockTable. Would be nice if there was a component to enable it to be part of the HoverList.

Lee ShaLee Sha

For anyone who wants to implement Hover for Custom related lists, here is the total working solution:

 

<apex:page id="brokerPage"standardController="Account" extensions="Custom_Controller" >

<!--==========================================================-->
<!-- HOVER -->
<!--==========================================================-->
<div class="RLPanelShadow"><div class="RLPanel" id="RLPanel" onblur="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onfocus="sfdcPage.relatedListPanel.showRL()" onmouseout="sfdcPage.relatedListPanel.hideRLDelayed(null, 100)" onmouseover="sfdcPage.relatedListPanel.showRL()"><iframe frameborder="0" id="RLPanelFrame" name="RLPanelFrame" src="/emptyHtmlDoc.html" title="Hidden Frame - Ignore"></iframe></div></div><div class="listHoverLinks"><span class="invisibleMinHeight">|</span></div>
<script type="text/javascript">
try { sfdcPage.registerRelatedListPanel('RLPanel',false);} catch(e) {}
</script>

<chatter:feedwithFollowers entityId="{!account.id}" showHeader="True"/>

<!--==========================================================-->
<!-- DETAIL -->
<!--==========================================================-->

<apex:detail subject="{!account.id}" relatedList="false" relatedListHover="true" title="true"/>

<!--==========================================================-->
<!-- RELATED LISTS -->
<!--==========================================================-->
<apex:relatedList id="contactList" list="Contacts" pageSize="5"/>
<apex:relatedList id="planList" list="Plan__r" /> <!-- Plans -->
<apex:relatedList id="activityList" list="OpenActivities" />
<apex:relatedList id="historyList" list="ActivityHistories" />
<apex:relatedList id="notesList" list="NotesAndAttachments" />
<!--==========================================================-->
<!-- CUSTOM HOVER -->
<!--==========================================================-->
<apex:outputPanel rendered="true">
<script type="text/javascript">

try {
sfdcPage.registerRelatedList('brokerPage:accTeamMemberList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:contactList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:callReportList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:planList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:activityList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:historyList', '', '', false, '', '',false,false,true, '');
sfdcPage.registerRelatedList('brokerPage:notesList', '', '', false, '', '',false,false,true, '');
} catch (e) {}

 

</script>
</apex:outputPanel>
</apex:page>

 

The code part highlighted in green are the additional details necessary for implementing custom hover.  Let me know if you have any questions.

LogeshLogesh

Thanks:smileyhappy:

This post is very much usefull for the developers who need to replicate the native salesforce functionalities.

Could you please also explain parameters/attributes for sfdc.registerRelatedList. That would be very helpfull!!

 

Cheers,

Logesh

devisfundevisfun
<apex:component controller="HoverList_main">
	<apex:attribute name="Params" description="sObject of Record, Id of Record, Name Related List [, Override Related Name]" 
		type="String" required="true" assignTo="{!hlParams}" id="params" />
	<apex:outputLink value="#{!childName}RL" styleClass="linklet" rendered="{!accessible}">
		<span class="listTitle">{!childNameOverride} [{!IF(VALUE(childSize) > 10, "10+", childSize)}]</span>
	</apex:outputLink>
</apex:component>

The above code is the component.

 

As you can see it also generates the outputlink with a fixed "#" beginning and "RL" ending... feel free to customize this as you see fit to match the actual related lists names at the bottom of your page.  This does not generate the box that appears when you hover over a link... that's a completely different project.

 

It takes a single line to create the hover list, as in the following example:

 

<c:HoverList_New Params="Account-{!a.Id}-Contacts" />

To get the list of possible child relationships for use in your related lists, use this in anon apex:

 

String sObjectName = 'Contact'; //this is the sObject - use API name
Schema.DescribeSObjectResult r = Schema.getGlobalDescribe().get(sObjectName).getDescribe();
List<Schema.ChildRelationship> C = R.getChildRelationships(); 
for(schema.childrelationship d : C){
	system.debug(logginglevel.error, d.getRelationshipName());
}

Here's the controller:

 

public with sharing class HoverList_main {
	
	/*
	From component - contains the record Id, a hyphen, and the related object name
		Ex: Params="Account-{!a.Id}-Opportunities"
	Optionally can include another hyphen and the wording preferred to appear as the name of the objects in the related list
		Ex: Params="Opportunity-{!o.Id}-OpportunityLineItems-Products"
	*/
	
	public String hlParams; 						//parameter passed back to component
	public String childName {get; set;}					//name of child sObject related to main record object (plural API name)
	public String childNameOverride {get; set;} 				//overridden name of child sObject
	public String childSize {get; set;}					//number of related list items
	public Boolean accessible {get; set;}					//boolean value to determine if the hover link can be rendered
	
	public String getHLParams(){return null;}
	public void setHLParams(String s){
		if(hlParams == null){
			String childObjectName = '';
			String[] sSplit = s.split('-', -1);			//split up the hlParam value
			String sObjectName = sSplit[0];				//sObject type of main record
			String objectId = sSplit[1];				//Id of main record
			childName = sSplit[2];					//child sObject (plural API name)
			if(sSplit.size() == 4) childNameOverride = sSplit[3];	//overridden name of child sObject to be used in hover list text
			else childNameOverride = childName;			//no extra parameter passed; use plural API name

			Schema.DescribeSObjectResult r = Schema.getGlobalDescribe().get(sObjectName).getDescribe();
			Schema.Childrelationship[] c = r.getChildRelationships();
			String q = 'select count() from ';
			for(Schema.Childrelationship d : c){
				if(d.getRelationshipName() == childName){
					q += d.getChildSObject().getDescribe().getName() + ' where ' + d.getField() + ' = \'' + objectId + '\' LIMIT 11';
					accessible = d.getField().getDescribe().isAccessible();
					break;
				}
			}
			Integer tSize = database.countQuery(q);
			childSize = String.valueOf(tSize);			//return to the component
			hlParams = 'str';					//prevents duplicate runs
		}
	}
}

 

Eva DeLoriolEva DeLoriol

Thanks devisfun!  I actually got this to work, but needed to add the transient keyword to get this to work.

 

Transient Schema.DescribeSObjectResult r = Schema.getGlobalDescribe().get(sObjectName).getDes​cribe();
List<Schema.ChildRelationship> C = R.getChildRelationships();

 

Regards,

Eva!

AnshulJainAnshulJain

Hi,

The Post helped me a lot in meeting my requirement.

I have one additional requirement  for which i want to replcate the related list popupwindow on hover on the link as it is happening in standard page using visualforce page.

 

Can anyone help??

 

Thanks in advance!

Vishal_ThoriyaVishal_Thoriya

Hi devisfun,

can you post a link for this example?

devisfundevisfun

Hi Vishal_Thoriya,

 

I'm sorry, but I don't have a public page to view this example.

SFDCDevQASFDCDevQA

How did you do this?  I don't understand what you said about using the parent id of the hover links div tag and writing the hover tag on load....

 

Thanks,

Amanda

 

JenLJenL

Hi Venkat,

 

I would like to use this as well.  Can yo post your code or email it to me? 

 

Thank you!

saikalyan.ax1722saikalyan.ax1722

Hi All ,

 

  How to use the Hover links in Force.com sites.

 

Thanks,

S.Sai kalyan

 

IT OperationsIT Operations
Why can't salesforce provide a reasonable method of doing this?  The hacks above aren't clear
Karthikeyan KannanKarthikeyan Kannan
Hi Venkat,
               Could you please post your source code here, This will helps a lot.

Thanks.
 
salesforce@14salesforce@14
Hi All,

         Anyone post the code for this requirement.

Thanks in Advance.
roxtonroxton
Is there a way to make it work properly in the Salesforce Console? When I click on a link in the popup panel for one of the related lists, the new page shows the following error:
"URL No Longer Exists
You have attempted to reach a URL that no longer exists on salesforce.com..."
salesforce@14salesforce@14
Hi roxton,
 
              can you share your code with me. I can take it as reference.


Thanks
salesforce@14salesforce@14
Hi All,

      I wanna display the hover list for custom related list. can anyone share the code for that?

Thanks in Advance.
Varun AnnadataVarun Annadata
what does creating a component does how we will display it in the detail page?how to display the link which when hovered will display the visual force page like it does for a standard page?Can someone explain the logic.Creating a component will automatically add the link?