Сценарии Google Apps: функция запускается дважды из формы .showModalDialog - PullRequest
Новая
       5

Сценарии Google Apps: функция запускается дважды из формы .showModalDialog

2 голосов
/ 11 марта 2020

Это мой первый пост, и я искал несколько дней и не могу найти решение этой проблемы.

У меня есть пользовательское меню в листах, которое вызывает .showModalDialog html. Пользователь заполняет это информацией и нажимает кнопку «Отправить». Это запускает функцию в серверной части, которая создает папки / файлы и добавляет пользовательские данные на различные листы и т. Д. c.

Все это работает У меня есть Ui.alert, который я использую для проверки правильности введенных данных, и по какой-то причине функция запускается дважды, и в результате UI.alert снова появляется. У меня есть безопасный сейф, который проверяет, существует ли одно из полей, чтобы оно не записывалось снова, но всплывающее окно - очень плохой пользовательский опыт.

Любая помощь будет принята с благодарностью. Функция для создания пользовательского меню: 

function onOpen() { 
  SpreadsheetApp.getUi() 
      .createMenu('TOA - Menu')
      .addItem('Add New Account', 'addAccount')
      .addItem('Update Brand', 'updateBrand')
      .addItem('Go Live', 'goLive')
      .addToUi();
}

Функция для вызова формы: 

function addAccount() {
  const html = HtmlService.createHtmlOutputFromFile('newAccount')
      .setTitle('Add New Account')
      .setWidth(1000)
      .setHeight(800);;
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Add New Account');
}

Код для формы: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      #itemDisplay {
        display: none;
      }
      #modDisplay {
        display: none;
      }
      #priceDisplay {
        display: none;
      }
      #businessTypeDisplay {
        display: none;
      }
    </style>

  </head>
  <body>
    <h1>
        Add New Account
    </h1>

  <form id="myForm" onsubmit="handleNewAccountFormSubmit(this);"> 
    <div>
    <label for="newBrand">Brand:</label>
    <input name="newBrand" type="text" placeholder="Brand Name" required>
    </div>

    <div>
    <p>Location</p>
    <label for="country">Country:</label>
    <select name="country" id="" onchange="" required>
      <option value="" disabled selected>Select Country</option> 
      <option value="US">US</option>     
    </select>

    <label for="state">State/Province:</label>
    <input name="state" type="text" placeholder="State or province" required>

    <label for="city">City:</label>
    <input name="city" type="text" placeholder="City" required>


    <div>
    <label for="businessType">Business Type:</label>
    <select name="businessType" id="businessTypeSelect" onchange="businessOtherDisplay(this.value);" required>
      <option value="" disabled selected>Select Request Reason</option> 
      <option value="americanDiner">American Diner</option>
      <option value="pizzaParlor">Pizza Parlor</option>
      <option value="coffeeShop">Coffee Shop</option>
      <option value="candyShop">Candy Store</option>
      <option value="iceCreamParlor">Ice Cream Parlor</option>
      <option value="burgerShop">Burger Shop</option>
      <option value="otherNon_AmericanDiner">Other non-American Diner (Foreign servings)</option>
      <option value="other">Other (not listed above)</option>
    </select>
    </div>

    <div id="businessTypeDisplay">
    <label for="businessTypeOther">Business Type Other:</label>
    <input name="businessTypeOther" type="text" placeholder="Business type if not listed above">
    </div>

    <div>
    <label for="integration">Integration:</label>
    <select name="integration" required>
      <option value="" disabled selected>Select Request Reason</option> 
      <option value="square">Square</option>
      <option value="clover">Clover</option>
      <option value="cloverPilot">Clover Pilot</option>
      <option value="stripe">Stripe</option>
      <option value="gPay">GPAY</option>
      <option value="others" >Others</option>
    </select>
    </div>

    <label for="menuSource">File Attachment/Source:</label>
    <input name="menuSource" type="text" placeholder="Path to menu" required url>

    <div>
    <p>Do you need an item hidden/disabled?</p>
    <label for="yes">Yes</label>
    <input name="disableItemOption" type="radio" value="yes" onclick="showItem()">
    <label for="no">No</label>
    <input name="disableItemOption" type="radio" value="no" checked onclick="hideItem()">
    </div>

    <div id="itemDisplay">
    <label for="itemDisable">Which item(s) should be disabled?</label>
    <textarea id="disabledItem" name="itemDisable" cols="40" rows="5"></textarea>
    </div>

    <div>
    <p>Do you need a modifier hidden/disabled?</p>
    <label for="yes">Yes</label>
    <input name="disableModOption" type="radio" value="yes" onclick="showMod()">
    <label for="no">No</label>
    <input name="disableModOption" type="radio" value="no" checked onclick="hideMod()">
    </div> 

    <div id="modDisplay">
    <label for="modDisable">Which modifier(s) should be disbaled?</label> 
    <textarea id="disabledMod" name="modDisable" cols="40" rows="5"></textarea>
    </div>   

    <div>
    <p>Do you need to update a price?</p>
    <label for="yes">Yes</label>
    <input name="updatePrice" type="radio" value="yes" onclick="showPrice()">
    <label for="no">No</label>
    <input name="updatePrice" type="radio" value="no" checked onclick="hidePrice()">
    </div>

    <div id="priceDisplay">
    <label for="priceUpdate">Which item/modifier needs a price update?</label>
    <textarea id="updatedPrice" name="priceUpdate" cols="40" rows="5" priceUpdate></textarea>
    </div>  

    <div>
    <label for="otherUpdates">Any other information needed on the menu?</label>  
    <input name="otherUpdates" type="text" placeholder="List other instructions here">
    </div>

    <div>
    <label for="specialInstructions">Are there special instructions/notes for this brand?</label>  
    <input name="specialInstructions" type="text" placeholder="List special instructions here">
    </div>

    <input id="submitButton" type="submit" value="Submit">
    <input type="button" value="Cancel" onclick="google.script.host.close()">
    </div>
  </form>  
  <script>

      function handleNewAccountFormSubmit(formObject) {
        document.getElementById('submitButton').disabled=true;
        google.script.run.withSuccessHandler().processNewAccountForm(formObject);        
      }

      function disableSubmit() {
       document.getElementById('submitButton').disabled=true;
       document.getElementById('submitButton').value='Sending...';
      }

      function showItem(){
        document.getElementById('itemDisplay').style.display ='block';         
        document.getElementById('disabledItem').required = true;         
      };
      function hideItem(){
        document.getElementById('itemDisplay').style.display = 'none';
        document.getElementById('disabledItem').required = false; 
      };
      function showMod(){
        document.getElementById('modDisplay').style.display ='block';
        document.getElementById('disabledMod').required = true; 
      };
      function hideMod(){
        document.getElementById('modDisplay').style.display = 'none';
        document.getElementById('disabledMod').required = false; 
      };

       function showPrice(){
        document.getElementById('priceDisplay').style.display ='block';
        document.getElementById('updatedPrice').required = true; 
      };
      function hidePrice(){
        document.getElementById('priceDisplay').style.display = 'none';
        document.getElementById('updatedPrice').required = false; 
      };

      function businessOtherDisplay(value) {

       if(value === "other") {
          document.getElementById('businessTypeDisplay').style.display = 'block';
        } else {
        document.getElementById('businessTypeDisplay').style.display = 'none';
        };
      };

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

И код для обработки logi c

function processNewAccountForm(formObject) {  

  const ui = SpreadsheetApp.getUi();
  const ass = SpreadsheetApp.getActiveSpreadsheet();
  const ss = ass.getActiveSheet();
  const timestamp = Utilities.formatDate(new Date(), "GMT+8", "MM/dd/yyyy HH:mm:ss");
  const userEmail = Session.getActiveUser().getEmail();
  const brandName = formObject.newBrand;

// Add alert to check data entered is correct
  const response = ui.alert('Please confirm the following information is correct:', 
                            '????? ????:  ' + formObject.newBrand + 
                            '\n???????:  ' + formObject.country +
                            '\n?????:  ' + formObject.state + 
                            '\n????:  ' + formObject.city +                       
                            '\n???????? ????:  ' + formObject.businessType +
                            '\n???????????:  ' + formObject.integration + 
                            '\n???? ??????:  ' + formObject.menuSource +
                            '\n?? ??? ???? ?? ???? ??????/?????????:  ' + formObject.disableItemOption +
                            '\n????? ????(?) ?????? ?? ?????????:  ' + formObject.itemDisable +
                            '\n?? ??? ???? ? ???????? ??????/?????????:  ' + formObject.disableModOption +  
                            '\n????? ????????? ?????? ?? ?????????:  ' + formObject.modDisable +  
                            '\n?? ??? ???? ?? ?????? ? ??????:  ' + formObject.updatePrice +  
                            '\n????? ????/???????? ????? ? ????? ???????:  ' + formObject.priceUpdate + 
                            '\n??? ????? ??????????? ?????? ?? ??? ?????: ' + formObject.otherUpdates + 
                            '\n??? ????? ??????? ????????????/????? ??? ???? ??????:  ' + formObject.specialInstructions                            
                            , ui.ButtonSet.YES_NO);

    if(response === ui.Button.YES) {
       var lock = LockService.getScriptLock();
  lock.waitLock(60000);
  try {   
    const brandColumn = ss.getRange('D:D');
    const brandValues = brandColumn.getValues();
    let i = 1;
    //      Check for exisiting brand name
    for(i=1; i < brandValues.length; i++) {
        if(brandValues[i].toString().toLowerCase().trim() == brandName.toString().toLowerCase().trim() && ss.getRange(i+1,5).getValue() == 'New Brand'){       
        ui.alert("Brand name already created");
        return;
        }       
    };  
//  Create folder and PDF with build instructions
      const parentFolder = DriveApp.getFolderById("RemovedfolderID");// how does this work with Shared drives? Create and move?
    //      const parentFolder = DriveApp.getFolderById("RemovedfolderID"); < ---- Team drive ID (notworking..)  My folder ->  RemovedfolderID

      const newFolder = parentFolder.createFolder(brandName);
      const docFile = newFolder.createFile(brandName+'.pdf', 
                            '????? ????:  ' + formObject.newBrand + 
                            '\n???????:  ' + formObject.country +
                            '\n?????:  ' + formObject.state + 
                            '\n????:  ' + formObject.city +                       
                            '\n???????? ????:  ' + formObject.businessType +
                            '\n???????????:  ' + formObject.integration + 
                            '\n???? ??????:  ' + formObject.menuSource +
                            '\n?? ??? ???? ?? ???? ??????/?????????:  ' + formObject.disableItemOption +
                            '\n????? ????(?) ?????? ?? ?????????:  ' + formObject.itemDisable +
                            '\n?? ??? ???? ? ???????? ??????/?????????:  ' + formObject.disableModOption +  
                            '\n????? ????????? ?????? ?? ?????????:  ' + formObject.modDisable +  
                            '\n?? ??? ???? ?? ?????? ? ??????:  ' + formObject.updatePrice +  
                            '\n????? ????/???????? ????? ? ????? ???????:  ' + formObject.priceUpdate + 
                            '\n??? ????? ??????????? ?????? ?? ??? ?????: ' + formObject.otherUpdates + 
                            '\n??? ????? ??????? ????????????/????? ??? ???? ??????:  ' + formObject.specialInstructions, 
                               MimeType.PDF);       
      const fileURL = docFile.getUrl();

  //  add header row to spreadsheet 
            //   Create Spreadsheet in Brand folder. Activity log.
      const name = brandName + " Activity Log";
      const id = newFolder.getId();
      const resource = {
        title: name,
        mimeType: MimeType.GOOGLE_SHEETS,
        parents: [{id: id}]      
      };

      const fileJson = Drive.Files.insert(resource);
      const fileId = fileJson.id;

      const lastRow = ss.getLastRow();

        const newEntry = [
         lastRow, 
         timestamp, 
         timestamp, 
         formObject.newBrand, 
         'New Brand', 
         formObject.businessType, 
         formObject.integration, 
         '=HYPERLINK("'+formObject.menuSource+'")', 
         userEmail,
         fileURL,
         ,
         ,
         ,
         ,
         formObject.city,
         formObject.state,
         formObject.country,
         fileId         

    ];   

    const newSheet = SpreadsheetApp.openById(fileId);    
    const sheetRange = newSheet.getSheetByName("Sheet1").getRange(1,1,1,18);  
    const headers = [
      ['?????',
       '????? ???????? ?????? ????',
       '???? ??',
       '????? ????',
       '??????? ??????',
       '???????? ????',
       '???????????',
       '???? ??????',
       '??????? ??:',
       '???? ????????????',
       '???????? ???',
       '???? ???',
       '?????????? ??????',
       '?? ???? ???? ??? ????',
       '????',
       '?????/????????',
       '???????',
       '???????? ???']
      ];

     sheetRange.setValues(headers);

//    Add data to last row in main tracker  
      ss.appendRow(newEntry);

//  Copy data to spreadsheet brand 
      const activitySheet = newSheet.getSheetByName("Sheet1") 
      activitySheet.appendRow(newEntry);
//    Flush changes before releasing lock
      SpreadsheetApp.flush();
  } catch(e) {
    ui.alert("System is Busy, Please try again in a moment.");
    return
    } finally {

    lock.releaseLock();

    return
  }

  } else {
//     action to take if info is incorrect? or No is clicked 
  };  

};

Я знаю, что множественные триггеры были известной проблемой, согласно сообщениям Купера и других здесь и здесь , но я не могу кажется, что они могут принять их для моего решения.

Заранее спасибо за любые идеи.

1 Ответ

1 голос
/ 12 марта 2020

Вот изменения, которые я бы сделал в диалоге: 

 <input id="btn1" type="button" value="Submit" onClick="handleNewAccountFormSubmit(this.parentNode);" />
    <input type="button" value="Cancel" onclick="google.script.host.close()">
    </div>
  </form>  
  <script>

      function handleNewAccountFormSubmit(formObject) {
        document.getElementById('btn1').disabled=true;
        google.script.run.processNewAccountForm(formObject);        
      }

Я не говорю, что ваш путь неверен. Вот так я и попытаюсь это сделать. Но на самом деле это довольно большой диалог, и вам просто придется покопаться и разобраться. Если бы я делал это, и у меня было много проблем, я бы, вероятно, начал с более простой версии и заставил бы ее работать, а затем медленно добавил бы больше функций.

Это на самом деле довольно трудное время, когда два кода записи находятся в середине перехода между двумя средами выполнения. Я только что заметил, что в некоторых областях в ES5 я потерял помощь в работе с контентом, но теперь они работают в ES6, поэтому с ними может быть сложно иметь дело. Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...