Omitting the fields with no value

Question

I need to publish exam result from a Google sheet. The search button shows the marks obtained perfectly if roll no is provided at the box but I need to omit the fields with no value like Subject 3, 5 etc. with their textbox from the html page

Here is the sheet I'm using and the code I'm using...

 function doGet(e) { return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } //Search for the id and return the array for that row function search(id) { var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/16IH3yKJjLwM9XA0c4_BN5MVQSKh8hV7gR6_kLLfe8to/edit#gid=0"); var sheet = ss.getSheetByName("Sheet1"); var values = sheet.getDataRange().getValues().filter(function(row) { return row[0] == id; }); return values[0]; }

 <.DOCTYPE html> <html> <head> <base target="_top"> <style>:hidden { display;none. } </style> </head> <body> <input type="text" id="txtName"/> <button id="show">SHOW</button> <h1>FMATS</h1> Name <input type="text" id="name"/><br> Roll <input type="text" id="roll"/><br> Subject 1 <input type="text" id="sub1"/><br> Subject 2 <input type="text" id="sub2"/><br> Subject 3 <input type="text" id="sub3"/><br> Subject 4 <input type="text" id="sub4"/><br> Subject 5 <input type="text" id="sub5"/><br> </body> <script> //When click on show button it will run search function window.onload = function(e){ document.getElementById('show'),addEventListener('click'; search). } //Get the value for txtName input and run search function in code.gs function search() { var txtName = document.getElementById('txtName');value. google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) });search(txtName). } //It will run when a success response comes from search function in code.gs and updates the input with the sheet info function fillInfo(values) { document.getElementById('name');value = values[1]. document.getElementById('roll');value = values[0]; for (var i=0.i<values;length-2;i++) { if (values[i+2]==null) { toggleElement("sub"+i). } else { document.getElementById("sub"+i);value = values[i+2]. } } //rest of the code here document.getElementById('name');value = values[1]. document.getElementById('roll');value = values[0]. document.getElementById('sub1');value = values[2]. document.getElementById('sub2');value = values[3]. document.getElementById('sub3');value = values[4]. document.getElementById('sub4');value = values[5]. document.getElementById('sub5');value = values[6]; } </script> </html>

I need to omit the Subject name and the text box with no value from the HTML page. And "Nothing Found" should be shown if a roll searched which is not in the table. It's not required but will be good if the Subject names come from sheet's row 1.

What should I do?

Answer 1

There are two ways to go about this:

Create your HTML on the server side (as @Cooper said)
Manipulate your HTML with JavaScript

To create your HTML on the server side you can use string and "write" the html automatically.

Then your functions will be something like this:

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(response) {
  document.getElementById("divid").innerHTML=html
});

If you absolutely want to manipulate the HTML on the client-side, you will use something like this:

function toggleElement(id) {
  var td = document.getElementById(id).parentElement;
  var tr = td.parentElement;
  tr.classList.toggle("hidden");
}

the usage is like so:

function fillInfo(values) {
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  for (var i=0;i<values.length-2;i++) {
    if (values[i+2]==null) {
      toggleElement("sub"+i);
    } else {
      document.getElementById("sub"+i).value = values[i+2];
    }
  }  
  //rest of the code here
}

and then you will have some css that does this:

.hidden {
  display:none;
}

Edit:

This is how you implement the first solution:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <input type="text" id="txtName"/>
  <button id="show">SHOW</button>
  <h1>FMATS</h1>
  <div id="dataDiv"></div>
  </body>
<script>
//When click on show button it will run search function
window.onload = function(e){ 
  document.getElementById('show')
    .addEventListener('click', search);
}

//Get the value for txtName input and run search function in code.gs
function search() {
  var txtName = document.getElementById('txtName').value;
  google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
  console.log(values);
  document.getElementById("dataDiv").innerHTML=values
}
</script>
</html>

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
       .setSandboxMode(HtmlService.SandboxMode.IFRAME)
       .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

//Search for the id and return the array for that row
function search(id) {
  var ss = SpreadsheetApp.openByUrl("SHEETS URL");
  var sheet = ss.getSheetByName("Sheet1");
  var values = sheet
  .getDataRange()
  .getValues()
  .filter(function(row) {
    return row[0] == id;
  })[0];
  var legends = sheet.getRange(1,1,1,sheet.getMaxColumns()).getValues()[0];
  return createHTML(legends, values);
}

function createHTML(legends, values) {
  Logger.log(legends);
  var htmlResult = "";
  for (var i=0; i<values.length; i++) {
    if (values[i]!=null && values[i]!=="") {
      htmlResult += '<div class="field">' + (legends[i]+"").replace("Sub", "Subject ") + '<input type="text" id="sub1" value="'+values[i]+'"></div>';
    }
  }
  return htmlResult;
}

Hope this helps!

Answer 2

Here's a simple example of a complete solution of your problem done mostly server side.

I like do it this way because I like to be able to use Utilities.formatString().

Server Functions: File: aq3.gs:

function search(sObj) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var hA=vA[0];
  var dObj={dA:[]};
  for(var i=1;i<vA.length;i++) {
    if(vA[i][0]==sObj.roll) {
      var row=vA[i];
      for(var j=0;j<hA.length;j++) {
        dObj[hA[j]]=row[j];
      }
      break;
    }
  }
  var html="<style>input{margin:2px 5px 0 2px}</style>";
  for(var i=0;i<row.length;i++) {
    if(dObj[hA[i]]) {
      html+=Utilities.formatString('<br /><input id="txt-%s" type="text" value="%s" /><label for="txt-%s">%s</label>',i,dObj[hA[i]],i,hA[i]);
    }
  }
  sObj['results']=html;
  return sObj;
}

Run the below function to get the dialog running. The enter the roll you wish to see in the search box and click the search button. You will get only the boxes that have data.

function launchExamResultsSearchDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq5');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Exam Results");
}

The html: File: aq5.html:

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    function search() {
      var text=$('#srchtext').val();
      google.script.run
      .withSuccessHandler(function(sObj) {
        document.getElementById("results").innerHTML=sObj.results;
      })
      .search({roll:text});
    }

    console.log("My Code");
  </script>
  </head>  
  <body>
    <input type="text" id="srchtext" /><input type="button" value="Search" onClick="search();" />
    <div id="results"></div>
  </body>
</html>

This is what the dialog looks like:

You can just keep changing the search roll number and the dialog will replace the data with the new data. You can control the subjects by changing the headers.