Mixing Panels in UI Service - google-apps-script

I ave been trying to start a new web app project of mine. I wanted to start making my main user interface first using GAS, UI Service.
But after mixing to types of panels, it doesn't seem to work.
What on earth am I doing wrong.
function doGet() {
var app = UiApp.createApplication();
var westPanel = app.createVerticalPanel()
.add(app.createButton("Button 1"))
.add(app.createButton("Button 2"))
.add(app.createButton("Button 3"));
var centerPanel = app.createVerticalPanel()
.add(app.createHTML('Some Text.....'));
var splitPanel = app.createSplitLayoutPanel()
.addWest(westPanel, 150)
.add(centerPanel)
.setHeight('100%').setWidth('100%');
var tabPanel = app.createDecoratedTabPanel()
.add(splitPanel, 'Finances')
.setHeight('100%').setWidth('100%');
app.add(tabPanel);
return app;
}
Kind Regards

Apps Script UiApp uses GWT behind the scenes. And the issue here is that the SplitLayoutPanel (a GWT layout panel) does not work with TabPanel (a non-layout panel). My understanding is that the first asks for the height of the parent which in turn asks for the height of the child. Nobody gets happy and the panels collapse.
If we had in Apps Script the GWT TabLayoutPanel it would be the solution for you. But we don't, and don't even bother requesting any enhancement for UiApp on the issue tracker as they (the Google Apps Script team) have stated multiple times that they're not going to put any effort into it, because the way to go is HtmlService. If you find an unworkable situation, do it in HtmlServices or don't use Apps Script.
Here's a good explanation on why this does not work: gwt ScrollPanel in TabPanel: no vertical scrollbar

Related

Responsive ModalDialog/ModelessDialog Google Script

Is it possible the create modaldialog/modelessdialog that is always x% of the screen?
I know that I can set constat width and height like so, but I'd love to have it depending on the user screen
function Modalprompt(){
var ui=SpreadsheetApp.getUi();
Logger.log(window.innerwidth);
var htmlOutput =HtmlService.createTemplateFromFile('index').evaluate()
.setWidth(600)
ui.showModalDialog(htmlOutput,"Wpisywanie osób do rostera");
}
Unfortunately, what you want cannot be achieved from Apps Script as the available methods are only: setWidth() and setHeight().
What you can do instead is to file a feature request on Google's Issue Tracker and provide all the necessary details here.

Google apps script editor's content assist is great, but buggy. Tips n' Tricks? Is this right forum for this?

Is this right place for google script editor questions? Hope so.
Content assist is great, but stops working at times for me. Sometimes fix is to cut/paste all my code in/out of a desktop text editor, and back into google script editor. Perhaps this cleans out hidden chars, tags, etc., or perhaps it resets content assist. Dunno. But, works somewhat. Any thoughts? Tips? Trick?
Too, here's great crash course on google script editor from the developers. Well worth a the watch: Crash Course Apps Scrip Editor
If not appropriate place for editor questions, please point me to it. Thanks.
Also, does GAS stand for google apps script? google apps services? A library? Wha? Yes, I'm kinda newbie. Is there an apps script related wiki?
One trick to reset the content assist is to go back up to the class and retype a period right after it. So, if you're working with a line of code that involves Sheets and it has lost auto-complete for what ever reason, typing the period right after the firstSpreadsheetApp in the function has worked for me.
SO is the wiki.
Please don't use a "GAS" for abbreviation.
I tried re-typing the period after SpreadsheetApp and it didn't seem work for me. I was chaining variables together like this:
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(),
open_log = spreadsheet.getSheetByName('OPEN_LOG'),
closed_log = spreadsheet.getSheetByName('CLOSED_LOG'),
invoiced_log = spreadsheet.getSheetByName('INVOICED_LOG');
Once I changed the code to:
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var open_log = spreadsheet.getSheetByName('OPEN_LOG');
var closed_log = spreadsheet.getSheetByName('CLOSED_LOG');
var invoiced_log = spreadsheet.getSheetByName('INVOICED_LOG');
the content assist started working again. I'm not 100% positive this is the fix, just seemed to work for me this time. Give it a try...beats pulling your hair out.
This seems to work for me when I lose CONTENT ASSIST [object method prompting] ... for the moment ... the getfid function may somehow be used by the editor when following the actual 2 steps in the function beneath it.
function getfid(fname) {
files = DriveApp.getFilesByName(fname);
file = files.next();
fid = file.getId();
return fid;
}
// the following 2 steps seem to turn CONTENT ASSIST back on ???
// 1. type the period after the SpreadsheetApp [ss must exist?]
// 2. then test to see if TA is back on by typing the period after ss_ad
function resetCONTENTASSIST() {
ss_ad = SpreadsheetApp.openById(getfid('adminDATA'));
ss_ad.
}

How do I open a web browser using google apps script? [duplicate]

This question already has answers here:
Google Apps Script to open a URL
(6 answers)
Closed 2 years ago.
I've created a spreadsheet in google drive, and I've put together a tutorial presentation using google presentations to demonstrate to the users how to use the spreadsheet and why it's better than the way we were doing it before.
What I would like is a message box to appear when the spreadsheet is opened asking if that person has watched the tutorial presentation yet. If the user clicks No I'd like to either open a new page in the browser to show them the presentation I've published, or show the presentation in a custom UI.
I've searched for hours and can't figure it out. Is this possible? Thank you for your help!
I'm new to the forum so please let me know if I posted this wrong. Thanks!
Something like this does it pretty well.
I used a fake button to keep the "look and feel" consistent with the other button , I simply added the link invisible on top of it ;-)
function alertLink() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var app = UiApp.createApplication().setTitle('Message').setHeight('100').setWidth('400');
var panel = app.createVerticalPanel().add(app.createHTML('Did you see my beautiful <b>Tutorial</b> ?'));
var grid = app.createGrid(1,2).setWidth('400');
var closeHandler = app.createServerHandler('close');
var b1 = app.createButton("NO and I'd like to").setTitle('go to the tutorial in a new tab');
var b2 = app.createButton("YES and I don't want to see it again",closeHandler).setTitle('close this window');
var link = app.createAnchor('XXXXXXXXXX','http://www.google.com').setStyleAttributes({'zIndex':'1' , 'position':'fixed' , 'top':'25' , 'left':'20', 'color':'transparent' }).setTitle('go to the tutorial in a new tab');
var G1 = app.createVerticalPanel().add(b1).add(link);
grid.setWidget(0,0,G1).setWidget(0,1,b2);
app.add(panel).add(grid)
doc.show(app)
}
function close(){
return UiApp.getActiveApplication().close();
}
Just use an onOpen trigger if you want it to execute automatically on spreadsheet open. (or rename the main function as onOpen() )
Here is how it looks like :
For an onOpen trigger, it's certainly a better UX to prompt the user with a dialog box offering the option to open a URL, as opposed to opening the URl automatically. See serge's answer here for how to do that (which is more up-to-date than the deprecated code in his answer on this thread).
But for other triggers (such as a menu item click) check out my answer here to open a URL automatically.

Is there a way to remove a script from a doc (using the new doc embedded script)

I developed a script extension that uses a Google doc as template AND as script holder.
It gives me a very nice environment to implement a mail merge application (see below).
At some point I use the DocsList class makeCopy(new Name) to generate all the docs that will be modified and sent. It goes simply like that :
var docId=docById.makeCopy('doc_'+Utilities.formatString("%03d",d)).getId();
Everything works quite nicely but (of course) each copy of the template doc contains a copy of the script which is obviously not necessary ! It is also a bit annoying since each time I open a copy to check if data are right I get the sidebar menu that opens automatically which is a time consuming process ...
My question is (are) :
is there any way to remove the embedded script from the copy ? (that would be simple)
or should I copy all the doc elements from the template to an empty document ? (which is also a possible way to go but I didn't try and I don't know what will be in this doc in real life use...
Shall I get a perfect clone in any case ?)
I've read the doc and didn't find any relevant clue but who knows ? maybe I missed something obvious ;-)
below is a reduced screen capture to show the context of this question :
Following Henrique's suggestion I used a workaround that prevents the UI to load on newly created documents... (thanks Henrique, that was smart ;-)
The function that is called by onOpen now goes like that :
function showFields() {
var doc = DocumentApp.getActiveDocument();
var body = doc.getBody();
var find = body.findText('#'); // the new docs have no field markers anymore.
if(find != null){ // show the UI only if markers are present in the document.
var html = HtmlService.createHtmlOutputFromFile('index')
.setTitle("Outils de l'option Publipostage").setWidth(370);
ui.showSidebar(html);
}
}

Client validation of multiple widgets

I have a submit button whose enablement state depends on several other widgets' state; and I can't come up with a client side solution in Google Apps Script to do the validation.
For example, take three checkboxes. The submit button should be enabled iff (if-and-only-if) at least one checkbox is enabled.
I know I could do this with server side validation but there shouldn't be any need for something this simple. Any suggestions? Thanks.
It perfectly possible to write client side handlers that depend on multiple widgets' states, as you can just chain many validateX calls on a single handler. The problem here is just that clientHandlers cannot validate checkboxes state.
I have opened an issue regarding this problem, you may want to star it to keep track of updates and kind of vote for it:
Issue 2220: UiApp handler validateValue of checkbox
Anyway, it is possible to workaround this, and I'll just to show you that it is possible to have handlers depending on multiple widgets value, but this code will be much simpler when issue 2220 is solved:
function doGet(e) {
var app = UiApp.createApplication().setTitle('Checkbox Test');
var panel = app.createVerticalPanel(),
noChecked = app.createClientHandler(),
button = app.createButton('Test').setEnabled(false);
for( var i = 0; i < 3; ++i ) {
var cb1 = app.createCheckBox('cb'+i),
cb2 = app.createCheckBox('cb'+i).setVisible(false),
tb = app.createTextBox().setValue('false').setVisible(false);
cb1.addClickHandler(app.createClientHandler().forTargets(cb2).setValue(true).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('true'));
cb2.addClickHandler(app.createClientHandler().forTargets(cb1).setValue(false).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('false'));
cb1.addClickHandler(app.createClientHandler().forTargets(button).setEnabled(true));
cb2.addClickHandler(noChecked.validateMatches(tb,'false'));
panel.add(cb1).add(cb2).add(tb);
}
noChecked.forTargets(button).setEnabled(false);
return app.add(panel.add(button));
}
ClientHandlers are intentionally simple. You can do arbitrary code with ServerHandlers and the speed difference should be relatively small. Otherwise, yes, this is by design and if you need more complicated client logic you need to use HtmlService.
The tradeoff between UiApp and HtmlService related to how we guarantee that you can't serve malicious code from a script. UiApp code uses simple builder patterns that are limiting but definitely safe, while HtmlService uses complex sandboxing to achieve that goal, with tradeoffs of not working on older browsers and some other limitations.
This specific use case sounds workable in UiApp, if I understand you correctly. If you want an example of a show/hide button that flips, here is one:
function doGet() {
var app = UiApp.createApplication();
var label = app.createLabel("I am a toggleable widget").setVisible(false);
var show = app.createButton("show");
var hide = app.createButton("hide").setVisible(false);
show.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(true).forTargets(show).setVisible(false));
hide.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(false).forTargets(show).setVisible(true));
return app.add(show).add(hide).add(label);
}
Basically, use 2 buttons and flip the visibility of the button too.
Checkboxes are in fact validated - but it is their text that is validated, not their value:
var app = UiApp.createApplication();
var check = app.createCheckBox();
check.setText("foo").addClickHandler(
app.createServerHandler("clicked").validateMatches(check, "foo"));
return app.add(check);
The issue tracker request is reasonable though.