将我的Google信息中心应用从UI服务转换为HTML服务 [英] Converting my google dashboard app from the UI service to the HTML service

问题描述

我是初学者的应用程序脚本，所以我们可能没有开始一个好的开始，但在这里我去...

我正在使用来自Google团队的酷（但是可回收）代码创建简单的仪表板。

在研究改进仪表板显示方式的方法的同时，我发现出于UI服务被弃用（我首先必须研究不赞成使用的含义）。

现在我意识到我需要为我的仪表板使用HTML服务。问题是如何转换下面的代码，以便它可以在HTML服务上工作？

代码通常指代引用UI服务的变量'app'。我不确定是否需要更新该部分，或者是否需要创建HTML文件并重新开始。我希望有人能帮助我。

 函数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（）; 
 
 
 //创建表格和饼图
 
 var tableChart = Charts.newTableChart（）
 .setDataViewDefinition（Charts.newDataViewDefinition（）。setColumns （[1,2,3,4]））
 .setDimensions（1000,500）.build（）; 
 $ b $ var pieChart = Charts.newPieChart（）
 .setDataViewDefinition（Charts.newDataViewDefinition（）。setColumns（[1,4]））
 .build（）; 
 
 //创建仪表板将过滤器绑定到图表。 
 var dashboard = Charts.newDashboardPanel（）。setDataTable（data）
 .bind（[ageFilter，transportFilter，statusFilter，monthFilter，nameFilter]，[tableChart，pieChart]）
 .build（） ; 
 
 //创建一个UiApp以显示仪表盘。
 
 var app = UiApp.createApplication（）; 
 
 
 var filterPanel = app.createVerticalPanel（）
 .add（app.createLabel（Fix Tickets））
 .add（app.createHorizo​​ntalPanel（）
 .add（app.createVerticalPanel（）
 .setSpacing（10）））; 
 
 var chartPanel = app.createHorizo​​ntalPanel（）; 
 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）; 
 
 
返回应用; 
} 
  

解决方案

您。最近碰到这个。也许它会有所帮助。
将UiApp转换为HTML

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;
}

解决方案

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

这篇关于将我的Google信息中心应用从UI服务转换为HTML服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！