在Google脚本中侧边栏和模式对话框之间进行沟通 [英] Communicate between sidebar and modal dialogue box in google script
本文介绍了在Google脚本中侧边栏和模式对话框之间进行沟通的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在模态对话框中有一个表单，一旦表单被提交，我必须用表单数据更新侧边栏。如何实现？我试过在特定的时间间隔轮询表格数据。是否还有其他解决方法？
解决方案
在对话框和边栏之间进行通信
<这里有一个与你所谈论的东西相当接近的例子。这是我为了学习如何处理PropertiesService而编写的。它并不完整，但其中一些工作正常，您可以通过PropertiesService存储将信息从对话框传递到边栏。尽管如此，您可以在那里存储多少钱。我不确切的数字，但我知道26KB是太多了。因此，无论如何，一旦它运行，你可以使用其中一个发件人文本框写一条消息，然后按发件人按钮和消息将转到PropertiesService，然后返回到通过onSuccessHandler发送的对话框或侧栏，并将其写入对话文本框中。如果您在另一个对话框或侧栏上按刷新，那么它的对话也会更新。
我猜你可能会找到自动执行刷新的方法。
无论如何，例子涵盖了很多与你可能想要覆盖的基础相同的内容。当然要意识到我不是Google Guru，所以不要以为我做事情的方式是最好的方式，甚至是一种好的方式。但它确实有效。
代码。 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（'删除会话'，'delConversation'）
.addToUi（）;
};
函数delConversation（）
{
PropertiesService.getDocumentProperties（）。deleteAllProperties（）;
}
函数savConversation（会话）
{
PropertiesService.getDocumentProperties（）。setProperties（conversation）;
return（对话）;
}
函数getConversation（）
{
var conversation = PropertiesService.getDocumentProperties（）。getProperties（）;
if（typeof（conversation.active）=='undefined'）
{
conversation = {'thread'：'*****开始一个新的线程*****' ，'active'：true};
}
返回对话;
$ b函数MyDialog1（）
{
var ui = HtmlService.createHtmlOutputFromFile（'ModeLessDialog'）
。 setSandboxMode（HtmlService.SandboxMode.IFRAME）
.setWidth（420）
.setHeight（600）;
SpreadsheetApp.getUi（）。showModelessDialog（ui，'MyDialog1'）;
}
函数MyDialog2（）
{
var msg ='< html>< head>< link rel =stylesheethref =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 =Button1name =Button1id =My_Button_1class =My_Tools/> \
< br />< div style =margin-bottom：5px;> < input type =textvalue =This is textid =My_Text_1class =My_Toolsname =Text1/> \
< br />< input type = buttonvalue =Button2name =Button2id =My_Button_2class =My_Tools/> \
< br />>< input type =textvalue =This是文字id =My_Text_2class =My_Toolsname =Text2/> \
< br />< input type =buttonvalue =ExitonClick =google .script.host.close（）; /> \
< / div>< / body>< / html>';
var title ='MyDialog2';
dispStatus（title，msg）;
}
函数SideBar3（）
{
var ui = HtmlService.createHtmlOutputFromFile（'ModeLessDialog'）。setTitle（'Handler Communications'）;
SpreadsheetApp.getUi（）。showSidebar（ui）;
函数logSettings（show）
{
var show = typeof（show）！=='undefined'？显示：真实;
var settings = PropertiesService.getDocumentProperties（）。getProperties（）;
var html ='< html>< head>< link rel =stylesheethref =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;} \\ \\ b $ b .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 = <>< form>< h3>对话设置< / h3>< div class =blockstyle =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 =buttonclass =actionvalue =Exitonclick = google.script.host.close（）; />< / DIV>;
html + ='< / div>< / div>< / form>< / body>< / html>';
if（show）dispStatus（'Document Properties'，html，400,400）;
函数dispStatus（title，html，width，height）
{
//显示一个带有自定义HtmlService内容的无模式对话框。
var title = typeof（title）！=='undefined'？标题：'无标题';
var width = typeof（width）！=='undefined'？宽度：250;
var height = typeof（height）！=='undefined'？身高：300;
var html = typeof（html）！=='undefined'？ html：'< p>没有提供html。< / p>';
var htmlOutput = HtmlService
.createHtmlOutput（html）
.setWidth（width）
.setHeight（height）;
SpreadsheetApp.getUi（）。showModelessDialog（htmlOutput，title）;
$ h $ ModeLessDialog.html
<！DOCTYPE html>
< html>
< head>
< base target =_ top>
< link rel =stylesheethref =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_blockclass =block form-group>
< div class =sndr_block>
< strong>发件人1< / strong>
< br />< input type =textsize =30value =id =sender1msgclass =action/>
< br />< div class =bttn_block>< input type =buttonvalue =Sendname =Sender1id =sender1class =action/> ;< / DIV>
< / div>
< div class =sndr_block>
< strong>发件人2< / strong>
< br />< input type =textsize =30value =id =sender2msgclass =action/>
< br />< div class =bttn_block>< input type =buttonvalue =Sendname =Sender2id =sender2class =action/> ;< / DIV>
< / div>
< div id =conv_block>
< strong>会话< / strong>
< br />< textarea id =conversationrows =10cols =35>< / textarea>
< br />< input type =buttonvalue =Savename =Saveid =save-msgclass =action/>
< input type =buttonvalue =Deletename =Deleteid =del-msgclass =action/>
< input type =buttonclass =actionid =disp-log-settingvalue =SettingsonClick =google.script.run.logSettings（）; />
< input type =buttonvalue =Refreshclass =actionid =refresh/>
< / div>
< div id =btn-bar>
< br />< input type =buttonvalue =ExitonClick =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（）;
}）;
函数sendMessage1（）
{
var message = $（'＃conversation'）。val（）+'\ nSender1：\\\
'+ $（'＃ sender1msg'）VAL（）;
var newconversation = {'thread'：message，'active'：true};
$（'＃sender1msg'）。val（''）;
$（'＃conversation'）。css（background-color，＃ffe866）;
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（showStatus）
.savConversation（newconversation）;
$ b $ 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）;
}
函数deleteConversation（）
{
var conversation = {'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）;
$ b $ function refreshConversation（）
{
$（'＃conversation'）。css（background-color，＃ffe866）;
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（showStatus）
.getConversation（）;
}
函数showStatus（）
{
dispStatus（'showStatus'，'This is status'）;
$（'＃conversation'）。css（background-color，＃ffb3b3）;
}
console.log（'ModeLessDialogJavaScript'）;
< / script>
< / body>
< / html>
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?
解决方案 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.
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>
这篇关于在Google脚本中侧边栏和模式对话框之间进行沟通的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
