在谷歌脚本中的侧边栏和模态对话框之间进行通信

时间：2017-02-20 13:09:44

标签： google-apps-script

我在模式对话框中有一个表单，一旦表单提交，我必须用表单数据更新侧栏。如何实现？我试过通过在某个特定的时间间隔轮询表单数据。还有其他工作吗？

1 个答案:

答案 0 :(得分：1)

在对话框和侧栏之间进行通信

这里有一个与你所谈论的内容相当接近的例子。我只是为了学习如何处理PropertiesService而编写的。它不完整但有些工作正常，您可以通过PropertiesService存储将对话框中的信息传递给侧边栏。尽管你可以在那里存储多少是有限的。我没有确切的数字，但我知道26KB太多了。

所以无论如何，一旦它运行，您可以使用其中一个发件人文本框来编写邮件并按发件人按钮，邮件将转到PropertiesService，然后返回到对话框或侧边栏你通过onSuccessHandler发送它，它将写在对话文本框中。如果您在另一个对话框或侧边栏上按刷新，那么它的对话也会更新。

我猜你可能会找到一种自动执行刷新的方法。

无论如何，这个例子涵盖了许多您可能想要涵盖的相同内容。当然要意识到我不是谷歌大师，所以不要以为我做事的方式是最好的方式，甚至是好方法。但它确实有效。

A modeless dialog and sidebar

code.gs 

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('My Handler Tools')
      .addItem('Show MyDialog1','MyDialog1')
      .addSeparator()
      .addItem('Show MyDialog2','MyDialog2')
      .addSeparator()
      .addItem('Show SideBar3','SideBar3')
      .addSeparator()
      .addItem('Log Settings','logSettings')
      .addItem('Delete Conversation','delConversation')
      .addToUi();
};

function delConversation()
{
  PropertiesService.getDocumentProperties().deleteAllProperties();
}

function savConversation(conversation)
{
  PropertiesService.getDocumentProperties().setProperties(conversation);
  return(conversation);
}

function getConversation()
{
  var conversation = PropertiesService.getDocumentProperties().getProperties();
  if(typeof(conversation.active) == 'undefined')
  {
    conversation = {'thread': '***** Start a new thread *****', 'active': true};
  }
  return conversation;
}



function MyDialog1()
{
 var ui = HtmlService.createHtmlOutputFromFile('ModeLessDialog')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(420)
      .setHeight(600);
  SpreadsheetApp.getUi().showModelessDialog(ui,'MyDialog1');
}

function MyDialog2()
{
  var msg = '<html><head><link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">\
  <style>\
  #my_block{border:5px solid green;padding:10px 10px 10px 0px;}\
  </style></head><body><div id="my_block">\
  <input type="button" value="Button1" name="Button1" id="My_Button_1" class="My_Tools" />\
    <br /><div style="margin-bottom:5px;"><input type="text" value="This is text" id="My_Text_1" class="My_Tools" name="Text1" />\
    <br /><input type="button" value="Button2" name="Button2" id="My_Button_2" class="My_Tools" />\
    <br /><input type="text" value="This is text" id="My_Text_2" class="My_Tools" name="Text2" />\
    <br /><input type="button" value="Exit" onClick="google.script.host.close();" />\
  </div></body></html>';
  var title = 'MyDialog2';
  dispStatus(title,msg);
}

function SideBar3()
{
  var ui = HtmlService.createHtmlOutputFromFile('ModeLessDialog').setTitle('Handler Communications');
  SpreadsheetApp.getUi().showSidebar(ui);
}

function logSettings(show)
{
  var show = typeof(show) !== 'undefined' ? show : true;
  var settings = PropertiesService.getDocumentProperties().getProperties();
  var html = '<html><head><link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">\
  <style>.branding-below{bottom:54px;top:0;}\
  .branding-text{left:7px;position:relative;top:3px;}\
  .logo{vertical-align:middle;}\
  .width-100{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;?-moz-box-sizing:border-box;}\
  label{font-weight:bold;}\
  #creator-options,#respondent-options{background-color:#eee;border-color:#eee;border-width:5px;border-style:solid;display:none;}\
  #creator-email,#respondent-email,#button-bar,#submit-subject{margin-bottom:10px;}\
  #response-step{display:inline;}</style></head>\
  <body><div class="sidebar branding-below"><form><h3>Conversation Settings</h3><div class="block" style="border:2px solid black;padding:10px 5px 10px 5px;">';
  Logger.clear();
  for(var key in settings)
  {
    html += '<br />' + key + ' = ' + settings[key];
    Logger.log(key + ' = ' + settings[key]);
  }
  html += '<br /><div class="block blockgroup"><input type="button" class="action" value="Exit" onclick="google.script.host.close();" /></div>';
  html += '</div></div></form></body></html>';
  if(show)dispStatus('Document Properties',html,400,400);
}

function dispStatus(title,html,width,height)
{
// Display a modeless dialog box with custom HtmlService content.
  var title = typeof(title) !== 'undefined' ? title : 'No Title Provided';
  var width = typeof(width) !== 'undefined' ? width : 250;
  var height = typeof(height) !== 'undefined' ? height : 300;
  var html = typeof(html) !== 'undefined' ? html : '<p>No html provided.</p>';
  var htmlOutput = HtmlService
     .createHtmlOutput(html)
     .setWidth(width)
     .setHeight(height);
 SpreadsheetApp.getUi().showModelessDialog(htmlOutput, title);
}

ModeLessDialog.html 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <style>
      #my_block{border:2px solid black;background-color:rgba(0,150,255,0.2);padding:10px 10px 10px 10px;}
      #conv_block{border: 1px solid black;padding:10px 10px 10px 10px;}
      .bttn_block{padding:5px 0px 10px 0px;}
      .sndr_block {border:1px solid rgba(0,150,0,0.5);background-color:rgba(150,150,0,0.2);margin-bottom:2px;}
    </style>
  </head>
  <body>
  <form>
    <div id="my_block" class="block form-group">
      <div class="sndr_block">
        <strong>Sender 1</strong>
        <br /><input type="text" size="30"value="" id="sender1msg" class="action" />
        <br /><div class="bttn_block"><input type="button" value="Send" name="Sender1" id="sender1" class="action" /></div>
      </div>
      <div class="sndr_block">
        <strong>Sender 2</strong>
        <br /><input type="text" size="30" value="" id="sender2msg" class="action" />
        <br /><div class="bttn_block"><input type="button" value="Send" name="Sender2" id="sender2" class="action" /></div>
      </div>
      <div id="conv_block"> 
        <strong>Conversation</strong>
        <br /><textarea id="conversation" rows="10" cols="35"></textarea>
        <br /><input type="button" value="Save" name="Save" id="save-msg" class="action" />
        <input type="button" value="Delete" name="Delete" id="del-msg" class="action" />
        <input type="button" class="action" id="disp-log-setting" value="Settings" onClick="google.script.run.logSettings();" />
        <input type="button" value="Refresh" class="action" id="refresh" />
      </div>
      <div id="btn-bar">
        <br /><input type="button" value="Exit" onClick="google.script.host.close();" class="green" />
      </div>
    </div>
  </form>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
      $(function() {
        $('#sender1').click(sendMessage1);
        $('#sender2').click(sendMessage2);
        $('#del-msg').click(deleteConversation);
        $('#save-msg').click(saveConversation);
        $('#refresh').click(refreshConversation);
        google.script.run
           .withSuccessHandler(updateConversation)
           .withFailureHandler(showStatus)
           .getConversation();
      });

      function sendMessage1()
      {
        var message = $('#conversation').val() + '\nSender1:\n' + $('#sender1msg').val();
        var newconversation = {'thread': message, 'active': true};
        $('#sender1msg').val('');
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function sendMessage2()
      {
        var message = $('#conversation').val() + '\nSender2:\n' + $('#sender2msg').val();
        var newconversation = {'thread': message, 'active': true};
        $('#sender2msg').val('');
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function deleteConversation()
      {
        var conversation = {'thread': '***** Start a new thread *****', 'active': true};
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(conversation);
      }

      function saveConversation()
      {
        var message = $('#conversation').val();
        var newconversation = {'thread': message, 'active': true};
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function updateConversation(conversation)
      {
        $('#conversation').val(conversation.thread);
        $('#conversation').css("background-color", "white");
      }

      function refreshConversation()
      {
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
           .withSuccessHandler(updateConversation)
           .withFailureHandler(showStatus)
           .getConversation();
      }

      function showStatus()
      {
        dispStatus('showStatus','This is status');
        $('#conversation').css("background-color", "#ffb3b3");
      }

     console.log('ModeLessDialogJavaScript');
   </script>
  </body>
</html>
相关问题
最新问题