Google Scripts Error: "No HTML file named index.html was found. (line 2, file "Code", project "Version 1")"

1
votes

When I deploy my Google Scripts script as a web app, everything runs as I expect it to. However, after inserting the script into my Google Sites page, I get the error "No HTML file named index.html was found. (line 2, file "Code", project "Version 1")".

I don't understand how this can be, as I have an index that appears to work with the script fine when I deploy it as a web app. Here are the codes that I have:

code.gs:

function doGet() {

  return HtmlService.createHtmlOutputFromFile('index');

  var data = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, "Stage")
      .addColumn(Charts.ColumnType.NUMBER, "Central - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Northeast/Canada - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "NY/NJ/Financials - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Southeast/SP - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "West - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "APAC - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "EMEA - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Japan - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Central - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "Northeast/Canada - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "NY/NJ/Financials - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "Southeast/SP - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "West - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "APAC - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "EMEA - Q2") 
      .addColumn(Charts.ColumnType.NUMBER, "Japan - Q2")
      .addRow(["Needs Arista's Help to Deploy", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Customer in Production", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Unlikely to Deploy", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Plans to Deploy Independently", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Wrong Territory", 1x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Blank", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .build();

  var quarterFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Stage")
      .setAllowTyping(true)
      .setAllowMultiple(true)
      .build();

  var territoryFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Central - Q1")
      .setAllowTyping(true)
      .setAllowMultiple(true)
      .build();

  var columnChart = Charts.newColumnChart()
      .setDataViewDefinition(Charts.newDataViewDefinition()
                            .setColumns([0, 1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16]))
      .setDimensions(1000, 800)
      .build();

  var tableChart = Charts.newTableChart()
      .setDimensions(1200, 300)
      .build();

  var dashboard = Charts.newDashboardPanel()
      .setDataTable(data)
      .bind([quarterFilter, territoryFilter], [columnChart, tableChart])
      .build();

  var uiApp = UiApp.createApplication();

  dashboard.add(uiApp.createVerticalPanel()
                .add(uiApp.createHorizontalPanel()
                    .add(quarterFilter).add(territoryFilter)
                    .setSpacing(70))
                .add(uiApp.createVerticalPanel()
                    .add(columnChart).add(tableChart)
                    .setSpacing(50)));

  uiApp.add(dashboard);
  return uiApp;
}

index.html: 

   <html>
      <head>
        <meta name="gwt:property" content="locale=en">
        <style type="text/css">
            html,body {margin: 0; padding: 0; height: 100%;}
                .loading-text{background: url(gwt/images/spin-wait.gif) no-repeat; font-size: 16px; font-weight: bold; margin: 16px 0 16px 40px; padding-left: 22px;}
                .loading-box {background-color: white; border: 1px solid #ACACAC; border-bottom-color: #999; box-shadow: 0 4px 16px rgba(0,0,0,0.2); margin-top: -25px; margin-left: -100px; padding: auto; position: absolute; top: 50%; left: 50%; width: 200px; height: 50px; z-index: 16777272;}
                .loading-glass-panel {-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30 );filter: alpha(opacity = 30); opacity: 0.3; background-color: #999; display: block; position: absolute; width: 100%; height: 100%; z-index: 16777271;}
        </style>
        <script type="text/javascript">
            var startTime = new Date().getTime();
            var tzPointsJson = "\x5b1109635200000,1128902400000,1130657000000,1143333000000,1143806400000,1145000000000,1146380000000,1152489600000,1159800000000,1159500000000,1162095000000,1162075000000,1162105500000\x5d";
            var libId = "Mo7m4kwokfCocmLBpFogl0-o1H6hGQoPE";
            var payload = "\x7b\x22types\x22:\x7b\x22u1647587496418\x22:\x22VerticalPanel\x22,\x22u1647587496419\x22:\x22HorizontalPanel\x22,\x22u1647587496420\x22:\x22VerticalPanel\x22,\x22u1647587496412\x22:\x22Control\x22,\x22u1647587496414\x22:\x22Chart\x22,\x22u1647587496413\x22:\x22Control\x22,\x22u1647587496416\x22:\x22DashboardPanel\x22,\x22u1647587496415\x22:\x22Chart\x22\x7d,\x22libId\x22:\x22Mo7m4kwokfCocmLBpFogl0-o1H6hGQoPE\x22,\x22id\x22:\x22u1647587496417\x22,\x22title\x22:\x22\x22,\x22commands\x22:\x5b\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22VERTICALPANEL\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22HORIZONTALPANEL\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x22CategoryFilter\x22,null,\x7b\x22ui\x22:\x7b\x22allowMultiple\x22:true,\x22allowTyping\x22:true\x7d,\x22filterColumnLabel\x22:\x22Stage\x22\x7d\x5d,\x22cmd\x22:\x22GVIZCONTROL\x22,\x22id\x22:\x22u1647587496412\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496412\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x22CategoryFilter\x22,null,\x7b\x22ui\x22:\x7b\x22allowMultiple\x22:true,\x22allowTyping\x22:true\x7d,\x22filterColumnLabel\x22:\x22Central - Q1\x22\x7d\x5d,\x22cmd\x22:\x22GVIZCONTROL\x22,\x22id\x22:\x22u1647587496413\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496413\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b70\x5d,\x22cmd\x22:\x22SETSPACING\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496419\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22VERTICALPANEL\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x22ColumnChart\x22,null,null,\x7b\x22width\x22:1000,\x22height\x22:800\x7d,\x7b\x22columns\x22:\x5b0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16\x5d\x7d\x5d,\x22cmd\x22:\x22CHART\x22,\x22id\x22:\x22u1647587496414\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496414\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x22Table\x22,null,null,\x7b\x22width\x22:1200,\x22height\x22:300\x7d,\x7b\x7d\x5d,\x22cmd\x22:\x22CHART\x22,\x22id\x22:\x22u1647587496415\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496415\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b50\x5d,\x22cmd\x22:\x22SETSPACING\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496420\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22rows\x22:\x5b\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Needs Arista\\u0027s Help to Deploy\x22\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:16\x7d,\x7b\x22v\x22:22\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:9\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:19\x7d,\x7b\x22v\x22:21\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Customer in Production\x22\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:8\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:15\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:15\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Unlikely to Deploy\x22\x7d,\x7b\x22v\x22:24\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:13\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:26\x7d,\x7b\x22v\x22:18\x7d,\x7b\x22v\x22:20\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:26\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:31\x7d,\x7b\x22v\x22:19\x7d,\x7b\x22v\x22:23\x7d,\x7b\x22v\x22:6\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Plans to Deploy Independently\x22\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Wrong Territory\x22\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:3\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:9\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Blank\x22\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:50\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:70\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:8\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:54\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:84\x7d,\x7b\x22v\x22:0\x7d\x5d\x7d\x5d,\x22cols\x22:\x5b\x7b\x22id\x22:\x220\x22,\x22label\x22:\x22Stage\x22,\x22type\x22:\x22string\x22\x7d,\x7b\x22id\x22:\x221\x22,\x22label\x22:\x22Central - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x222\x22,\x22label\x22:\x22Northeast\/Canada - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x223\x22,\x22label\x22:\x22NY\/NJ\/Financials - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x224\x22,\x22label\x22:\x22Southeast\/SP - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x225\x22,\x22label\x22:\x22West - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x226\x22,\x22label\x22:\x22APAC - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x227\x22,\x22label\x22:\x22EMEA - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x228\x22,\x22label\x22:\x22Japan - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x229\x22,\x22label\x22:\x22Central - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2210\x22,\x22label\x22:\x22Northeast\/Canada - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2211\x22,\x22label\x22:\x22NY\/NJ\/Financials - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2212\x22,\x22label\x22:\x22Southeast\/SP - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2213\x22,\x22label\x22:\x22West - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2214\x22,\x22label\x22:\x22APAC - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2215\x22,\x22label\x22:\x22EMEA - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2216\x22,\x22label\x22:\x22Japan - Q2\x22,\x22type\x22:\x22number\x22\x7d\x5d\x7d,\x5b\x7b\x22charts\x22:\x5b\x22u1647587496414\x22,\x22u1647587496415\x22\x5d,\x22controls\x22:\x5b\x22u1647587496412\x22,\x22u1647587496413\x22\x5d\x7d\x5d\x5d,\x22cmd\x22:\x22GVIZD

ASHBOARDPANEL\x22,\x22id\x22:\x22u1647587496416\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496418\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496416\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496416\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496417\x22\x7d\x5d,\x22sMode\x22:false\x7d";
        var _tok = "AJuLMu1HSeeMwjZJTVoQWkK6ufvP_SgK-A:1501770451378";
        var serviceId = "AKfycbzmmtjlnXRuyfvRMQLi5Xc-Twn2J3HnvCW6jkOM6LBW";
        var _sd =  false ;
        var _aurg =  true ;
        var _ea =  false ;
        var _up = '\/a\/macros\/arista.com\/s\/AKfycbzmmtjlnXRuyfvRMQLi5Xc-Twn2J3HnvCW6jkOM6LBW';
        var standardsMode =  false ;
        var _MF = {"11":"https://drive.google.com/drive/search?q\u003dtype:script","13":"https://script.google.com/macros/srvStatic/rpc_relay.html","14":"https://docs.google.com/picker","15":"[email protected]","16":"https://script.google.com/a/macros/arista.com","18":"arista.com","19":"[email protected]","0":true,"1":false,"5":true,"8":30000,"9":0,"20":"AJuLMu1HSeeMwjZJTVoQWkK6ufvP_SgK-A:1501770451378","10":"https://console.cloud.google.com"};
    </script>
    <script type='text/javascript' src='gwt/googleappsscripts_userapp.nocache.js'>
    </script>
    <script type='text/javascript' src='//www.google.com/jsapi'>
    </script>
    <script type='text/javascript'>
        google.load('visualization', '1', {'callback': function() {}, 'packages':['corechart', 'controls', 'annotatedtimeline']});
    </script>
  </head>
  <body>
    <div class="loading-glass-panel" id="loading-glass-panel">
    </div>
      <div class="loading-box" id="loading-box">
      <div class="loading-text" id="loading-text">Loading...
    </div>
    </div>
  </body>
</html>
3
javascripthtmlgoogle-apps-scriptgoogle-sites

3 Answers

4
votes

Did you update the project version after making changes to the app? In development if you are using the /dev endpoint it will always show the latest version of the app. When you link the the /exec endpoint it will point to the current project version.

In the Deploy as web app dialog create a new version of the project by select the project version drop down. Any time you make a change to your script you will need to do this.

enter image description here

0
votes

The Index html file has to be inside of the Google Script Project. It is not and Index.html file next to the .gscript file.

So you create it that inside of the "Google Apps Scripts" Application you choose menu item File and "New" => "HTML File".

You specify the file name without extension: "Index" and pay attention to case sensitivity (so no "index" in your script if your file is "Index").

0
votes

For me the problem was that apparently references to the HTML file are case sensitive. So make sure your references and file name are correct.

My error was: "Exception: No HTML file named javaScript was found. (line 33)"
Solution: I changed the file name from javascript.html to javaScript.html. And then don't forget to make a new project version like Spencer described in the answer above, otherwise it won't work!