Display External Google Sheet in a sidebar - google-apps-script

I am trying to make an app script add-on that creates a sidebar to display the content of an external google sheet that corresponds to the selected cell of the active sheet.
I have tried to use
var html = HtmlService.createHtmlOutput('Page')
SpreadsheetApp.getUi()
.showSidebar(html);
this displayed a sidebar and the actual code of the Html file but didn't have the desired effect.

Related

Adding an html element directly into google sheets cell using google apps script

Is it possible to add an html element directly into google sheets cells using google apps script? I have a tasks list in my minitask.html that I would like to add into my google sheet. I have a large merged cell where I would like to add the element (B39:I71). I haven't been able to find a way to add it directly into my merged cell.
The best solution I have found that gets the task list somewhat on to my sheet is by adding a sidebar of the element.
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Tasks')
.addItem('Mini Tasks', 'showSidebar')
.addToUi();
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('minitask')
.setTitle('Mini Tasks');
SpreadsheetApp.getUi()
.showSidebar(html);
}

Keep Macro initiating drawing always on the screen

In my Google Sheets I have two drawings, each of which executes a macro. As I scroll through the sheet I would like the "drawing" to follow me so they always appear on the display so I can invoke them immediately. Is there a way to make these "macro initiating drawings" float so they are always on the screen?
At the moment, this is not possible. However, I would like to propose you two alternatives using Google Apps Script.
Creating a menu
You can create a menu in Google Docs, Sheets, Slides or Forms using Google Apps Script.
In order to do so, you must create an onOpen() function containing code for the creation of it. Each of the buttons can execute different scripts that you may choose.
If you would like to create a menu with two options (one for the first drawing, and one for the second one) you could use a code similar to the following:
function onOpen() {
var ui = SpreadsheetApp.getUi();
// Or DocumentApp or FormApp.
ui.createMenu('Custom menu')
.addItem('First item', 'yourFirstFunction')
.addItem('Second item', 'yourSecondFunction')
.addToUi();
}
Where yourFirstFunction and yourSecondFunction should be functions declared in your script. It would look like the following:
Creating a sidebar
Sidebars can display HTML content (including images) so they may be more akin to what you are trying to accomplish. In order to create them you will also need to use the onOpen() function to trigger its display:
function onOpen() {
var html = HtmlService.createHtmlOutputFromFile('Page')
.setTitle('My custom sidebar')
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showSidebar(html);
}
Along with the declaration of the two functions, yourFirstFunction() and yourSecondFunction().
You will also need to create your HTML file. You can create via File>New>HTML File, and for this example we will call it "Page". It will hold the following contents:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<img src="https://drive.google.com/uc?export=view&id=1eUiSE5jLHWQiOTQISbdsTxsOLgoOvxLM" width="250" onclick="google.script.run.yourFirstFunction()"/>
<img src="https://drive.google.com/uc?export=view&id=1pZCYQH1ZkxxL3Uvw8q9aHvp7cc7pWMAS" width="250" onclick="google.script.run.yourSecondFunction()"/>
</body>
</html>
As you can see, it holds two images, each of one calling their respective Google Apps Script functions. This would look like the following (of course you can use the images you please and customise the sidebar as much as you want using HTML5 and CSS3):
References
Custom Menus in G Suite
Custom sidebars

Passing and accessing URL variables in Google Sheet App

I am passing a URL variable to a Google App Script that opens a modal dialog. How do I get the html page script to access that variable value?
// show html page for user selected row
// var i = the user selected row from the previous HTML page
function myFunction2(i) {
var html = HtmlService.createHtmlOutputFromFile('index2').setWidth(800).setHeight(600);
//I know the value is being correctly delivered here because
//it is being dumped out at the bottom of the page with this code
row = ['RowPicked', i];//This is not html
html.append(row);//This appends more html to the outout so it needs to be properly formatted html not google apps script code.
SpreadsheetApp.getUi().showModalDialog(html, 'Update Selected Row');
}

Display Form in Sidebar

I am not sure if what I am trying to do is even possible.
I am trying to put a google form into the sidebar of a google doc.
Right now I have an apps script document plugin that opens the sidebar fine, and I am able to open the form using var form = FormApp.openById('form_id');
But I don't know how to get a html object or blob from a form element that I could use to embed the form in the sidebar.
I also can't use iframes as those are disallowed.
While you can display a google form in a sidebar in a spreadsheet/document (see sample code below), there is one significant gotcha with it: the form does not work, i.e. you can't submit the form. Not sure exactly why, but my guess it is due to the sandbox restrictions and/or caja sanitization.
I suggest you code your own form using HTML and HTML Service (or UI Service) and show that in a sidebar. If you need you form to save the responses to a spreadsheet, you can also do that rather easily. See this for more on info and code samples of using forms in HTML Service and this for using forms in UI Service. Your server-side script can open a spreadsheet and write form values to it, if that's what you need to do.
Sample code for an Add-on to show Google Form in a Sidebar in Google Sheet:
NOTE: The form does not actually work - it does not submit when shown in a sidebar!
function showFormInSidebar() {
var form = FormApp.openById('YOUR-FORM-ID-HERE');
var formContent = UrlFetchApp.fetch(form.getPublishedUrl()).getContentText();
var ui = HtmlService.createHtmlOutput(formContent).setTitle("Google Form in Sidebar Example");
SpreadsheetApp.getUi().showSidebar(ui);
};
function onOpen(e) {
// Add this add-on to Add-ons menu
SpreadsheetApp.getUi().createAddonMenu()
.addItem('Show form', 'showFormInSidebar')
.addToUi();
};

Can I add a hyperlink inside a message box of a Google Apps spreadsheet [duplicate]

This question already has answers here:
Google Apps Script to open a URL
(6 answers)
Closed 2 years ago.
Is there a way to add a hyperlink inside a message box of a Google Apps spreadsheet?
I have this code that displays a msgbox.
// The code below will display a message box
Browser.msgBox("Go to this site for help");
}
Is there a way to insert a hyperlink in that message box as well? Something like:
// The code below will display a message box
Browser.msgBox("Go to this site for help" & Help);
}
Google's UI service is deprecated as of Dec. 11, 2014. See here.
You should now use the HTML Service. The code to display a message with a link is below.
var htmlOutput = HtmlService
.createHtmlOutput('Go to this site for help!')
.setWidth(250) //optional
.setHeight(50); //optional
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Help Dialog Title');
It appears Google Sheets won't run scripts for anyone who opens a public spreadsheet (obviously for security). If you want to see a live version of the dialog, just copy the above code into function onOpen() {} in the script editor, save & refresh the spreadsheet. Otherwise, it looks like the image below.
If you have more HTML than a simple link, you can also create a dialog from an HTML file. In the script editor, select File > New > Html file and name it "index" (or whatever you want and change file name in code).
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
This is an example of a popup showing a link to an url
function showurl() {
var app = UiApp.createApplication().setHeight('60').setWidth('150');
app.setTitle("Anchor in a popup ;-)");
var panel = app.createPopupPanel()
var link = app.createAnchor('This is your link', 'https://sites.google.com/site/appsscriptexperiments/home');
panel.add(link);
app.add(panel);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
Sorry. Message boxes do not accept hyperlinks or tags. Plain text only.