I have only recently started playing around with Google-Apps-Scripts. I wanted to see if I could add a timeline to the top of my Google-Sheet dashboard using a 3rd party JS library.
My goal is to add the timeline widget inside of a Dialog box. I manage to get my dialogue box showing but with no content. I hope that what I am trying to do is possible. I'm aware that I could create a website and embed Google Doc inside it but wanted to try this, just for fun.
1) create the Dialog box on sheet open:
function onOpen() {
var htmlOutput =
HtmlService.createHtmlOutputFromFile('cabbages')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(1500)
.setHeight(600);
SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'bla');
}
2) cabbages file to show the timeline based on a library:
<div>
<script>
function getContent(css, js) {
return HtmlService.createHtmlOutputFromFile(css).getRawContent();
return HtmlService.createHtmlOutputFromFile(js).getRawContent();
}
getContent(timeLineCSS,timeLineJS);
</script>
<div id="mytimeline"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('mytimeline');
// Create a DataSet with data (enables two way data binding)
var data = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, data, options);
</script>
</div>
To link to the timeline library JS and CSS files I followed the post here:Use project Javascript and CSS files in a Google Apps Script web app?
I went with the top voted answer not the chosen answer.
So I have 2 other "html" files in my app script library:
timeLineJS:
<script>
// lots and lots of JS here
</script>
timeLineCSS
<style>
// lots of CSS here.
</style>
I now refresh the sheet and the dialog appears but with no content. Here is a screen shot of the console when I right click on the dialog box:
You can see "mytimeline" div and the content of "cabbages" file. But the dialog box is empty.
All I can think of is that the JS and CSS are not loading in via the links. Does Google-Apps-Script have an issue with loading in external files?
