Can Google Slide modalDialog HTML javascript run server-side code? Environment Apps Script

Question

https://developers.google.com/apps-script/guides/html/reference/run https://developers.google.com/apps-script/guides/html/communication Do not list slides. Alerts in my code show the javascript running but not the server side code.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>

... removed CSS for simplicity

    </style>

  </head>
  <body> 
    <div id="parent">
      <div id="child">
        <?!= nextQuestion ?>
        <p></p>     
        <input type="button" value="Okay!" id="subBut" />
        <input type="button" value="Not quite" onclick="google.script.host.close()" />
      </div>
    </div>   
    <script>

    // - - - - - - - -  LISTENERS - - - - - - - -
    document.getElementById("subBut").addEventListener("click", 
    function(event)      {
  alert("Begin submit addEventListener");
      goodJob();
      // event.preventDefault();    //stop form from submitting
    } );

      // - - - - - - - -  FUNCTIONS - - - - - - - -      
    function goodJob() {
  // alert("In goodJob ");
      google.script.host.close();
  // alert('Call flipDice' );
  
      google.script.run
        .withSuccessHandler( succeed )
        .withFailureHandler( fail )
        .flipDice(); 
  
  // alert("end goodJob ");
    }

    function succeed () {
      alert('Success from serverside flipDice');
    }
  
    function fail (err) {
      alert('Handler fail - err: ' + err 
        + ' received from serverside flipDice');
    }

    </script>
  </body>
</html>

The commented out alerts start and end goodJob and call flipDice prevented the dialog from even being displayed when they were commented out the dialog displayed.

I tried wrapping the call to the server in a try catch. This allows the dialog to display but the Okay! button could not close the dialog and therefore cause the call to the server. Of course the javascript involved 'not quite' could close the dialog.

Is something wrong with my call to server-side close. Neither the alert in the success nor the failure handlers displayed.

Console.log and alerts in flipDice did not display. This function takes a little time. I don't think it is a timing issue as the first line displays 'begin flipDice' did not display.

Can a slide call a server function?

The server side code runs fine when invoked from the menu. It includes console.log and alerts which are not displayed when it is called from the javascript in the html triggered by the button.

onOpen function with V8 turned off. The first line was commented out by the system when I turned V8 off in the run menu. Getting error "Missing ; before statement. (line 18, file "onOpen")"

//@NotOnlyCurrentDoc
function onOpen() {
  console.log('In onOpen' );

//  const diceObj = {
//    "1": "dice1", 
//    "2": "dice2", 
//    "3": "dice3", 
//    "4": "dice4", 
//    "5": "dice5", 
//    "6": "dice6",
//    "7": "dice7",   // lose_turn
//    "8": "dice8"    // blank cover 
//    };  
//  PropertiesService.getScriptProperties().setProperty(
//    'idDice', diceObj);
  
  let pres;
  let slideSet = [];
  try  {
    pres = SlidesApp.getActivePresentation();
    slideSet = pres.getSlides();
  }  catch (e)  {
    console.log('caught in onOpen e: ', e);
  }
 
  try  {
    SlidesApp.getUi()
      .createMenu( 'Ask ?')
      .addItem('Roll', 'flipDice')
      .addItem('BE1','BE1')
      .addItem('BE2','BE2')
      .addItem('BE3','BE3')
      .addItem('BE4','BE4')
      .addItem('Restack','rePositionDice')
      .addSeparator()
      .addSubMenu(SlidesApp.getUi().createMenu('Check Dice')
          .addItem('Check 1', 'checkDice1')
          .addItem('Check 2', 'checkDice2')
          .addItem('Check 3', 'checkDice3')
          .addItem('Check 4', 'checkDice4')
          .addItem('Check 5', 'checkDice5')
          .addItem('Check 6', 'checkDice6')
          .addItem('Check 7', 'checkDice7')
          .addItem('Check 8', 'checkDice8'))
      .addToUi(); 
  }  catch (e)  {
    console.log('caught in createMenu e: ', e);
  }
 
console.log('    after create menu');
  
  PropertiesService.getScriptProperties().setProperty(      /*  spreadsheet with the questions */
    'dataSsId', '1fmZCittj4ksstmhh8_t0O0csj8IDdwi9ohDDL5ZE7VA');
  const dataSsId = PropertiesService.getScriptProperties().getProperty('dataSsId');
//console.log('dataSsId: ', dataSsId);
  let ss;
  try  { 
    
    ss = SpreadsheetApp.openById(dataSsId);
    if (!ss) {
      console.log('Spreadsheet not found! '  + dataSsId );
      SlidesApp.getUi().alert('Spreadsheet not found!');
      return;
    }  else    {
      console.log('Spreadsheet found! '  + dataSsId );
    }
  }    catch(e)    {    
    console.log('    in catch spreadsheet openBYId: '  + dataSsId );
    SlidesApp.getUi().alert(e);
    return;
  }

  prepareQuestions(ss);
 
 // testing stuff
// const ckSsId = PropertiesService.getScriptProperties().getProperty('dataSsId');
// console.log('dataSsId after prepareQuestions: ', ckSsId);
 // any one time gameboard setup here

}

I think the use of the <button with type="submit" is rather unusual I'd make it <input type="button" since you don't actually have a <form> — Cooper
Try putting the google.script.host.close() in the withSuccessHandler() — Cooper
@Cooper Using <input type="button" value="Okay!" /> did not seem to make any difference. Putting the dialog close in the success meant it was not executed. — aNewb
For new readers I have another open issue with slides. The most recent tests are getting try/catch error caught in createMenu e: { [Exception: Cannot call SlidesApp.getUi() from this context.] name: 'Exception' } in the onOpen createMenu but the menu is displayed when the onOpen is run in the editor stackoverflow.com/questions/65615455/… — aNewb
Although I'm not sure whether this is your miscopy, I think that your this tag <input type="button" value="Okay!" /> has not ID of subBut. By this, when the button of Okay! is clicked, no action occurs. How about this? By the way, can I ask you about the relationship between your this question and the question in your previous comment? — Tanaike

aNewb aNewb · Accepted Answer · 2021-01-11T22:56:28

Found a missing quote in one of my alerts and now the server side script runs successfully. Thank you everyone. Sorry to be such aNewB

It still gets the auth error:

Exception: You do not have permission to call SpreadsheetApp.openById. Required permissions: https://www.googleapis.com/auth/spreadsheets

When opened from drive or refreshed even though the item is in the manifest. It works despite this error.

{
  "timeZone": "America/Mexico_City",
  "dependencies": {
    "enabledAdvancedServices": [{
      "userSymbol": "Slides",
      "serviceId": "slides",
      "version": "v1"
    }, {
      "userSymbol": "Drive",
      "serviceId": "drive",
      "version": "v2"
    }]
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/drive", 
    "https://www.googleapis.com/auth/spreadsheets", 
    "https://www.googleapis.com/auth/presentations", 
    "https://www.googleapis.com/auth/script.container.ui"],
  "runtimeVersion": "V8"
}

Final working HTML with call to server function flipDice

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style> 
  CSS removed for simplicity     
    </style>

  </head>
  <body> 
    <div id="parent">
      <div id="child">
        <?!= nextQuestion ?>
        <p></p>     
        <input type="button" value="Okay!" id="subBut" />
        <input type="button" value="Not quite" onclick="google.script.host.close()" />
      </div>
    </div>   
    <script>

    // - - - - - - - -  LISTENERS - - - - - - - -
    document.getElementById("subBut").addEventListener("click", 
    function(event)      {
//  alert("Begin submit addEventListener");
      goodJob();
      // event.preventDefault();    //stop form from submitting
    } );

      // - - - - - - - -  FUNCTIONS - - - - - - - -      
    function goodJob() {
  // alert("In goodJob ");
      // google.script.host.close();
  // alert('Call flipDice' );
      try  {
      google.script.run
        .withSuccessHandler( succeed )
        .withFailureHandler( fail )
        .flipDice(); 
      }   catch (e)    {
        alert(" google.script.run flipDice caught error: " + e);
      }
  
  // alert("end goodJob ");
    }

    function succeed () {
      
      google.script.host.close();
      alert('Success from serverside flipDice');
    }
  
    function fail (err) {
      alert('Handler fail - err: ' + err 
        + ' received from serverside flipDice');
    }

    </script>
  </body>
</html>

Can Google Slide modalDialog HTML javascript run server-side code? Environment Apps Script

1 Answers