You need to sign in to do that
Don't have an account?
VenkatNYC
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.
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
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.
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
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
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?
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>
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
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!!
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.
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.
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.
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?
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:
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.
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!
RickNTA, did you ever figure anything out with customer related list hoverlists?
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!
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}" />
So I added what you said to my header like so
Then at the bottom right after my last related list I added your
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?
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.
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.
I tried quite a few things before posting back, but to no avail. Thanks for your help.
Here is tmy VF Page
My Controller
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.
Next, put this in your VF:
Finally, at the very bottom of the page (right before your </apex:page> tag) put this:
So if you don't mind, I re-wrote your VF with the above recommendations (all you have to do is create the component):
Let me know if that works for you.
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.
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.
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:
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:
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:
Here is a full line from the VF page in my example above (to render the Opportunity hover link on the Account):
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.
Can you kindly provide the code from your controller, "HoverList_main", thanks.
Thanks for your help but this makes the page detail not display and we (sales) need that.
If you display the detail, then you don't need to worry about the hover links... they are included in that detail.
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.
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.
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.
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.
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
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:
To get the list of possible child relationships for use in your related lists, use this in anon apex:
Here's the controller:
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).getDescribe();
List<Schema.ChildRelationship> C = R.getChildRelationships();
Regards,
Eva!
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!
Hi devisfun,
can you post a link for this example?
Hi Vishal_Thoriya,
I'm sorry, but I don't have a public page to view this example.
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
Hi Venkat,
I would like to use this as well. Can yo post your code or email it to me?
Thank you!
Hi All ,
How to use the Hover links in Force.com sites.
Thanks,
S.Sai kalyan
Could you please post your source code here, This will helps a lot.
Thanks.
Anyone post the code for this requirement.
Thanks in Advance.
"URL No Longer Exists
You have attempted to reach a URL that no longer exists on salesforce.com..."
can you share your code with me. I can take it as reference.
Thanks
I wanna display the hover list for custom related list. can anyone share the code for that?
Thanks in Advance.