How to add options to an HTML Table using Apps Script?-CodePudding

I was wondering how I could add these options to an HTML table within Apps Script Editor.

Here's the script:

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* PROCESS FORM */
function processForm(formObject) {
  var result = "";
  if (formObject.searchtext) {//Execute if form passes search text
    result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 

function search(searchtext) {
  //const searchtext = '[email protected]'
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  var spreadsheetId = ss.getId();
  var dataRage = 'Approval Tracker!A2:J';
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];

  data.forEach(function (f) {
    if (f[9] == searchtext) {
      ar.push([f[3], f[4], f[5], f[6], f[2]]);
    }
  });
  return ar;
}

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>

  <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
  <script>
    //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i  ) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
              
           
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            //document.getElementById("search-form").reset();
          }
         
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>" 
                           "<thead style='white-space: nowrap'>" 
                             "<tr>"                                //Change table headings to match witht he Google Sheet
                              "<th scope='col'>Date Assigned</th>" 
                              "<th scope='col'>Item</th>" 
                              "<th scope='col'>Link To File</th>" 
                              "<th scope='col'>Notes</th>" 
                              "<th scope='col'>Approval Status</th>" 
                              "<td><select name='D1'>"  
                                                            "<option value='volvo'>Volvo</option>"  
                                                            "<option value='saab'>Saab</option>"  
                                                            "<option value='mercedes'>Mercedes</option>"  
                                                            "<option value='audi'>Audi</option>"  
                                                            "</select>" 
                              "</td>"  
                              "</tr>"  
                              "</thead>";
              for(var i=0; i<dataArray.length; i  ) {
                  result  = "<tr>";
                  for(var j=0; j<dataArray[i].length; j  ){
                      result  = "<td>" dataArray[i][j] "</td>";
                  }
                  result  = "</tr>";
              }
              result  = "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
  </script>
  <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->

</head>

<body>
  <div >
    <br>
    <div >
      <div >

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form"  onsubmit="handleFormSubmit(this)">
          <div >
            <label for="searchtext">Enter your email</label>
          </div>
          <div >
            <input type="text"  id="searchtext" name="searchtext" placeholder="Enter your email">
          </div>
          <button type="submit" >Search</button>
        </form>
        <!-- ## SEARCH FORM ~ END ------------------------------------------- -->

      </div>
    </div>
    <div >
      <div >

        <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
        <div id="search-results" >
          <!-- The Data Table is inserted here by JavaScript -->
        </div>
        <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->

      </div>
    </div>
  </div>
</body>

</html>

This is the file's link:

This is the Web App URL

It's now appending one koption list to the header.

Appreciate any help!

CodePudding user response：

From I've tried it above but the page is empty., if your are using your showing script, I think that your script is incomplete. So, please modify as follows and test it again.

From:

  "<option value='audi'>Audi</option>"  
  "</select></td>
"</tr>"  
  "</thead>";

To:

"<option value='audi'>Audi</option>"  
"</select></td></tr></thead>";