Communicate between sidebar and modal dialogue box

2019-01-19 08:38发布

站内问答 / 移动开发
1871 1 4

I have a form in modal dialogue box, once the form is submitted I have to update the sidebar with the form data. How can it be achieved? I have tried by polling the form data at some specific time interval. Is there any other work around?

1条回答
在下西门庆
2楼-- · 2019-01-19 09:33

Communicating between Dialog and Sidebar

Well here's an example of something that's reasonably close to what you are talking about. It's something I made up just to learn how to deal with the PropertiesService. It's not complete but some of it works and you can pass information from the dialog to sidebar via the PropertiesService storage. There is a limit to how much you can store there though. I don't the exact number but I know 26KB is too much.

So anyway once it's running you can use one of the Sender Text Boxes to write a message and press the sender button and the message will go to the PropertiesService and and then back to the Dialog or Sidebar which ever one your sending with via the onSuccessHandler and it will be written in the conversation text box. And if you press refresh on the other dialog or sidebar then it's conversation will be updated as well.

I'm guessing you might be able to find a way to perform the refresh automatically.

Anyway this example covers a lot of the same ground that you might want to cover. Of course realize that I'm not a Google Guru so don't assume that the way I do things is the best way or even a good way. But it does work.

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)