Apps Script : write value in widget from server side-CodePudding

i would like to create a modal in Apps Script where the user needs to type a number in an input and, when he clicks in "search" button, the text in reference to this number is write in other input.

This is my script (server side) :

 function include(filename){
   return HtmlService.createHtmlOutputFromFile(filename).getContent();
 }

 function ajoutLigne() {
   const classeur = SpreadsheetApp.getActiveSpreadsheet();
   const feuille = classeur.getActiveSheet();
   var widget; 
   widget = HtmlService.createTemplateFromFile("widget.html").evaluate();
   ui.showModalDialog(widget, "Ajout d'une nouvelle ligne");
   widget.setWidth(600);
   widget.setHeight(600);
   }

 function getLibelle(codeArticle){
   const classeur = SpreadsheetApp.getActiveSpreadsheet();
   const feuille = classeur.getSheetByName("BASE ARTICLE");
   var lastRow = feuille.getLastRow();
   var tDonnees = feuille.getRange("B2:C" lastRow).getValues();
   var nbDonnees = tDonnees.filter(String).length;
   var result = "";
   for (let i = 0; i < nbDonnees; i   ){
     if(tDonnees[i][0] == codeArticle){
       result =  tDonnees[i][1];
     }
   }
   return result;
 }

This is my HTML's widget page :

<!DOCTYPE html>
 <html>
   <head>
     <base target="_top">    
     <?!= include('JavaScript'); ?>
   </head>
   <body>
     <p>Quel code article souhaitez-vous ajouter ?</p><input type="text" id="codeArticle"/>
      
     <input type="button"  value="Recherche" onclick="rechercheLibelle();">

     <p> Libellé correspondant : </p>
     <p id="libelle"></p>

   </body>
 </html>

And this is my JavaScript's HTML page :

<script>
   function rechercheLibelle(){
      var codeArticle = document.getElementById("codeArticle").value;
      var test = google.script.run.getLibelle(codeArticle);
      console.log(test);
      document.getElementById("libelle").innerHTML = test;    
   }
</script>

When i launch in other function getLibelle with a correct value, it's work perfectly. But when i launch rechercheLibelle in the Javascript's HMTL page, i've "undefined" in value for test's variable result.

Anyone can help me with that please. I think the problem comes to "google.script.run.getLibelle(codeArticle)" but i don't know how to translate the result from server side to my widget's html page. Thank you for advance to your help

CodePudding user response：

In your script, how about the following modification?

From:

var test = google.script.run.getLibelle(codeArticle);
console.log(test);
document.getElementById("libelle").innerHTML = test;

To:

google.script.run.withSuccessHandler(test => {
  console.log(test);
  document.getElementById("libelle").innerHTML = test;
}).getLibelle(codeArticle);

When the script of getLibelle at Google Apps Script is finished, the returned value can be retrieved by withSuccessHandler at Javascript.

Note:

When I saw your Google Apps Script, getLibelle might be able to be modified for reducing the process cost. So, how about the following modification using TextFinder?

  function getLibelle(codeArticle) {
    const classeur = SpreadsheetApp.getActiveSpreadsheet();
    const feuille = classeur.getSheetByName("BASE ARTICLE");
    const lastRow = feuille.getLastRow();
    const tDonnees = feuille.getRange("B2:B"   lastRow).createTextFinder(codeArticle).findNext();
    return tDonnees ? tDonnees.offset(0, 1).getValue() : "Value was not found.";
  }

Reference:

withSuccessHandler(function)