Google 表格腳本 | 全局變量在 html 側邊欄/模態 window 后失去其價值

Question

大家好，我有一個團隊假期日歷。 用戶按下字母“v”來設置假期日期，假期日期存儲在外部工作表中（用於其他目的，所以我不能簡單地在同一個電子表格中擁有單獨的工作表）。

問題是，假期日期可以是“付費”或“銀行”（以后記入）。 我使用模態 Html window 詢問用戶兩者中的哪一個，假期是。 但是，我在打開 html 模態 window 之前設置的全局變量失去了它們的值。 我需要這些全局變量來存儲原始條目的行和列（因為用戶在鍵入“v”后單擊單元格會更改 getActiveCell() 的值。

應該發生什么：

1. 用戶輸入“v”
2. html window 彈出“這是哪種假期類型？銀行或付費？
3. 代碼將假期日期輸入到外部電子表格中。
4. 代碼將“付費”或“銀行”值輸入到外部電子表格中。

就上面的第 3 步而言，我可以將它轉到 go，但是，全局變量正在丟失它們的值，並且無法確定用戶最初單擊了哪個單元格。

步驟1

第2步

var selectedDateRangeRow;
var selectedDateRangeColumn;

function onEdit(e) {
  if (sheet.getRange("AH2").getValue() == true && sheet.getActiveCell().getValue() == "V") {
    selectedDateRangeRow = sheet.getActiveCell().getRow();
    selectedDateRangeColumn = sheet.getActiveCell().getColumn();
    ShowVacationMenu();
  }
}

function ShowVacationMenu() {
  var html = HtmlService.createHtmlOutputFromFile('VacationType').setTitle("New Vacation Date");
  SpreadsheetApp.getUi().showModalDialog(html, "Select Vacation Type");
}

function AddDateToOverTimeSheet(selectedVacationType) {
  Browser.msgBox(selectedDateRangeRow);     //This global value returns empty/null.
}

html 文件：

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<div class="container">

    <form action="#" name="vacation">
        <p>
            <input name="vacationType" type="radio" id="banked" value="Banked">
            <label for="banked">Banked</label>
        </p>
        <p>
            <input name="vacationType" type="radio" id="paid" value="Paid">
            <label for="paid">Paid</label>
        </p>
    </form>

    <p>
        <button id="submitBtn" class="btn waves-effect waves-light">Submit
  <i class="material-icons right">send</i>
</button>
    </p>
</div>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    // 1. Find and store the element we want to listen to events on.
var submitButton = document.getElementById("submitBtn");

// 2. Create script function to run.
var onButtonClick = function() {
    if(document.forms.vacation.vacationType.value == ""){
      M.toast({html: 'Please select an option'});
    }else{

      //Create Array to store selected details
      var data=[
        document.forms.vacation.vacationType.value
       // exampe-of-new-item (no semicolon needed)
      ];

    google.script.run.AddDateToOverTimeSheet(data);
    google.script.host.close();
    };
};

// 3. Add the event listener for the element and function
submitButton.addEventListener("click", onButtonClick);
</script>

更新：我現在使用“屬性服務”在 GAS 和 html 之間傳遞變量，如下所示：

function SelectVacationType(){

var userProperties = PropertiesService.getUserProperties();
userProperties.setProperty('CALENDAR_SHEET_ID', calendarSheetID);
userProperties.setProperty('PERSON_NAME', personName);
userProperties.setProperty('R', r);

  //Show Vacation Type Selector Window.
  ShowVacationMenu();

}


function ShowVacationMenu() {

var html = HtmlService.createHtmlOutputFromFile('VacationType').setTitle("New Vacation Date");
SpreadsheetApp.getUi().showModalDialog(html, "Select Vacation Type");
}



function ImportData(data) {
//Retrieve First letter of first array item in 'data'
var selectedVacationType = data[0][0];

var userProperties = PropertiesService.getUserProperties();
var calendarSheetID = userProperties.getProperty('CALENDAR_SHEET_ID');
var personName = userProperties.getProperty('PERSON_NAME');
var r = userProperties.getProperty('R');

//open EXTERNAL Calendar sheet and go to the current person's sheet.
var calendarSheet = SpreadsheetApp.openById(calendarSheetID).getSheetByName(personName);
calendarSheet.getRange(r, 7).setValue(selectedVacationType); //<- this doesn't seem to work.

}

Answer 1

全局變量丟失是因為google.script.run調用在不知道原始服務器端實例的 state 的新實例中執行服務器端腳本。

通常的解決方法是使用屬性服務在實例之間共享 state。