CODEWITHSUNDEEP
google-apps-scriptgoogle-sheets
Bohdan
Bohdan

Reputation: 11

Show pop-up message

I have this overlay (I hope it's an overlay :) pop-up message from the bootstrap framework.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Record Added!
  </div>
</div>

Can someone help me to show this message for 4 sec after the record was added?

this is my function that adds the record

function addNewRow(rowData) {
    const currentDate = Utilities.formatDate(new Date(), "GMT+2", "dd.MM.yy");
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const ws = ss.getSheetByName('Data');
ws.appendRow([currentDate,rowData.docnumber1,rowData.whereandhow1,rowData.comment1,rowData.incomeeur1,rowData.incomeusd1,rowData.incomeuah1,rowData.eurrate1,rowData.usdrate1,rowData.expenseeur1,rowData.expenseusd1,rowData.expenseuah1,rowData.expensetype1]);
return true;
}

also this is the link for my spreassheet https://docs.google.com/spreadsheets/d/1AWUoP-xfNYhn9AnztlaXkf2CivyuqALCekgQDfxFPk4/edit?usp=sharing

Upvotes: 0

Views: 1078

Answers (2)

TheWizEd
TheWizEd

Reputation: 8598

Here is an simple example of how to have a pop up appear with the sidebar active.

Code.gs

function onOpen(e) {
  var menu = SpreadsheetApp.getUi().createMenu("Test");
  menu.addItem("Show Test","showTest");
  menu.addToUi();
}

function showTest() {
  var html = HtmlService.createHtmlOutputFromFile("HTML_Sidebar");
  SpreadsheetApp.getUi().showSidebar(html);
}

function addNewRow(rowData) {
  // do your stuff
  let html =  HtmlService.createHtmlOutputFromFile("HTML_Popup");
  html.setHeight(10);
  html.setWidth(200);
  SpreadsheetApp.getUi().showModalDialog(html,"Record Added!");
}

HTML_Sidebar

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>Add row data</p>
    <input type="text" id="rowData">
    <input type="button" value="Add a row" onclick="addRowOnClick()">
    <script>
      function addRowOnClick() {
        try {
          let rowData = document.getElementById("rowData").value;
          google.script.run.addNewRow(rowData);
        }
        catch(err) {
          alert(err);
        }
      }
    </script>
  </body>
</html>

HTML_Popup

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
      ( function () {
          try {
            let time = new Date();
            time = time.valueOf();
            let stop = time+4000;  // add 4 seconds
            while( time < stop ) {
              time = new Date();
              time = time.valueOf();
            }
            google.script.host.close();
          }
          catch(err) {
            alert(err);
          }
        }
      )();
    </script>
  </body>
</html>

Results

enter image description here

Upvotes: 1

Cooper
Cooper

Reputation: 64040

Simple Popup

function mypopup(msg="My Message") {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(`<textarea>${msg}</textarea>`),"My Popup");
}

Upvotes: 2

Related Questions