How to get Mini Page Layouts which contains Related Lists?

Question

I'm trying to add mini page layout to some results I query (Cases, Tasks, Notes ....) I want to have the same results as below when I hover a object on my vfp

I tried to use LookupHoverDetail but it gives me summary about one specific case or task ... not a general view off all the subjects of the object I'm querying. How can I have this mini page ?

Answer 1

One simple way of doing this is using the relatedList tag on your VF page. Below is for another object, but you could adapt it as per your requirement. You can use below as it is to see how it works.

VF

<!-- Make sure you are passing an Opportunity Id to this page -->    
<apex:page standardController="Opportunity" extensions="OpportunityExtn">

    <apex:form>
        <apex:outputLabel value="Show Related List">
            <apex:actionSupport action="{!showSection}" reRender="section" event="onmouseover"/>
            <apex:actionSupport action="{!hideSection}" reRender="section" event="onmouseout"/>        
        </apex:outputLabel>
    </apex:form>    

    <apex:outputPanel id="section">
        <apex:relatedList list="OpportunityLineItems" rendered="{!show}"> 

        </apex:relatedList>
    </apex:outputPanel>

    </apex:page>

Controller

public class OpportunityExtn {

        String contact;
        Public Boolean show{get; set;}

        public OpportunityExtn(ApexPages.StandardController controller) {
            show=false;
        }

        public void showSection(){
            show = true;
        }

        public void hideSection(){
            show = false;
        }
    }

Answer 2

This can't be done using standard functionality. The default mechanism for Mini Page Layouts is designed to display single object information.

What you mean is not the Mini Page Layout, but Hover Details feature. This one can't be reused on custom markup - unless you start to hack the underlying JS.

Bevor you start hacking, I would recommend that you create a VF-page and recreate the hover-content as you require it and then use a Tooltip Library to show the entire VF-page. Therefore you can have a look e. g. at Tooltipser http://iamceege.github.io/tooltipster/