CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-slides
W.Lyman
W.Lyman

Reputation: 347

Issues adding value from custom modal in Google Script

I have a function here that is supposed to do the following:

  1. Invoke the dropdown html modal and pass what the user selects to a replace function which...
  2. finds the instance of "Document Classification: UNDEFINED" in the Google Presentation, and replaces it with "Document Classification: selectValue from the modal".

However when I log the selectValue, all it does is get "Selected value: undefined" and replaces "Document Classification: undefined". What is going on. 

function AddValuesFromModal(selectValue) {
  var documentId = SlidesApp.getActivePresentation().getId();
    var htmlDlg = HtmlService.createHtmlOutputFromFile("HTML_myHtml")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(200)
    .setHeight(150);

  var modal = SlidesApp.getUi();
  modal.showModalDialog(htmlDlg, "Document Classification");
  console.log("Getting document log...");
  var body2 = SlidesApp.openById(documentId);
  console.log("Got document!");
  console.log("Selected value: " + selectValue);
  console.log("Start setting value....");
  SlidesApp.getActivePresentation().replaceAllText("Document Classification: UNDEFINED", "Document Classification: " + selectValue, true);
  console.log("Value has been set!");
}
<form id="docType">
<select id="selectDocumentType" name="documentClass">
  <option value="PUBLIC">Public</option>
  <option value="INTERNAL">Internal</option>
  <option value="CONFIDENTIAL">Confidential</option>
  <option value="SECRET">Secret</option>
</select>

<hr/>
 <input type="button" onClick="formSubmit();" value="Submit" />
</form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>a
    function formSubmit(){
    Submit();
    closeIt();
    }
   
    
    function Submit() {
    var selectedValue = $('#selectDocumentType').val();
    console.log(selectedValue);
      google.script.run
        .withSuccessHandler(closeIt)
        .AddValuesFromModal(selectedValue);
      };
      
    function closeIt(){
      google.script.host.close();
    };
    </script>

Upvotes: 3

Views: 82

Answers (1)

chuckx
chuckx

Reputation: 6877

The 2 steps you've described need to be implemented as separate functions.

I put together a small example, originally based on your example, but cleaned up a bit.

The desired program flow is:

  1. On the server side, call the showDialog() function to display the dialog (via a menu or otherwise)
  2. On the client side, call the updateDocumentClassification() function via google.script.run and pass the form element for processing server side (which will be converted to an object)

Here's the example:

Code.gs

function showDialog() {
  var dialog = HtmlService.createHtmlOutputFromFile('dialog')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(150);
  SlidesApp.getUi()
      .showModalDialog(dialog, 'Document Classification');
}

function updateDocumentClassification(formObject) {
  var classification = formObject.documentClass;
  SlidesApp.getActivePresentation().replaceAllText(
      'Document Classification: UNDEFINED', 
      'Document Classification: ' + classification,
      true);
}

function onOpen() {
   SlidesApp.getUi()
       .createMenu('Replace Test')
       .addItem('Replace Text...', 'showModalDialog')
       .addToUi();
}

dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="docType" onSubmit="handleFormSubmit(this)">
      <select id="selectDocumentType" name="documentClass">
        <option value="PUBLIC">Public</option>
        <option value="INTERNAL">Internal</option>
        <option value="CONFIDENTIAL">Confidential</option>
        <option value="SECRET">Secret</option>
      </select>    
      <hr/>
      <input type="submit" value="Submit" />
    </form>
  </body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

function handleFormSubmit(formObject) {
  google.script.run
      .withSuccessHandler(closeDialog)
      .updateDocumentClassification(formObject);
  $('#formDocumentType :submit').attr('disabled', true);
}

function closeDialog(){
  console.log('Closing dialog...');
  google.script.host.close();
}

</script>

</html>

Upvotes: 3

Related Questions