Retrieving records through javascript to use in javascript in a Visualforce page

Hi guys,

I'm completely new at javascript, so I need some help. I think I'm close but not there yet.

Bare with me:
I've got VF page with standard controller on account and the code of the page works perfectly with hard coded values!
What I would like to do is replace the hard coded values with record values of that account through javascript so I don't need a controller for it.

This is the working preview with hard coded values of the main account and it's Partner Roles:
User-added image

And this is the code for it:

<apex:page standardController="Account" showHeader="false" sidebar="false">
  <html>
  <head>
    <title>Links Network demo - images</title>

    <style>
      body {font: 10pt arial;}
    </style>
                                                                        
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="{!$Resource.NetworkJS}/network.js"></script>
    
    <script type="text/javascript">
      var nodesTable = null;
      var linksTable = null;
      var network = null;

      var DIR = '{!URLFOR($Resource.NetworkJS, 'examples/img/refresh-cl/')}';

      google.load('visualization', '1');
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create a data table with nodes.
        nodesTable = new google.visualization.DataTable();
        nodesTable.addColumn('number', 'id');
        nodesTable.addColumn('string', 'text');   // optional
        nodesTable.addColumn('string', 'image');  // optional
        nodesTable.addColumn('string', 'style');   // optional
        
        // Create a data table with links.
        linksTable = new google.visualization.DataTable();
        linksTable.addColumn('number', 'from');
        linksTable.addColumn('number', 'to');
        linksTable.addColumn('number', 'length'); // optional
        var lengthMain = 250;
        var lengthSub = 100;
        
        nodesTable.addRow([1, 'THIS ACCOUNT', DIR + 'Network-Pipe-icon.png', 'image']);
        nodesTable.addRow([2, 'Van Gansewinkel Industrie BV', DIR + 'ShareHolder3.jpg', 'image']);
        nodesTable.addRow([3, 'Van Gansewinkel BV', DIR + 'ShareHolder3.jpg', 'image']);
        nodesTable.addRow([4, 'Afval loont Shared Service Center BV', DIR + 'Entity.jpg', 'image']);
        nodesTable.addRow([5, 'TEMPOs Breclav AS', DIR + 'Entity.jpg', 'image']);
        linksTable.addRow([1, 2, lengthMain]);
        linksTable.addRow([1, 3, lengthMain]);
        linksTable.addRow([1, 4, lengthSub]);
        linksTable.addRow([1, 5, lengthSub]);
        
        
          
        // specify options
        var options = {
          'width': '1000px', 
          'height': '600px',
          'stabilize': false   // stabilize positions before displaying
        };

        // Instantiate our graph object.
        network = new links.Network(document.getElementById('mynetwork'));

        // Draw our graph with the created data and options 
        network.draw(nodesTable, linksTable, options);
      }
    </script>
  </head>

  <body>
    <div id="mynetwork"></div>
    <p>
    
    </p>
    
    <div id="info"></div>
  </body>
 </html>
</apex:page>

Now here's what I did to make it dynamic, but gives me blank page:

<apex:page standardController="Account" showHeader="false" sidebar="false">
  <html>
  <head>
    <title>Links Network demo - images</title>

    <style>
      body {font: 10pt arial;}
    </style>
                                                                        
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="{!$Resource.NetworkJS}/network.js"></script>
    
    <script type="text/javascript">
      var nodesTable = null;
      var linksTable = null;
      var network = null;

      var DIR = '{!URLFOR($Resource.NetworkJS, 'examples/img/refresh-cl/')}';

      google.load('visualization', '1');
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create a data table with nodes.
        nodesTable = new google.visualization.DataTable();
        nodesTable.addColumn('string', 'id');
        nodesTable.addColumn('string', 'text');   // optional
        nodesTable.addColumn('string', 'image');  // optional
        nodesTable.addColumn('string', 'style');   // optional
        
        // Create a data table with links.
        linksTable = new google.visualization.DataTable();
        linksTable.addColumn('string', 'from');
        linksTable.addColumn('string', 'to');
        linksTable.addColumn('number', 'length'); // optional
        var lengthMain = 250;
        var lengthSub = 100;
		
		nodesTable.addRow([{!Account.Id}, {!Account.Name}, DIR + 'Network-Pipe-icon.png', 'image']);
        
        
        // We need the sessionId to be able to query data
        sforce.connection.sessionId = '{!$Api.Session_ID}';
        // Query data using SOQL.
        var nodesResult = sforce.connection.query("Select Id, AccountFromId, AccountFrom.Name, AccountToId, AccountTo.Name, Role " +
                      "from AccountPartner where AccountFromId = '{!account.Id}' " +
                      "order by Role desc");
        // Iterate over the result
        var node = new sforce.QueryResultIterator(nodesResult);
        while(node.hasNext()) {
            var record = node.next();
            // Add the data to the table
            if(record.Role == 'Share Holder'){
            nodesTable.addRow([record.AccountToId, record.AccountTo.Name, DIR + 'ShareHolder3.jpg', 'image']);
            linksTable.addRow([record.AccountFromId, record.AccountToId, lengthMain]);
            }else {
            nodesTable.addRow([record.AccountToId, record.AccountTo.Name, DIR + 'Entity.jpg', 'image']);
            linksTable.addRow([record.AccountFromId, record.AccountToId, lengthSub]);
            }
        }
        
        
        
        
          
        // specify options
        var options = {
          'width': '1000px', 
          'height': '600px',
          'stabilize': false   // stabilize positions before displaying
        };

        // Instantiate our graph object.
        network = new links.Network(document.getElementById('mynetwork'));

        // Draw our graph with the created data and options 
        network.draw(nodesTable, linksTable, options);
      }
    </script>
  </head>

  <body>
    <div id="mynetwork"></div>
    <p>
    
    </p>
    
    <div id="info"></div>
  </body>
 </html>
</apex:page>

The SOQL is correct I checked and it gives me the records in the partner roles related list on account.
Could anybody help me fix this. I know I'm close and I think it has something to do with id being a string and not a number or that the variables passed are not in the correct format or something but I'm not sure.

February 4, 2015
·
Answer
·
Like
0
·
Follow
1

Zuinglio Lopes Ribeiro Júnior
Hello,

Puzzling, try the code below:

<apex:page standardController="Account" showHeader="false" sidebar="false"> <html> <head> <title>Links Network demo - images</title> <style> body {font: 10pt arial;} </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="{!$Resource.NetworkJS}/network.js"></script> <script type="text/javascript"> var nodesTable = null; var linksTable = null; var network = null; var DIR = '{!URLFOR($Resource.NetworkJS, 'examples/img/refresh-cl/')}'; google.load('visualization', '1'); // Set callback to run when API is loaded google.setOnLoadCallback(drawVisualization); // Called when the Visualization API is loaded. function drawVisualization() { // Create a data table with nodes. nodesTable = new google.visualization.DataTable(); nodesTable.addColumn('string', 'id'); nodesTable.addColumn('string', 'text'); // optional nodesTable.addColumn('string', 'image'); // optional nodesTable.addColumn('string', 'style'); // optional // Create a data table with links. linksTable = new google.visualization.DataTable(); linksTable.addColumn('string', 'from'); linksTable.addColumn('string', 'to'); linksTable.addColumn('number', 'length'); // optional var lengthMain = 250; var lengthSub = 100; // This part is really needed? nodesTable.addRows(1); nodesTable.setCell(i, 0, {!Account.Id}); nodesTable.setCell(i, 1, {!Account.Name}); nodesTable.setCell(i, 2, DIR + 'Network-Pipe-icon.png'); nodesTable.setCell(i, 3, 'image'); // We need the sessionId to be able to query data sforce.connection.sessionId = '{!$Api.Session_ID}'; // Query data using SOQL. var nodesResult = sforce.connection.query("Select Id, AccountFromId, AccountFrom.Name, AccountToId, AccountTo.Name, Role " + "from AccountPartner where AccountFromId = '{!account.Id}' " + "order by Role desc"); // Iterate over the result var node = new sforce.QueryResultIterator(nodesResult); var i = 0; while(node.hasNext()) { var record = node.next(); nodesTable.addRows(1); linksTable.addRows(1); linksTable.setCell(i, 0, record.AccountFromId); linksTable.setCell(i, 1, record.AccountToId); linksTable.setCell(i, 2, lengthMain); // Add the data to the table if(record.Role == 'Share Holder'){ nodesTable.setCell(i, 0, record.AccountToId); nodesTable.setCell(i, 1, record.AccountTo.Name); nodesTable.setCell(i, 2, DIR + 'ShareHolder3.jpg'); nodesTable.setCell(i, 3, 'image'); linksTable.setCell(i, 0, record.AccountFromId); linksTable.setCell(i, 1, record.AccountToId); linksTable.setCell(i, 2, lengthMain); }else { nodesTable.setCell(i, 0, record.AccountToId); nodesTable.setCell(i, 1, record.AccountTo.Name); nodesTable.setCell(i, 2, DIR + 'Entity.jpg'); nodesTable.setCell(i, 3, 'image'); linksTable.setCell(i, 0, record.AccountFromId); linksTable.setCell(i, 1, record.AccountToId); linksTable.setCell(i, 2, lengthSub); } i ++; } // specify options var options = { 'width': '1000px', 'height': '600px', 'stabilize': false // stabilize positions before displaying }; // Instantiate our graph object. network = new links.Network(document.getElementById('mynetwork')); // Draw our graph with the created data and options network.draw(nodesTable, linksTable, options); } </script> </head> <body> <div id="mynetwork"></div> <p> </p> <div id="info"></div> </body> </html> </apex:page>

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.

February 4, 2015
·
Like
0
·
Dislike
0

Jan Vandevelde
Hey Zuinglio Lopes Ribeiro Júnior,

thanks for fast reply and trying.

I had my hopes up there but, no, still blank page :-(

February 4, 2015
·
Like
0
·
Dislike
0

Jan Vandevelde
What did you mean with : // This part is really needed?
Because I'm retrieving all Partner Roles from the SOQL, but the first node should be the account I'm on, so that in the picture all partners are linked to the main one

February 4, 2015
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Retrieving records through javascript to use in javascript in a Visualforce page

You need to sign in to do that.