Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
nbanas My organization is 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?
A coworker of mine was actually have to find a solution. Afterwards it was just a matter of building a VF component so we could reuse the code on multiple pages. Cool_Developer, thanks for your help.
I've included the code we used below. We are using this code w/ the Case object.
<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>
All Answers
Hi,
You can probably take a reference from the standard hovers which come on the detail pages.
Maybe, with a little hacking of the script, you may achieve what you are looking for!
Cool_D
A coworker of mine was actually have to find a solution. Afterwards it was just a matter of building a VF component so we could reuse the code on multiple pages. Cool_Developer, thanks for your help.
I've included the code we used below. We are using this code w/ the Case object.
<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>
Way to go!!
Thanks for the post :)
Cool_D
@nbanas, I was searching the forums for creating the Related List Hovers like it seems you have done here, but I'm not understanding your code. Hoping you're still on the forums, I know it's been a while since this post. It seems to me only the top 2 sections of your code address the Related List Hover part, and the rest cover the twisty sections of the detail page?
<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>Did you create these classes or are you just accessing the SF classes somehow?
And do you know if I ignore the twisty section stuff if it'll still work like normal?