I am creating a web application using Google Apps Script. The objective is to have a course listing in a table. This table has three columns (one for the tool concerned, one for the type of file and one for the name of the file). This data is taken from a Sheets file. The data is correctly displayed in the web app.

However, I would like the last column to show the name of the file and, for it, to be a clickable link back to the course (preferably on a new page).

I don't know how to do this, I tried with setAttribute but it gives me an error.

Here is a part of the html code of the page:

    <div >
       <div >
       <table id="table" >
         <thead id="thead">
           <tr >
             <th scope="col"  id="libOutil">Outil</th>
             <th scope="col"  id="libTypeSupport">Type de support</th>
             <th scope="col"  id="libNomFichier">Nom du fichier</th>
           </tr>
         </thead>

         <!-- AFFICHAGE DES RÉSULTATS LORS D'UNE RECHERCHE -->
         <tbody id="searchResults">
         </tbody>
       </table>
     </div>
     </div>

     <!-- AFFICHAGE DES RÉSULTATS -->
     <template id="rowTemplate">
       <tr  id="tableResults">
         <td  id="resultOutil"></td>
         <td  id="resultTypeSupport"></td>
         <td  id="resultNomFichier"></td>
       </tr>
     </template>

Here is a part of the apps script code:

function getDataForSearch(outil1,outil2,outil3,outil4,outil5,outil6,outil7,outil8,outil9){
   const classeur = SpreadsheetApp.getActiveSpreadsheet();
   const feuille = classeur.getSheetByName('BDD Documentation');
   var tDonnees = [];
   var data = feuille.getRange("A2:E").getValues().filter(d=>d[0]!="");
   for (let i = 0; i < data.length; i   ){
     if(data[i][0]){
       if (data[i][1] == outil1 || data[i][1] == outil2 || data[i][1] == outil3 || 
           data[i][1] == outil4 || data[i][1] == outil5 || data[i][1] == outil6 || 
           data[i][1] == outil7 || data[i][1] == outil8 || data[i][1] == outil9){
         tDonnees.push([data[i][1],data[i][2],data[i][3]]);
       }
     }
   }
   return tDonnees;  
 }

And here is a part of the JavaScript code:

  // Fonction permettant de récupérer les documents 
   function setDataForSearch(){
     loadingStart();
     google.script.run.withSuccessHandler(function(dataReturned){
       data = dataReturned.slice();
       search();
       loadingEnd();
     }).getDataForSearch("Sheets","Docs","Gmail","Drive","Forms","Slides","Contacts","Agenda","Slides");
   }

   // Fonction permettant d'afficher les résultats en fonction du contenu ou non de la barre de recherche
   function search(){
     var searchInput = document.getElementById("searchInput").value.toString().toLowerCase().trim();
     var searchWords = searchInput.split(/\s /);
     var searchColumns = [0,1,2,3];
     var resultsArray = searchInput === "" ? data : data.filter(function(r){
       return searchWords.every(function(word){
         return searchColumns.some(function(colIndex){
           return r[colIndex].toString().toLowerCase().indexOf(word) !== -1;
         });
       });
     });
     if(resultsArray.length>1){
       var recordCount = searchInput === "" ? "" : "Nombre de documents : "   resultsArray.length;
     } else {
       var recordCount = searchInput === "" ? "" : "Nombre de document : "   resultsArray.length;
     }
     document.getElementById("searchCounter").textContent = recordCount;
     var searchResultsBox = document.getElementById("searchResults");
     var templateBox = document.getElementById("rowTemplate");
     var template = templateBox.content;
     searchResultsBox.innerHTML = "";
     resultsArray.forEach(function(r){
       var tr = template.cloneNode(true);
       var outil = tr.querySelector(".classOutil");
       var typeSupport = tr.querySelector(".classTypeSupport");
       var nomFichier = tr.querySelector(".classNomFichier");
       outil.textContent = r[0];
       typeSupport.textContent = r[1];
       nomFichier.textContent = r[2];
       
       // nomFichier.textContent = document.createElement("a");
       // nomFichier.setAttribute = ("href", r[3]);
       // var linkText = document.createTextNode(r[2]);
       // nomFichier.appendChild(linkText);

       searchResultsBox.appendChild(tr);
     });
   }

I have commented on the part of the search() function that does not work and is blocking me.

Here is the link to the Sheets file if you want to look for yourself.

Thank you in advance for your help.

CodePudding user response：

I suggest you to add the file's URL in your source spreadsheet.

Then, you could modify your .gs like this :

     //data[i][4] : url of the file
     tDonnees.push([ data[i][1], data[i][2], data[i][3], data[i][4] ]);

(It's possible to improve even better this part, if you have all files in the same directory, search by name, and get url)

     <!-- AFFICHAGE DES RÉSULTATS -->
     <template id="rowTemplate">
       <tr  id="tableResults">
         <td  id="resultOutil"></td>
         <td  id="resultTypeSupport"></td>
         <td  id="resultNomFichier"></td>
         <!-- new element -->
         <td ><a id="resultUrlFile" href="" target="_blank">LINK</a></td>
       </tr>
     </template>

And then change the href value with Javascript :

     resultsArray.forEach(function(r){
       var tr = template.cloneNode(true);
       var outil = tr.querySelector(".classOutil");
       var typeSupport = tr.querySelector(".classTypeSupport");
       var nomFichier = tr.querySelector(".classNomFichier");
       outil.textContent = r[0];
       typeSupport.textContent = r[1];
       nomFichier.textContent = r[2];

       //new lines : 
       var UrlFile= tr.querySelector(".classUrl > a");
       UrlFile.href = r[3];

       searchResultsBox.appendChild(tr);
     });