Level 3: Drive Image Importer

Create interactive sidebar UI with HTML, CSS, and JavaScript

🎓 Advanced

⏱️ 5-6 minutes

Prerequisites

• Level 2 completed
• HTML/CSS basics
• JavaScript fundamentals
• Google Account
• Google Sheets

You'll Learn

✓ HTML service integration
✓ Frontend-backend communication
✓ Interactive UI design
✓ Error handling and user feedback

What You'll Build

Interactive sidebar with HTML/CSS/JavaScript
Image grid display with clickable thumbnails
Real-time status updates and loading indicators
Dual functionality: sheet insertion and sidebar preview

Key Learning Areas

HTML Service: Create custom HTML interfaces with HtmlService
Frontend-Backend Communication: Use google.script.run for function calls
UI/UX Design: Build responsive grids and interactive elements
Error Handling: Implement proper error states and user feedback
Async Operations: Handle loading states and success/failure callbacks

Technical Skills

HtmlService.createHtmlOutputFromFile()
google.script.run API
CSS Grid and responsive design
JavaScript async/await patterns
Error handling and user feedback systems

Implementation

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu("Image Importer").addItem("Import", "insertImages").addItem("Open Sidebar", "showSidebar").addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile("Sidebar").setTitle("Get Images");
  SpreadsheetApp.getUi().showSidebar(html);
}

function insertImages() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var configSheet = ss.getSheetByName("Config");
  var folderId = configSheet.getRange("A1").getValue();
  var activeSheet = ss.getActiveSheet();

  insertFilesIntoSheet(folderId, activeSheet);
}

function insertFilesIntoSheet(folderId, sheet) {
  var folder = DriveApp.getFolderById(folderId);
  var files = folder.getFiles();
  var rows = [["File Name", "URL", "Thumbnail"]];
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();
    var thumbnailUrl = "https://drive.google.com/thumbnail?id=" + fileId + "&sz=200";
    rows.push([file.getName().split('.')[0], thumbnailUrl, '=IMAGE("' + thumbnailUrl + '")']);
  }
  sheet.clear();
  sheet.getRange(1, 1, rows.length, rows[0].length).setValues(rows);
}


function getImageList() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var configSheet = ss.getSheetByName("Config");
  if (!configSheet) throw new Error("Config sheet not found.");
  
  var folderId = configSheet.getRange("A1").getValue();
  if (!folderId) throw new Error("No folder ID in Config!A1.");
  
  var folder = DriveApp.getFolderById(folderId);
  var files = folder.getFiles();
  var results = [];
  
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();
    results.push({
      name: file.getName().split('.')[0],
      url: "https://drive.google.com/file/d/" + fileId + "/view",
      thumb: "https://drive.google.com/thumbnail?id=" + fileId + "&sz=200"
    });
  }
  
  return results;
}

Ready for the next level?

Continue your learning journey with the next level of this tutorial.

Next Level: Completed