Converting my google dashboard app from the UI ser

2019-08-15 13:31发布

问题:

I am a beginner to apps script so we're probably not off to a great start but here I go...

I am in the process of creating a simple dashboard using cool (but recycled) code from the google team.

Whilst researching ways of improving the way the dashboard displays, I found out that the UI service is being deprecated (I first had to research what deprecated meant).

So now I realise I need to use the HTML service for my dashboard. The question is how do I convert the code below so it works on the HTML Service?

The code often refers to the variable 'app' which refers to the UI Service. I'm not sure if I just need to update that part or if I need to create a HTML file and start again. I hope someone can help me.

function doGet() {

  var ss = SpreadsheetApp.openById('1EVpJrmuo7Er_a3Xsoy09VBBfQjEt5Ihdmm3JAWsPTIA');

  var data = ss.getDataRange();

  var ageFilter = Charts.newNumberRangeFilter().setFilterColumnIndex(4).build();
  var transportFilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build();
  var statusFilter = Charts.newCategoryFilter().setFilterColumnIndex(7).build();
  var monthFilter = Charts.newCategoryFilter().setFilterColumnIndex(0).build();
  var nameFilter = Charts.newStringFilter().setFilterColumnIndex(1).build();


 // Create a table and pie chart

 var tableChart = Charts.newTableChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2,3,4]))
  .setDimensions(1000,500).build();

var pieChart = Charts.newPieChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,4]))
  .build();

// Create a dashboard to bind the filters to the charts.
var dashboard = Charts.newDashboardPanel().setDataTable(data)
  .bind([ageFilter, transportFilter, statusFilter, monthFilter, nameFilter], [tableChart, pieChart])
  .build();

  // Create a UiApp to display the dashboard in.

 var app = UiApp.createApplication();


  var filterPanel = app.createVerticalPanel()
 .add(app.createLabel("Fix Tickets"))
  .add(app.createHorizontalPanel()
     .add(app.createVerticalPanel()
      .setSpacing(10)));

  var chartPanel = app.createHorizontalPanel();
      filterPanel.add(ageFilter).add(transportFilter).add(statusFilter).add(monthFilter).add(nameFilter).setSpacing(10);

chartPanel.add(tableChart).add(pieChart).setSpacing(10);

  dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel));
  app.add(dashboard);


  return app;
}

回答1:

I had the same problem as you. Recently came across this. Maybe it will help. Converting UiApp to HTML