Widget: How to pass variable from client script to script section on HTML template

[Michael O J]

I'm trying to use this bootstrap treeview (https://github.com/jonmiles/bootstrap-treeview) as explained in (https://www.servicenow.com/community/developer-forum/how-to-build-a-tree-view-in-servicenow/m-p/1378...) to display a tree view.

I have the tree view working, but I don't know how to pass the json structure from the client script to a script section on the HTML template?

Client Script

function($scope) {
  /* widget controller */
  var c = this;
	
	c.tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];
		
	c.getTree = function getTree() {
  	// Some logic to retrieve, or generate tree structure
  	return tree;
	}
	
};

HTML template

<h1>
  Tree View 
</h1>
<div>
	<div id="tree"></div>
</div>

<script>
  function getTree() {
  	// Some logic to retrieve, or generate tree structure
  	return c.getTree();    <---------------------------------- c (client) is unknown
	}
  
  $('#tree').treeview({data: getTree()});
</script>

Alternatively: Can I "bind" the bootstrap-treeview to the div-DOM element, without the script section?

[Pratiksha Kalam]

Hello,
Check this thread to understand how exactly data transfer .
https://www.servicenow.com/community/now-platform-forum/how-to-pass-data-from-html-to-client-to-serv... 

https://www.servicenow.com/community/itsm-forum/how-to-pass-data-from-html-to-server-script-or-html-... 

If answer is helpful mark it as helpful and correct !

Thank you.

br,

pratiksha.k

[Michael O J]

I know about the uni-directional and bi-directional angular notations {{c.variable}} and {{::c.variable}}.

But this does not work with a <script></script> tag section on the HTML page.

[Michael O J · Accepted solution]

Solved by moving the assignet of the library to the client script.

	$(document).ready(function(){
		$('#tree').treeview({data: c.tree});
	});