当模式对话关闭时,如何在Google插件的补充工具栏中加载特定部分?

时间:2017-05-25 06:53:38

标签: javascript google-apps-script google-docs

我正在尝试在Google文档中创建一个添加项。添加的一部分允许用户提供我在模态对话框中获得的一些输入。当用户保存更改时,我应关闭对话框并根据用户输入更新侧栏中的部分。

我尝试在PropertiesService中保存详细信息,然后加载带有这些详细信息的补充工具栏

google.script.run.withSuccessHandler(function ()
{ 
 google.script.host.close();
}).sidebar_UI();

function sidebar_UI() 
{
  var sidebar_UI = HtmlService.createTemplateFromFile("sidebar_UI").evaluate();
  DocumentApp.getUi().showSidebar(sidebar_UI);
}

在用户详细信息存储在PropertiesService中之后,我很想知道是否有任何方法不加载整个侧边栏而是加载特定部分。

1 个答案:

答案 0 :(得分:0)

您必须在HTML文件中编写一些Javascript,这些Javascript将查询服务器代码以查找您要显示的任何信息。

基本上,您要在模态窗口中保存属性,然后从侧边栏中检索该数据。我不认为有更简洁的方法将数据从模态对话框传递到侧边栏。

以下是一个例子:

Code.gs

function onOpen() {

  SpreadsheetApp.getUi()
    .createAddonMenu()
    .addItem('Open Sidebar', 'openSidebar')
    .addToUi();

}

function onInstall() {
  onOpen();
}

function openSidebar() {
  var html = HtmlService.createTemplateFromFile('Sidebar')
    .evaluate();

  SpreadsheetApp.getUi().showSidebar(html);
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Modal')
      .setWidth(400)
      .setHeight(300);

  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Modal');
}

function saveName(name) {
  PropertiesService.getDocumentProperties().setProperty('STUDENT_NAME', name);
}

function getName() {
  return PropertiesService.getDocumentProperties().getProperty('STUDENT_NAME');
}

Modal.html

<form onsubmit="submitName(event)">
  <input type="text" name="studentName" />

  <button type="submit">Submit</button>
</form>

<script>
  function submitName(e) {
    e.preventDefault();
    var studentName = e.target.studentName.value;

    google.script.run
      .withSuccessHandler(google.script.host.close)
      .saveName(studentName);
  }
</script>

Sidebar.html

<section>

  <button onclick="showDialog()">Open Modal</button>
  <button onclick="getName()">Update Name</button>

  <h1>Name:</h1>
  <div id="response">
    <!-- the thing you are changing in the modal goes here -->
  </div>
</section>


<script>
function showDialog() {
  google.script.run
    .withSuccessHandler(getName)
    .showDialog();
}

function getName() {
  google.script.run
    .withSuccessHandler(function(res) {
      console.log(res);
      document.getElementById('response').innerHTML = res;
    })
    .getName();
}

</script>