2

I am trying to create a script that would get the URL of an image from the active cell, open up a dialog box and display that image. Through lots of googling and trials and errors I have come up with the code below that displays the image in the dialog box when the user clicks "Read Cell B2" button. Please see the spreadsheet in this link.

Question: How to avoid the "Read Cell B2 button" so that the image would automatically be loaded when the dialog box opens?

IndexQ.html:

<!DOCTYPE html>
<html>
  <head> 
    <base target="_top">
  </head>
  <body>
    <script>
      function onSuccess(B2Value) {
      //document.getElementById('output').innerHTML = B2Value;
      document.getElementById('img2').src = B2Value;
      }
    </script>
<div>
    <input type="button" value="Read Cell B2" 
    onclick="google.script.run.withSuccessHandler(onSuccess).returnCellValue('B2')" />
    <br /> 
      Cell B2 contains value: <div id="output"></div> 
    <br />
    <img id="img2" src="" alt="Second Image" height="300">
    <input type="button" value="Close Sidebar" onclick="google.script.host.close()" /></div>
  </body>
</html>

And Code.gs:

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu('Sidebar').addItem('OpenDialog', 'openDialog').addItem('OpenSidebar', 'openSidebar').addToUi()
}

function returnCellValue(cell) {
 return SpreadsheetApp.getActiveSheet().getRange(cell).getValue();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('IndexQ').setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(500);
  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}
Improve this question

2 Answers 2

Reset to default
2

You can either use templated HTML with a scriptlet:

<img id="img2" src="<?!= returnCellValue('B2') ?>" alt="Second Image" height="300">

Force-printing scriptlets

You'll need to modify the code that opens the dialog:

function openDialog() {
  var html = HtmlService.createTemplateFromFile('IndexQ')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(500);

  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}

Note the createTemplateFromFile() and evaluate() methods.

or use an onload function that runs when the dialog is opened:

  <script>
    console.log('it ran!');

    window.onload = function() {//Runs after dialog is loaded
      google.script.run.withSuccessHandler(onSuccess).returnCellValue('B2');

    };
  </script>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is an awesome answer! Thank you a lot! The first approach works perfect! I tried to learn/understand the onload part but couldn't get that approach to work. What I tried was I put the window.onload code in openDialogWorks() - did not work, and then I put it in <body> script tag - did not work. Where should I put it?
You can mark this as the correct answer by checking the big green check mark. Thanks for letting me know that it worked.
Sandy, could you please explain me how to run the "window.onload" part? I experimented by putting it in one or another file, but it did not work. If I would know how to run it, then maybe I might be able to run this code as well: window.top.document.getElementsByClassName("script-application-sidebar")[0].styl‌​e.width='300px' "300px"
I updated the answer to show the onload in a script tag. Put that all the way to the end, but before the last </html> tag. Put a console.log('it ran!'); statement inside of the window.onload = function() {. I'm guessing that the issue you are having is handling the return back from the server with the onSuccess() function. Put a console.log('it ran!'); in your success function also. First thing to know, is what is running and what isn't. I don't see anything wrong with the code.
1

  1. The onload solution is using window class. When I type it in the google scripts window followed by a dot, I don't get the child class pop up options so I wouldn't know that I can enter "onload". How do I know that the window.online code will work or how can I know that it is even there?

  2. Would it be possible to execute this code via window.onload: window.top.document.getElementsByClassName("script-application-sidebar")[0].styl‌​e.width='300px' "300px" ? The spreadsheet that I have shared has also OpenSidebar submenu which opens a sidebar. I dropped that approach because I couldn't make the sidebar wide enough to display the image. This script does the job if run from the console. So far I haven't been lucky with finding a solution, but now with this window.onload thing it might be possible?!

Improve this answer

2 Comments

There is no help context for the window object in the Apps Script code editor. The window object is part of what is called the DOM. It's not JavaScript. Because it is so tightly integrated with JavaScript, people often mistake it for JavaScript. The DOM (Document Object Model) is a "Web API", meaning that it provides a way to interact between JavaScript and the browser. jQuery is often used to make that "bridge" between JavaScript and the DOM. But you don't need jQuery to use DOM methods. You can use the DOM directly.
One good resource for the DOM is Mozilla. getElementById()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.