Label HTML service checkbox according to value returned from function

userAFjk1 0
Viewed 53

I have succeeded in starting the html service and getting the check box itself to display. What I am stuck on is getting text to display next to the text box as a label, and I want that label text to be the return of a function in the .gs file.

The function starting the html service

function startHtml(){
//set up
  //can not define globally or script crashes
  var ui = SpreadsheetApp.getUi();

  //start html for selection
    var whichDevice = HtmlService.createHtmlOutputFromFile('start_html')          
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    //main window title
    ui.showModalDialog(whichDevice, 'Setup Criteria');
}

The function returning something, a value of 1

function randomFunc () {
  return "1";
}

The html code. You can see 2 of my attempts to use a element to get the return of randomFunc() to display with the checkbox. I have been able to get simple text to display for the element, but I need to be function based.

<!DOCTYPE html>
<html>
  <head>    
    <input id="testing" type="checkbox" />
      <script>
        google.script.run.randomFunc();
      </script>
    
      <label for="testing">
        <script>
        google.script.run.randomFunc();
        </script>
      </label>
   </head>
</html>

image of the html service window

google-apps-script javascript html
2 Answers

When your showing script is modified, how about the following modification?

Modified script:

<input id="testing" type="checkbox" />
<label for="testing" id="label1"></label>
<script>
  google.script.run.withSuccessHandler(e => {
    document.getElementById("label1").innerText = e;
  }).randomFunc();
</script>
  • In this modification, when HTML is loaded, randomFunc() is run by google.script.run, and the returned value from randomFunc() is used with document.getElementById("label1").innerText = e.

Note:

  • As another approach, how about using HTML template as follows? Ref In this case, please modify as follows.

    • HTML

        <input id="testing" type="checkbox" />
  <label for="testing"><?= value ?></label>

    • Google Apps Script

        function startHtml() {
    var ui = SpreadsheetApp.getUi();
    var whichDevice = HtmlService.createTemplateFromFile('start_html');
    whichDevice.value = randomFunc();
    var html = whichDevice.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    ui.showModalDialog(html, 'Setup Criteria');
  }

  • About You can see 2 of my attempts to use a element to get the return of randomFunc() to display with the checkbox., I understood that you wanted to show the value from randomFunc() to label of the checkbox when the HTML is opened. If my understanding was not correct and you wanted to show the value when the checkbox is checked, how about the following modification? In this case, please modify your HTML as follows.

      <input id="testing" type="checkbox" onclick="main()" />
  <label for="testing" id="label1"></label>
  <script>
  function main() {
    google.script.run.withSuccessHandler(e => {
      document.getElementById("label1").innerText = e;
    }).randomFunc();
  }
  </script>
Tanaike0

Try this:

function startHtml() {
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService.createHtmlOutputFromFile('ah2').setWidth(400).setHeight(200);
  ui.showModelessDialog(html, 'Setup Criteria');
}
function getLabel() {
  return {label:'ChickenTown'};
}


    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
      </head>
      <body>
       <input id="testing" type="checkbox" /><label for="testing" id="boo" />
        <script>
          window.onload = () => {
            document.getElementById("testing").addEventListener("click",() => {
              google.script.run
              .withSuccessHandler((obj)=>{
                document.getElementById("boo").innerHTML = obj.label;
              })
              .getLabel();
            })
          }
        </script>
      </body>
    </html>

enter image description here

user30hu0
Related