function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
lilian.moncadelilian.moncade 

Visualforce component displays only code

Hello,
I have a problem with integrating a visualforce component on a dashboard.
I created a visualforce page with a custom controller, and i have the corresponding result by testing my page BUT
when i integrate my page with a drag & drop into a vf component, this displays only the code of my page.

Does this problem already occurs to somebody ?
And how can i solve it ?
I give you my code :
<apex:page controller="InactiveContactReport" showHeader="true" sidebar="true" showChat="true">
   <apex:includeScript value="https://www.google.com/jsapi"/>
    <apex:messages />
    <apex:image url="/img/icon/reports32.png" title="Tableau de Bord"/>
    <apex:outputText id="myId" value="Dashboard" style="font-weight:bold; font-size: 1.5em" />
    <style type='text/css'>
        .weight{
            text-align:center;
            width: 300px;
        }
        
        .width{
         width: 300px;
        }
    </style>
    
     <script   type ="text/javascript">
     
         var cssStyle =  {'tableCell' : 'weight', 'headerCell' : 'width' };   
             
         google.load('visualization', '1', {packages:['table']});
         google.setOnLoadCallback(drawInactiveContacts);
         
         function drawInactiveContacts(){
               
              
                 // Create and populate the data table.
     
       
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('date', 'Last Sale Date');
          <apex:repeat value="{!InactiveContacts}" var="v">
           
            data.addRow(['{!v.contact}', new Date({!v.year}, {!v.month}, {!v.day})]);
          </apex:repeat>

          // Draw our data
          var table = new google.visualization.Table(document.getElementById('dateformat_div'));
          table.draw(data, {showRowNumber: true,
                            allowHtml: true,  
                            cssClassNames: cssStyle
          
          });
      }
         
     </script>
     
     <apex:pageBlock >
      
        <apex:pageBlockSection title="Inactive Contacts List" >
           <div id="dateformat_div">
           </div>
       </apex:pageBlockSection>
    </apex:pageBlock>             
</apex:page>

Sorry for my english, i hope this is nevertheless understandable.

Regards,
Lilian Moncade

 

Best Answer chosen by Admin (Salesforce Developers) 
lilian.moncadelilian.moncade

Hello,

I found the "solution" with a colleague this morning.

I don't know if others persons have already been blocked by this, but the solution is simple.

 

When you create a visualforce component, you insert the data source, then if you have Development Mode activated ( it was for me ) you see only the code of your visualforce page.

But Click on the Wrench of the component and specify a height ( like 1000 ) then you will see the Dashboard And the code.

 

If you don't have Development Mode activated, i guess you did not have this problem.

 

Regards