I am trying to convert an Excel UserForm into Google Sheets where the user can create, update or delete entries in existing sheet based on the input form values. I started with selecting a value and display the editable version of it on a textbox. I tried figuring out what is wrong with the value I pass, it is just always displaying the last value and seems not to loop through.
In this example I wanted to fill the form with details from ID 3.
Code.gs
function onOpen(){
var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showModalDialog(html,'Form');
}
function getTextList(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheetText = ss.getSheetByName('Text');
var sheetTextLastRow = sheetText.getLastRow();
var sheetTextRange = sheetText.getRange("B2:B" + sheetTextLastRow).getValues();
return sheetTextRange;
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<select id="selectText" size="5">
</select>
<input type="text" id="newText" placeholder="New Text Replacement">
<select id="textCategory" placeholder="Category">
</select>
<select id="textLanguage" placeholder="Language">
</select>
<textarea id="textDesc" rows="10" cols="60" placeholder="Description">
</textarea>
</body>
<script>
function onSuccess(textValues) {
var select = document.getElementById("selectText");
var textOptions = textValues;
for(var i = 0; i < textOptions.length; i++) {
var textOpt = textOptions[i];
var textElement = document.createElement("option");
textElement.textContent = textOpt;
textElement.value = textOpt;
select.appendChild(textElement);
textElement.onclick = function textClick(textDesc){
var selectDesc = document.getElementById("newText");
selectDesc.value = textElement.value;
};
}
}
google.script.run.withSuccessHandler(onSuccess)
.getTextList();
</script>
</html>
selectDesc.value = textDesc.target.value;