Custom modal with dropdown in Apps Script-CodePudding

I would like to show in my modal a select with custom values for my options. I tried something like that but my html's modal doesn't interact with my script and i don't know how can i do that.

This is my script :

function addRow() {
   const classeur = SpreadsheetApp.getActiveSpreadsheet();
   const feuille = classeur.getActiveSheet();
   const ui = SpreadsheetApp.getUi();
   var widget;
   widget = HtmlService.createHtmlOutputFromFile("widget.html");
   ui.showModalDialog(widget, "Add new Row");
   widget.setWidth(600);
   widget.setHeight(600);  
   }


 function getCDC(){
   const classeur = SpreadsheetApp.getActiveSpreadsheet();
   const feuille = classeur.getSheetByName("BDD");
   var services = feuille.getRange("A2:A").getValues().filter(d =>d[0] !== "");
   return services.map(d => "<option>"   d[0]   "</option>").join("")
 }

And this is my html's page who generate my modal :

<!DOCTYPE html>
 <html>
   <head>
     <base target="_top">
   </head>
   <body>
     <p>Input : <input type="text" id="codeArticle"></p>

     <p>Custom Select :
       <select id="service" name="service"  required>
         <option disabled selected>Choose ...</option>
         <?!=getCDC()?>
       </select>
     </p>

     <input type="button"  value="SUBMIT">
     <input type="button"  value="CLOSE" onclick="google.script.host.close();">

   </body>
 </html>

If i launch my fonction getCDC(), i obtain what i want (execution log of this function).

I don't know where is my problem. This is the link of my Sheets if you want to show by yourself. Thank you for advance to your help.

CodePudding user response：

In your script, how about the following modification?

From:

widget = HtmlService.createHtmlOutputFromFile("widget.html");

To:

widget = HtmlService.createTemplateFromFile("widget.html").evaluate();

Reference:

createTemplateFromFile(filename)