Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Merry SMerry S 

Visualforce Iframe issue - passing values

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 (minipagelayout) 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>

 

Best Answer chosen by Admin (Salesforce Developers) 
jayjaysjayjays

Hi,

 

ok, you are almost there.  You are binding to the fields on the Account which is the main Account record on this page.  There needs to be some more controller code to get the fields for the record that we are hovering over.

 

in the accountDetail vf:

 

<apex:pageblock rendered="{!hoverAccount!=null}" > 
                <apex:pageblocksection columns="2" id="ka">  
                    <apex:repeat value="{!$ObjectType.Account.FieldSets.Overview}" var="ov">  
                        <apex:outputfield value="{!hoverAccount[ov]}"/>  
                      </apex:repeat> 
                  </apex:pageblocksection> 
</apex:pageblock>

 in the controller extension:

 

public string hoveredAccount{get;set;}
    public Account hoverAccount{get;set;}
    public void setHoveredAccount(){
        if(hoveredAccount!=null & hoveredAccount!=''){
            List<Schema.FieldSetMember> fields = Schema.SObjectType.Account.fieldSets.getMap().get('overview').getFields();
            String query = 'SELECT ';
            for(Schema.FieldSetMember f : fields) {
                query += f.getFieldPath() + ', ';
            }
            query += 'Id, Name FROM Account where id=\''+hoveredAccount+'\'';
            system.debug(query);
            hoverAccount=(Account)Database.query(query)[0];}
        else hoverAccount=null;
    }

 

Many Thanks,

James.

 

 

All Answers

jayjaysjayjays

Hi,

 

what about using the <apex:detail> tag with the subject set as the id of the account that is being hovered?

 

<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; 
}
table
{
border-collapse:collapse;
table-layout: fixed;
}
 </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 >
            <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');" >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">
                                  <apex:outputLink 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="30%">
    <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">
                <apex:detail inlineEdit="false" relatedList="false" subject="{!hoveredAccount}" />
            </apex:outputPanel>
        </apex:facet>
    </apex:actionStatus>
    
</td>
</tr>
</table>
</body>
</apex:page>

 
Merry SMerry S

This works great - and I like it. However, management does not. They just want some of the data displayed... is there a way to use this with a VF page, rather than the account detail? I tried to figure it out on my own, but could not.
jayjaysjayjays
Well you have a few options but whatever markup is in the "accountDetail" outputPanel is shown when you hover.

The most favourable option would be to keep the vf as it is but creata an Account page layout with just the fields you want to display and assign this page layout to the Force.Com profile. This would keep the configuration of the fields displayed as declarative rather than code and make it more maintainable. You also have the flexibility of having different layouts for different recordtypes if you are using them.
The in-between option is to create a field set and write some more vf and apex code to display the fields in the field set. This would allow you to add/remove fields by changing the field set but is not as flexible as the page layouts.
The third and least preferable option is to hard code inputField components for each field.

Let me know if you need more info on any of these options.

Cheers.
Merry SMerry S

You have been an amazing help. But I am still having issues.

 

The page layout will work perfectly for when I make this available via Sites. However, I cannot use it for those using SF. (At least I beleive that to be true, LOL)

I have created a fieldset, but I cannot get the ID to pass to is so that is shows the right information for the account that is hovered over. Code below.

 

<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; 
}
table
{
border-collapse:collapse;
table-layout: fixed;
}
 </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 >
            <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');" >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">
                                  <apex:outputLink 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="30%">
    <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">
       <apex:form >
    <apex:pageblock > 
                <apex:pageblocksection columns="2" id="ka">  
            <apex:repeat value="{!$ObjectType.Account.FieldSets.Overview}" var="ov">  
                <apex:outputfield value="{!Account[ov]}">
                   
            </apex:outputfield></apex:repeat> 
        </apex:pageblocksection> 
            </apex:pageblock> 
              </apex:form> 
            </apex:outputPanel>
        </apex:facet>
    </apex:actionStatus>
    
</td>
</tr>
</table>
</body>
</apex:page>

 
jayjaysjayjays

Hi,

 

ok, you are almost there.  You are binding to the fields on the Account which is the main Account record on this page.  There needs to be some more controller code to get the fields for the record that we are hovering over.

 

in the accountDetail vf:

 

<apex:pageblock rendered="{!hoverAccount!=null}" > 
                <apex:pageblocksection columns="2" id="ka">  
                    <apex:repeat value="{!$ObjectType.Account.FieldSets.Overview}" var="ov">  
                        <apex:outputfield value="{!hoverAccount[ov]}"/>  
                      </apex:repeat> 
                  </apex:pageblocksection> 
</apex:pageblock>

 in the controller extension:

 

public string hoveredAccount{get;set;}
    public Account hoverAccount{get;set;}
    public void setHoveredAccount(){
        if(hoveredAccount!=null & hoveredAccount!=''){
            List<Schema.FieldSetMember> fields = Schema.SObjectType.Account.fieldSets.getMap().get('overview').getFields();
            String query = 'SELECT ';
            for(Schema.FieldSetMember f : fields) {
                query += f.getFieldPath() + ', ';
            }
            query += 'Id, Name FROM Account where id=\''+hoveredAccount+'\'';
            system.debug(query);
            hoverAccount=(Account)Database.query(query)[0];}
        else hoverAccount=null;
    }

 

Many Thanks,

James.

 

 

This was selected as the best answer
Merry SMerry S

Thank you, James. I have learned so much!
sfdcFanBoysfdcFanBoy
Im getting this error when I tried the javascript code

The entity "colon" was referenced, but not declared.