Google web app - Generate another html from default html file and carry value from default html to new html

问题

I need to ask the user to select a value and after that I want to generate a new html page which will display the selected value.

Step1: the app generates a list of values and the user need to pick a value (I know how to do it and I used a simplified version for this test)

Step2: Once the user click the value, a new html file is generated and the selected value will appear as a text (I do not know how to do this)

The default html file is the following (f.html):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p style="text-align: center;">Test - Step 1</p>
<p style="text-align: center;">&nbsp;</p>

<p style="text-align: center;"><select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;">
<option selected="selected" value="">email</option>
</select></p>

<script>

function listS() {
  const selectElem = document.getElementById('sel1');
    const index = selectElem.selectedIndex;
  if (index > -1) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
  }  
}



document.getElementById("sel1").addEventListener("click",listS);

function yourCallBack() {

}
</script>


  </body>
</html>

The js file is:

function doGet() {

  var output = HtmlService.createHtmlOutputFromFile('f');
  return output;

}

function yourServerSideFunc(body) {
  var value = body["value"];
 var output = HtmlService.createHtmlOutputFromFile('f2');
  return output;
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

The new html file (f2) is:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p id="test"style="text-align: center;">Your value is</p>
<p style="text-align: center;">&nbsp;</p>
  </body>
</html>

Once I am able to generate the new html, I need to change the text to: "Your value is: "+value. However I cannot even generate the f2.html. How can I do that?

回答1:

A few points:

You needs a value, otherwise value is empty.
Your yourServerSideFunc(body) has two return values, obviously the second one is not being executed.
If you want to redirect the user to a different page, do it by redirecting. But if you want to update content in the base html then you can use the style attribute of HTML element to hide or show elements.
You can also implement some conditionals into your doGet(e) and render a different content depending on a parameter or set thereof. This will yield a different HTML at the same URL.

For example:

1- User visits your web app, so doGet() is executed.

2- User selects an option from the dropdown, so browser listens for click event and executes listS().

3- listS() passes the user selected value to yourServerSideFunc which returns HTML content to the callback showDiv.

4- showDiv is executed and the HTML content is updated.

Code.gs

function doGet() {
  var output = HtmlService.createHtmlOutputFromFile('f');
  return output;
}

function yourServerSideFunc(body) {
  console.log(body);
  var value = body["value"];
  var output = HtmlService.createTemplateFromFile('f2');
  output.value = value;
  return output.evaluate().getContent();
}

f.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
</head>

<body>
    <p style="text-align: center;">Test - Step 1</p>
    <p style="text-align: center;">&nbsp;</p>
    <select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;">
        <option selected="selected" value="email">email</option>
    </select>
    <div id="resultDiv" style="display: None;"></div>
    <script>
function listS() {
    const selectElem = document.getElementById('sel1');
    const index = selectElem.selectedIndex;
    if (index > -1) {
        const e = document.getElementById("sel1");
        const value = e.options[index].value;
        const body = {
            index: index,
            value: value
        };
        google.script.run.withSuccessHandler(showDiv).yourServerSideFunc(body);
    }
}

function showDiv(value) {
    var resultDiv = document.getElementById("resultDiv");
    resultDiv.innerHTML = value;
    resultDiv.style.display = "Block";
}
document.getElementById("sel1").addEventListener("click", listS);
    </script>
</body>

</html>

f2.html

<p id="test"style="text-align: center;">Your value is</p>
<p style="text-align: center;"><?= value ?></p>