How do I get the event parameters and show them as the value of the HTML input box?-CodePudding

problem

When I choose a row number in the Select box, I want to put the value of the input text box of HTML.

But my cord doesn't work normally.

When I check with the console window, the error Uncaught eval keeps popping up and it doesn't work.

This is the code I wrote.

First, the HTML file with the Row Select Box.

export_getRow.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>

  <body>
    <p>
     Header row
    <p>  
    <select name="rowNum" id="rowNum"onchange="google.script.run.setValue()"
                  style="width:280px;height:30px;">
        <option value="none" selected>Please select a row</option>
        <?!= options ?>
    </select>

    <p>
    Select the row with the field title of the data to export.
    <p>

    <button onclick='prevPage()'>prev</button>
    <button onclick='nextPage()'>next</button>
    <button onclick='insertData()'>insert Data</button>

    <script>
      var headerRow = document.getElementById("rowNum");
      headerRow.onchange = function(){
      console.log(headerRow.value);
      console.log(localStorage.setItem("selectRowNum",headerRow.value));}      

      var valueToInsert = localStorage.getItem("selectObjToInsert");  
      console.log(valueToInsert);   

      function prevPage() {
        google.script.run.getSheetListforExport();}

      function insertData() {
        google.script.run.salesforceEntryPoint(valueToInsert,headerRow.value);}  

      function nextPage() {
        google.script.run.setValue();}

    </script>
  </body>
</html>

When selecting Row Number in the Select box,

I want to take the value in the Row from the spreadsheet and put it in the input text box in HTML.

File with input textbox.

export_MatchingField

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var value= matchingField(headerRowToInsert); ?>
    <? for(var i=0;i<value.length;i  ){?>
    <div style="margin-top:5px;">
      <input type="text" id ="textValue" name='textValue' value = <?= value[i] ?>>
    </div>
    <? } ?>

    <button onclick='prevPage()'>Prev</button>

    <script>
      var textBoxes = document.querySelectorAll('[id^=textValue]');
      var textToWrite;
      for(var i in textBoxes){
        textToWrite = textBoxes[i].value;
      }

      var headerRowToInsert = localStorage.getItem("selectRowNum");  
      console.log(headerRowToInsert); 

      function prevPage() {
      google.script.run.getRowNum();}    
    </script>
 </body>

The following is a gs file that matches the fields.

I took the field name from the outside and compared it to the line in the Google

spreadsheet, so that it will be displayed when it matches.

matchField.gs

function matchingField(e){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var LastRow = ss.getLastRow();
  var LastCol = ss.getLastColumn();
  var runningLog = '<br>Uploaded following:<br><br>';
  //e => Value obtained from row select box
  var [header, ...values] = ss.getRange(e,1,LastRow,LastCol).getValues(); 

  var url = 'example.com';
  var response = UrlFetchApp.fetch(url,getUrlFetchOptions());
  var json = response.getContentText();
  var data = JSON.parse(json);
  var dataSobjectsField = data.fields;

  var arr = []
  dataSobjectsField.map(l => {
    var sfObjList = l.name;
    arr.push(sfObjList);
    }).join("");


  for(var i=0 ; i<[header,...values][0].length;i  ){
    if(arr.includes([header,...values][0][i])){
      return [header,...values][0]
    }else{
      //select fiend name
    }
  }
}

The following is a function that takes the value of the mathing field

and runs it as a sidebar in Google Apps script.

matchField.gs

function setValue(e){
  var html = HtmlService.createTemplateFromFile('export_matchField');
  html.value = matchingField(e);
  var h = html.evaluate()
        .setTitle('DG Connector')
        .setWidth(400)
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
      SpreadsheetApp.getUi().showSidebar(h);
}

desired result When selecting the value of the header row select box, I would like to take the value

that matches the row number and put it as the value of the input text box.

A situation in which the event parameter is not present, it is executed,

but not when it is present.

I haven't solved it for days.

Also, onchage does not run. What should I do?

CodePudding user response：

Modification points:

When I saw your showing script, at export_getRow.html, when the dropdown list is selected, I thought that headerRow.onchange = function(){,,,} is run. By this, google.script.run.setValue() is not run. So, I thought that this situation is different from your current issue.
When I removed headerRow.onchange = function(){,,,}, when the dropdown list is selected, I think that google.script.run.setValue() is run. But, unfortunately, no value is used with google.script.run.setValue(). By this, I'm worried that an error occurs at var [header, ...values] = ss.getRange(e,1,LastRow,LastCol).getValues();.
And, at <? var value= matchingField(headerRowToInsert); ?>, headerRowToInsert is not declared.

I thought that these might be your current issues. When these points are reflected in your showing script, how about the following modification?

Google Apps Script side: `Code.gs`

Please modify setValue as follows.

function setValue(e) {
  var html = HtmlService.createTemplateFromFile('export_matchField');
  html.inputtags = matchingField(e).reduce((s, f) => s  = `<div style="margin-top:5px;"><input type="text" id ="textValue" name='textValue' value='${f}'></div>`, "");
  var h = html.evaluate().setTitle('DG Connector').setWidth(400).setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showSidebar(h);
}

In the current stage, when the loop process is used with the template, the process cost becomes high. Ref So, I created HTML outside of the template using a loop.

HTML side: `export_getRow.html`

Please modify export_getRow.html as follows.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <p>
    Header row
  <p>
    <select name="rowNum" id="rowNum"onchange="google.script.run.setValue(this.selectedIndex   1)" style="width:280px;height:30px;">
        <option value="none" selected>Please select a row</option>
        <?!= options ?>
    </select>

  <p>
    Select the row with the field title of the data to export.
  <p>

    <button onclick='prevPage()'>prev</button>
    <button onclick='nextPage()'>next</button>
    <button onclick='insertData()'>insert Data</button>

    <script>
      var headerRow = document.getElementById("rowNum");
      // headerRow.onchange = function(){
      //   console.log(headerRow.value);
      //   console.log(localStorage.setItem("selectRowNum",headerRow.value));
      // }      

      var valueToInsert = localStorage.getItem("selectObjToInsert");  
      console.log(valueToInsert);   

      function prevPage() {
        google.script.run.getSheetListforExport();}

      function insertData() {
        google.script.run.salesforceEntryPoint(valueToInsert,headerRow.value);}  

      function nextPage() {
        google.script.run.setValue();}

    </script>
</body>

</html>

HTML side: `export_matchField.html`

Please modify export_matchField.html as follows.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <?!= inputtags ?>

  <button onclick='prevPage()'>Prev</button>

  <script>
    var textBoxes = document.querySelectorAll('[id^=textValue]');
      var textToWrite;
      for(var i in textBoxes){
        textToWrite = textBoxes[i].value;
      }

      var headerRowToInsert = localStorage.getItem("selectRowNum");  
      console.log(headerRowToInsert); 

      function prevPage() {
      google.script.run.getRowNum();}    
  </script>
</body>

Note:

By above modification, I think that after the HTML of export_getRow.html was oprned, and when the dropdown list is selected, google.script.run.setValue(this.selectedIndex 1) is run, and export_matchField.html is opened by including the input tags created by the value from matchingField(e).
In this answer, it supposes that your function of matchingField(e) works fine and your expected value is returned by giving e, and also, first, your export_getRow.html can be correctly opened. Please be careful about this.

Modification points:

Google Apps Script side: Code.gs

HTML side: export_getRow.html

HTML side: export_matchField.html

Note:

Google Apps Script side: `Code.gs`

HTML side: `export_getRow.html`

HTML side: `export_matchField.html`