I am writing an application for the new Google Sheets to integrate another API with Sheets. I need to authorize the user by opening a new window allowing the user to login to authorize my app.
So far the only way I have found to do this is with a simple hyperlink. Is there a way to do this with a button that calls a function on the backend? I can't figure out anything that works to open a link in a new window when a user clicks on a button.
NOTE: I want to do this to be consistent with the UI. I need to add an "authorize" and a "deauthorize" button. The deauthorize button just calls a function to delete the access token from the users account, but the authorize button needs to open a new URL to send the user to another site to login.
Here is a possible solution using an auto open sidebar, it looks like this :
and the code below :
function onOpen() {
var shUi = SpreadsheetApp.getUi();
var app = UiApp.createApplication().setTitle('Custom functions');
var panel = app.createVerticalPanel().add(app.createHTML('please select an option below').setStyleAttribute('padding','10px'));
var grid = app.createGrid(1,2).setWidth('200');
var dHandler = app.createServerHandler('removeAuth');
var b1 = app.createButton("Authorize");
var b2 = app.createButton("De-authorize",dHandler).setTitle('remove authorization');
var link = app.createAnchor('XXXXX','http://www.google.com').setStyleAttributes({'zIndex':'1' , 'position':'fixed' , 'top':'45' , 'left':'20', 'color':'transparent' }).setTitle('proceed 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)
shUi.showSidebar(app);
}
function removeAuth(){
// some code
}
In Apps-script you can't open a new tab with button click events, But this can be made through
Anchors. So create a anchor and set the Href with the link to be opened in a new tab. To get a Button feel you can set the StyleAttribute for the anchor with a background-image property.
var anchor1 = app.createAnchor('Authorize','http://www.google.com')
.setStyleAttribute('backgroundImage','url('tree.png')');