6

I have a visualforce page that includes an iframe. In the parent window i have a list of Icons that relate to accounts (account id) and I need to be able to hover over those icons and certain details on the account show in the iframe. Is this possible? This could also be a popout type thing, too, but preferably the details should show in the iframe.

I tried using the standard popout (minipage layout) but it is not available on sites.com for non-salesforce users and eventually these pages need to be made accessible to everyone in my company.

I hope that made sense.

Thanks!

Here is the code I currently have using the minipage layout.

<apex:page StandardController="Account" extensions="ColumnControllerExt" >
<head>
    <script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

<style type="text/css"> 
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#FFFFFF;
    border:solid 1px #c3c3c3;
}
#rowInfo { 
    width:50px;
    display:bold; 
}
 </style>

</head>
<body>
 <apex:image value="/servlet/servlet.FileDownload?file=015e00000001X8a"/>
    <right><h1><font size="25">Any Customer, Any Employee, Any Time!</font></h1></right><br/>
    <center><font size="3"><a href="/apex/anyCustomerEmployeeTimeList">List View</a></font></center>
<table width="100%">
<tr valign="top">
<td width="70%">
        <apex:outputPanel style="width:300px" layout="block">
    <apex:variable value="{!0}" var="rowNumber" />
  <table>

              <tr align="center">
          <td><a href="JavaScript&colon;newPopup ('http://mc-www.mainman.dcs/dcs/main/index.cfm?event=showFile&ID=1D833C4A02E0D046BE&static=false');" >Key (WIG) RASCI</a></td>

     <td><a href="#">Acitve Project RASCI</a></td>  
         <td><a href="#">Active Opportunity > $50K RASCI</a></td>  
             <td><a href="#">Partner-Managed RASCI</a></td>  
                 <td><a href="#">TAM-Managed RASCI</a></td> 
                     <td><a href="#">TSE-Managed RASCI</a></td>  
                         <td><a href="#">Inactive RASCI</a></td>  



     </tr>

      <tr>
          <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
              <th id="rows">{!col_head}</th>
          </apex:repeat></tr>
      <tr>

                  <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
              <td id="rowInfo" border="0"> 

                  <apex:repeat value="{!map_values[col_head]}" var="col_val"> 
                      <a href="/{!col_val.id}" id="hover{!rowNumber}" 
                                        position="relative"
                                        onblur="LookupHoverDetail.getHover('hover{!rowNumber}').hide();" 
                                        onfocus="LookupHoverDetail.getHover('hover{!rowNumber}', '/{!col_val.id}/m?retURL=%2F{!col_val.id}&isAjaxRequest=1').show();" 
                                        onmouseout="LookupHoverDetail.getHover('hover{!rowNumber}').hide();" 
                                        onmouseover="LookupHoverDetail.getHover('hover{!rowNumber}', '/{!col_val.id}/m?retURL=%2F{!col_val.id}&isAjaxRequest=1').show();">
                      <apex:outputtext value="{!col_val.overall_status__c}" escape="false"/>

                      </a>
              <!-- Increasing the value of the variable -->
            <apex:variable var="rowNumber" value="{!rowNumber + 1}" />                 

                  </apex:repeat>
              </td>
          </apex:repeat>
      </tr>
  </table>
                    </apex:outputPanel>
</td>
    <td width="30%"><apex:iframe src="https://na13.salesforce.com/01Za00000016efu?isdtp=vw"/>
</td>
</tr>
</table>
</body>
</apex:page>

2 Answers 2

1

I ended up using an output panel to display what I wanted.

<apex:page StandardController="Account" extensions="ColumnControllerExt" tabstyle="account">
<head>
    <script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

<style type="text/css">
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#f8f8f8;
    border:solid 2px #236fbd;
}
#rowInfo { 
    width:50px;
    display:bold; 
}
table
{
border-collapse:collapse;
table-layout: fixed;
}   
 </style>
    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
        }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    div#wrapperHeader div#header {
 width:1000px;
 height:200px;
 margin:0 auto;
}

div#wrapperHeader div#header img {
 width:; /* the width of the logo image */
 height:; /* the height of the logo image */
 margin:0 auto;
}
    </style>
    <div id="wrapperHeader">
 <div id="header">
  <img src="https://c.na13.content.force.com/servlet/servlet.ImageServer?id=015a0000002WenZ&oid=00D3000000003Hx&lastMod=1375828250000" alt="logo" />

    <center><font size="3"><a href="/apex/anyCustomerEmployeeTimeList">List View</a></font></center>
        </div> 
</div>
</head>
<body>

<table width="100%">
<tr>
<td width="80%" valign="top">
        <apex:outputPanel >
            <apex:form >
                <apex:actionFunction action="{!setHoveredAccount}" name="setDetailId" reRender="accountDetail" status="detailStatus">
                    <apex:param name="detailId" value="" assignTo="{!hoveredAccount}"/>
                </apex:actionFunction>
                <table>
                     <tr align="center">
                         <td><a href="JavaScript&colon;newPopup ('http://mc-www.mainman.dcs/dcs/main/index.cfm?event=showFile&ID=1D833C4A02E0D046BE&static=false');" ><img src="/img/icon/documents24.png" title="Key (WIG) RASCI"/></a></td>

                 <td><a href="#"><img src="/img/icon/documents24.png" title="Acitve Project RASCI"/></a></td>  
                     <td><a href="#"><img src="/img/icon/documents24.png" title="Active Opportunity > $50K RASCI"/></a></td>  
                         <td><a href="#"><img src="/img/icon/documents24.png" title="Partner-Managed RASCI"/></a></td>  
                             <td><a href="#"><img src="/img/icon/documents24.png" title="TAM-Managed RASCI"/></a></td> 
                                 <td><a href="#"><img src="/img/icon/documents24.png" title="TSE-Managed RASCI"/></a></td>  
                                     <td><a href="#"><img src="/img/icon/documents24.png" title="Inactive RASCI"/></a></td>  



                 </tr>

                  <tr>
                      <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
                          <th id="rows">{!col_head}</th>
                      </apex:repeat></tr>
                  <tr>

                              <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
                          <td id="rowInfo" border="0"> 

                              <apex:repeat value="{!map_values[col_head]}" var="col_val">
                                  <apex:outputLink value="/apex/anycustomeremployeetimedetail?id={!col_val.id}"
                                  onfocus="setDetailId('{!col_val.id}');" 
                                  onmouseover="setDetailId('{!col_val.id}');"
                                  onblur="setDetailId('');" 
                                  onmouseout="setDetailId('');">
                                      <apex:outputText value="{!col_val.overall_status__c}" escape="false"/>
                                  </apex:outputLink>             

                              </apex:repeat>
                          </td>
                      </apex:repeat>
                      </tr>
                  </table>
            </apex:form>
        </apex:outputPanel>
</td>
<td width="20%">
    <apex:actionStatus id="detailStatus">
        <apex:facet name="start">
            <div style="text-align:center;">
                <img src="/img/loading.gif" alt="Loading graphic" />&nbsp;<strong>Loading...</strong>
            </div>
        </apex:facet>
        <apex:facet name="stop">
            <apex:outputPanel id="accountDetail">
                <br/>
                <br/>
       <apex:form >


<apex:pageblock rendered="{!hoverAccount!=null}" > 
    <apex:pageblocksection columns="1" id="name">
        <apex:outputfield value="{!hoverAccount.name}"/> 
        <apex:outputfield value="{!hoverAccount.type}"/> 
        </apex:pageblocksection>
    <apex:pageblocksection columns="1" id="ka"> 
    <apex:repeat value="{!$ObjectType.Account.FieldSets.Overview}" var="ov"> 
    <apex:outputfield value="{!hoverAccount[ov]}"/> 
    </apex:repeat> </apex:pageblocksection> </apex:pageblock> 
              </apex:form> 
            </apex:outputPanel>
        </apex:facet>
    </apex:actionStatus>

</td>
</tr>
</table>
</body>
</apex:page>
2
0

I do not think you need to use an iframe for this. Use a jquery popup modal and do everything inside it. The problem with using an iframe is you cannot (or will have tough time) controlling the working of that vf page in the iframe.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .