2017-02-20 29 views
1

我有一个表单在模式对话框中,一旦表单被提交我必须用表单数据更新边栏。如何实现?我试过在特定的时间间隔轮询表格数据。还有其他解决方法吗?谷歌脚本中的边栏和模式对话框之间的沟通

+0

你的代码添加到您的Q. – xlm

+0

请看一看在以下链接答案:[栈溢出答案](http://stackoverflow.com/a/41265164/2946873) –

回答

1

那么这里对话框和边栏

之间的沟通

的的东西是相当接近的,你在说什么的例子。这是我为了学习如何处理PropertiesService而编写的。它并不完整,但其中一些工作正常,您可以通过PropertiesService存储将信息从对话框传递到边栏。尽管如此,您可以在那里存储多少钱。我没有确切的数字,但我知道26KB太多了。

因此无论如何,一旦它运行,您可以使用其中一个发件人文本框编写消息并按发件人按钮,消息将转到PropertiesService,然后回到对话框或侧栏,通过onSuccessHandler,它将被写入对话文本框中。如果您在另一个对话框或侧栏上按刷新,那么它的对话也会更新。

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

无论如何,这个例子涵盖了许多你可能想要覆盖的同样的理由。当然要意识到我不是Google Guru,所以不要以为我做事情的方式是最好的方式,甚至是一种好的方式。但它确实有效。

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

如果您将此添加到html 然后这两个对话框将每十秒钟刷新一次。 – Cooper

+0

我已经尝试使用setInterval,它工作正常。事情是我不想调用一个函数'n'次。所以,当在PropertiesService中添加一个值时,我急于知道是否有某种触发器。 @Cooper –

+0

对不起,但我不知道任何。希望别人能够看到我们的线索并赋予我们一些智慧。 – Cooper