Question

我想使用Google Apps脚本UiService来生成多页用户界面。

这是我到目前为止所得到的：

function doGet(e) 
   {
var app=UiApp.createApplication();

  var nameLabel=app.createLabel('Name:');
  var button=app.createButton("next");//my button on clicking,trying to divert to other       UI
 var handler=app.createServerHandler("myclick");
 button.addClickHandler(handler);
 app.add(namelabel);
 app.add(button);
return app;
}

function myClick(){
//on clicking the button it should call the other ui or other html page
is there any method for that.}

我该怎么做？

Answer 1

您应该查看How To Allow Users to Review Answers before Submiting Form?，其中有一个示例可以执行此操作。

我们的想法是创建具有多个面板的UiApp，然后使用setVisible()显示或隐藏它们以响应用户操作。（如果您使用的是HtmlService，则可以将“页面”括在不同的<div>中，并更改其display属性。请参阅toggle show/hide div with button?。

Best Practices还描述了使用客户端处理程序进行响应，所以让我们试试吧。

/**
 * Very simple multiple page UiApp. 
 * 
 * This function defines two panels, which appear to the end user
 * as separate web pages. Visibility of each panel is set to
 * control what the user sees.
 */
function doGet() {
  var app = UiApp.createApplication();

  var page1 = app.createFlowPanel().setId('page1');
  var page2 = app.createFlowPanel().setId('page2');

  // Content for Page 1
  page1.add(app.createLabel('Page 1'));
  var page1Button = app.createButton('Next Page');
  page1.add(page1Button);
  // Create client handler to "change pages" in browser
  var gotoPage2 = app.createClientHandler()
     .forTargets(page1).setVisible(false)
     .forTargets(page2).setVisible(true);
  page1Button.addClickHandler(gotoPage2);

  // Content for Page 2
  page2.add(app.createLabel('Page 2'));
  var page2Button = app.createButton('Previous Page');
  page2.add(page2Button);
  // Create client handler to "change pages" in browser
  var gotoPage1 = app.createClientHandler()
     .forTargets(page1).setVisible(true)
     .forTargets(page2).setVisible(false);
  page2Button.addClickHandler(gotoPage1);

  app.add(page1);
  app.add(page2);

  // Set initial visibility
  page1.setVisible(true);
  page2.setVisible(false);

  return app;
}

适用于更改UI的视图。为了将其扩展为一般用途，您可能希望将服务器端处理程序添加到相同的按钮以执行工作，并在事情进展时更新面板的内容。

Answer 2

Here is working code 这表示多页面形式，即它执行初始doGet()，然后让您来回前进多个doPost()。所有这些都是在标准getForm()和doGet()函数调用的单个doPost()函数中完成的。

// Muliple page form using Google Apps Script

function doGet(eventInfo)  {return GUI(eventInfo)};
function doPost(eventInfo) {return GUI(eventInfo)};

function GUI (eventInfo) {
  var n = (eventInfo.parameter.state == void(0) ? 0 : parseInt(eventInfo.parameter.state));
  var ui = ((n == 0)? UiApp.createApplication() : UiApp.getActiveApplication());
  var Form;
  switch(n){
    case 0: {
      Form = getForm(eventInfo,n); // Use identical forms for demo purpose only
    } break;
    case 1: {
      Form = getForm(eventInfo,n); // In reality, each form would differ but...
    } break;
    default: {
      Form = getForm(eventInfo,n) // each form must abide by (implement) the hidden state variable
    } break;
  }
  return ui.add(Form);
};

function getForm(eventInfo,n) {
  var ui = UiApp.getActiveApplication();

  // Increment the ID stored in a hidden text-box
  var state = ui.createTextBox().setId('state').setName('state').setValue(1+n).setVisible(true).setEnabled(false);
  var H1 = ui.createHTML("<H1>Form "+n+"</H1>");
  var H2 = ui.createHTML(
    "<h2>"+(eventInfo.parameter.formId==void(0)?"":"Created by submission of form "+eventInfo.parameter.formId)+"</h2>");

  // Add three submit buttons to go forward, backward and to validate the form
  var Next = ui.createSubmitButton("Next").setEnabled(true).setVisible(true);
  var Back = ui.createSubmitButton("Back").setEnabled(n>1).setVisible(true);
  var Validate = ui.createSubmitButton("Validate").setEnabled(n>0).setVisible(true);
  var Buttons = ui.createHorizontalPanel().add(Back).add(Validate).add(Next);
  var Body = ui.createVerticalPanel().add(H1).add(H2).add(state).add(Buttons).add(getParameters(eventInfo));
  var Form = ui.createFormPanel().setId((n>0?'doPost[':'doGet[')+n+']').add(Body);

  // Add client handlers using setText() to adjust state prior to form submission
  // NB: Use of the .setValue(val) and .setValue(val,bool) methods give runtime errors!
  var onClickValidateHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)));
  var onClickBackHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)-1));
  Validate.addClickHandler(onClickValidateHandler);
  Back.addClickHandler(onClickBackHandler);

  // Add a client handler executed prior to form submission
  var onFormSubmit = ui.createClientHandler()
  .forTargets(state).setEnabled(true) // Enable so value gets included in post parameters
  .forTargets(Body).setStyleAttribute("backgroundColor","#EEE");    
  Form.addSubmitHandler(onFormSubmit);

  return Form;
}

function getParameters(eventInfo) {
  var ui = UiApp.getActiveApplication();
  var panel = ui.createVerticalPanel().add(ui.createLabel("Parameters: "));
  for( p in eventInfo.parameter)
    panel.add(ui.createLabel(" - " + p + " = " + eventInfo.parameter[p]));
  return panel;
}

代码使用单个＆＃34;隐藏＆＃34;状态（此处在TextBox中可视化）和多个SubmitButton以允许用户在表单序列中前进和后退，以及验证表单的内容。另外两个SubmitButton＆＃34;重新布线＆＃34;使用ClientHandler只需在表单提交之前修改隐藏状态。

备注

请注意在客户端处理程序中使用.setText(value)方法。使用Chrome浏览器，如果我切换到TextBox的{{1}}或.setValue(value)方法，我会收到奇怪的运行时错误。

我尝试（不成功）使用.setValue(value, fireEvents)而不是隐藏的TextBox来实现此逻辑。这需要使用服务器处理程序，而不是客户端处理程序。行为不稳定，向我建议异步服务器端事件发生在表单提交事件之后。

Answer 3

您可以在阅读应用中的参数时加载不同的UI。 doGet（e）传递app的url中的参数。这样您可以使用例如：？myapp = 1（url参数）调用您的应用。在您的doGet中，您可以使用以下命令读取该参数：e.parameter.myapp 这样，您可以根据传递的参数加载不同的应用程序。

您可以通过链接更改按钮（使用不同的网址参数添加到您自己的应用中）。

您也可以使用按钮和处理程序，但上述方式有我的偏好。

如果您想使用按钮＆lt;＆gt;处理程序，只需更改主（第一个面板），每次都为您的应用对象添加一个全新的面板。这样你就可以从头开始（即创建一个新的应用程序）。

使用UiService的多页UI

3 个答案: