smartsheet-picker-angularjs
Version:
An AngularJS directive that provides an expandable tree-view of a Smartsheet user's sheets, reports, workspaces and sights.
39 lines (37 loc) • 1.76 kB
HTML
<html>
<head>
<title>AngularJS Smartsheet Picker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="../smartsheetPicker/dist/smartsheetPicker.module.js"></script>
<script src="example.module.js"></script>
<script src="../smartsheet-home.js"></script> <!-- stubbing a response for GET /home from Smartsheet -->
<script src="../smartsheetPicker/dist/smartsheetPicker.directive.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="../smartsheetPicker/dist/smartsheetPicker.css" rel="stylesheet">
</head>
<body ng-app="example" ng-controller="homeController">
<h2>Smartsheet Picker for AngularJS</h2>
<p>This is page is an example of how to implement the Smartsheet Picker directive for AngularJS.</p>
<smartsheet-picker
on-sheet-select="vm.setSelectedSheet(selectedSheet)"
tree-data="vm.treeData"
selected-sheet= "vm.selectedSheet"
include-sheets="true"
include-reports="true"
include-sights="true"></smartsheet-picker>
<script>
angular
.module('home',[])
.controller('homeController', function($scope) {
$scope.vm = {};
$scope.vm.selectedSheet = {sheet: null};
// treeData is where you will want to inject the response from the getHome endpoint in the Smartsheet API
$scope.vm.treeData = realSmartsheetHome;
$scope.vm.setSelectedSheet = function(selectedSheet) {
console.log(selectedSheet);
}
});
</script>
</body>
</html>