This question is a follow-on question to: Can one create an Interactive web app with GAS?
I am writing a script that should do the following:
- Ask the user for their user number
- Ask the user for a row number from a spreadsheet (if they know it) and some additional info.
- If they don't know the row, get the row for them and display it.
- Ask them for the additional info.
This obviously requires an if/else statement. I just don't know how to form it.
I have attempted to put the code on the client and server side and neither works. I have also realized that some JS seems to run on the client side and some does not Accordingly, I have researched client side JS, in general, but not found specific rules for what works and doesn't.
html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<center>
Enter your User ID below. If you are re-using a row in your Catalog Spreadsheet (meaning you know the row number),<br>
enter it below in the "Song ID" field, enter the Song Title, and then click the "Continue" button. Else, enter your<br>
User ID only and click the "Continue" button. We will find the next avalable empty row at the end of your Catalog<br>
Spreadsheet and display its value to you. Then you may enter it and your Song Title. After you do, click the<br>
"Continue" button to create the lyric sheet and add the new song to your Catalog Spreadsheet.<br><br>
Note: We will automatically add your name to the lyric sheet as the songwriter. Add additional writers manually<br>
on the lyric sheet.<br><br>
<div>
<input id="user" type="text" placeholder="User ID"><br><br>
<div id="results"></div>
</div>
<input id="song" type="text" placeholder="Song ID"><br><br>
<input id="title" type="text" placeholder="Song Title"><br><br>
<input type="button" value="Continue" onclick="saveUserInput()"><br><br>
</center>
<script>
function saveUserInput() {
var userId = document.getElementById('userId').value;
var songId = document.getElementById('userId').value;
if(songId != ""){
window.saveUserInput = function() {
var userId = document.getElementById('userId').value;
var songId = document.getElementById('songId').value;
var songTitle = document.getElementById('idNewSongTitle').value;
console.log('songTitle: ' + songTitle)
google.script.run
.withSuccessHandler(openPrompt)
.getSongId({userId:userId, songId:songId, songTitle:songTitle})
}
}
else {
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('results').innerHTML=hl;
})
.getSongId({userId:userId})
}
function openPrompt(results){
window.open(results.url, '_blank').focus();
}
}
</script>
</body>
</html>
gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getSongId(uObj) {
var userId = uObj.userId;
var songId = uObj.songId;
var songTitle = uObj.songTitle;
if(songId !=""){
Code not included to keep this brief, but it has been tested in other applications of this project and works and what it does is: if the user has entered a Song ID, this code creates the new lyric sheet and adds the new song name to the Catalog SS.
}
else{
This code does this:
return ('The next available row for the new song is '+songId);
}
}
When I run what I have the Execution Transcript output is:
- [19-05-29 07:54:16:951 EDT] Starting execution
- [19-05-29 07:54:16:959 EDT] HtmlService.createHtmlOutputFromFile([Index]) [0 seconds]
- [19-05-29 07:54:16:961 EDT] HtmlOutput.getContent() [0 seconds]
- [19-05-29 07:54:16:961 EDT] HtmlOutput.getTitle() [0 seconds]
- [19-05-29 07:54:16:962 EDT] Execution succeeded [0.003 seconds total runtime]
