Search code examples
javascriptgoogle-apps-scriptgoogle-sheetsvis.jsvis.js-network

Replace a var with google.script.run

Im very basic in js and i have an little issue with the following code.

How can i relate the var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}]; (in the HTML and Javacript Side) with a kind of getArray() (in the Google Script Side), to get the similar result of this post Share data from .gs (Google Apps Script) to <script> variable in html but, with the "edges" instead the "nodes"?

It can be google.script.run.withSuccessHandler(nodes, edges => {...}).coneArray().edgeArray();?

Google Script Side

function showBox() {
   var template = HtmlService.createTemplateFromFile("Map");
   var html = template.evaluate();
   html.setHeight(450).setWidth(650);
   SpreadsheetApp.getUi().showModelessDialog(html, "Mind Map");
}

function include() {
  return HtmlService.createHtmlOutputFromFile().getContent();
}

//-----------------------------------------------------------------------------------Global variables

var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

//-----------------------------------------------------------------------------------Nodes function

function coneArray(){
  
  const data = ss.getRange(2,1,ss.getLastRow()-1,5).getValues();

  let nodeArray = []
  
  data.forEach(element => {
    let obj = {}
    obj.id = element[4]
    obj.label = element[0]
    obj.group = element[1]
    obj.x = element[2]
    obj.y = element[3]
    nodeArray.push(obj)
    return element
    }
  )
  Logger.log(nodeArray);
  return nodeArray;
}

//-----------------------------------------------------------------------------------Edges function

function lineArray(){
  
  const data = ss.getRange(2,5,ss.getLastRow()-1,2).getValues();

  let edgArray = []
  
  data.forEach(element => {
    let obj = {}
    obj.to = element[1]
    obj.from = element[0]
    edgArray.push(obj)
    return element
    }
  )
  Logger.log(edgArray);
  return edgArray;
}

HTML and Javacript Side

<!doctype html>
<html>
<head>
  <title>Network</title>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
<input type="button" value="Reload" onclick="google.script.run.showBox()" />
<div id="mynetwork"></div>
<script type="text/javascript">

var container = document.getElementById('mynetwork');
var options = {edges: {smooth: false}, physics: {enabled: false}, nodes: {shape: "square",size: 10}};

var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}];

google.script.run.withSuccessHandler(nodes => {
  var data = {nodes: nodes, edges: edges};
  var network = new vis.Network(container, data, options);
}).coneArray();

</script>
</body>
</html>

Before hand, thanks a lot!

PS: The goal is connect the nodes with the edges data in a google spreadsheets.

PS: I share the entire code because, will not have sense in a part.

Solution
    • In your situation, there are 2 functions of coneArray() and edgeArray() in Google Apps Script. You want to retrieve the values from both functions and using the values, you want to use vis.js.

    I could understand like above. If my understanding is correct, how about the following modification?

    In this modification, the values are retrieved both coneArray() and edgeArray(), and the retrieved values are used for vis.js.

    Google Apps Script side:

    Please add the following script to the Google Apps Script.

    const sample = () => ([coneArray(), edgeArray()]);

    HTML and Javascript side:

    Please replace your script of google.script.run to as follows.

    google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {nodes: nodes, edges: edges}, options)).sample();

    Note:

    • If you want to call each function from Javascript, you can also use the following Javascript as a simple script. But I would like to recommend above modified script.

      google.script.run.withSuccessHandler(nodes => {
  google.script.run.withSuccessHandler(edges => {
    new vis.Network(container, {nodes: nodes, edges: edges}, options)
  }).edgeArray();
}).coneArray();