invitation india
UnexpectedWeb
Connect

Popular Technology Blog where you'll find some interesting things around the web, that you never knew existed.

link Link copied

Create custom dialog box or Html Popup in google app scripts

Share on: link Link copied


Google App Script allow HTML Service to Create web pages (HTML Interface) that can interact with server-side Apps Script functions. So yoy can create custom user interfaces in Google Docs, Sheets, and Forms. 

1. Create HTML files
 
To add an HTML file to your Apps Script project, open the Script Editor and choose File > New > Html File.

2. Create HTML template/Interface

Learn More :


CODE.GS (add Google Script function)

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Htmlfilename')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'My custom dialog');
}
Htmlfilename.html (add Google Script function)
<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<div class="polaroid">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>




How To Call Google App Script Funtion with HTML Interface

Are you want to calling a function in the Google script from your custom HTML dialogbox or popup

Learn more: 

In Google Script:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}
function doSomething() {
  Logger.log('I was called!');
}

In Html File:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      google.script.run.doSomething();
    </script>
  </head>
</html>




No comments:

Powered by Blogger.