Блог

Главная - Вопросы по программированию - Хотите преобразовать мое веб-приложение Google script во всплывающее пользовательское меню

Хотите преобразовать мое веб-приложение Google script во всплывающее пользовательское меню

#javascript #google-apps-script #google-sheets #automation #web-scripting

Вопрос:

Я создал веб-приложение Google sheet script, но я хочу создать пользовательское меню, из которого я могу получить свое веб-приложение, как всплывающее на той же странице, так что мне не нужно всегда переходить по ссылке на веб-приложение или, если вы знаете какую-либо альтернативу, пожалуйста, помогите мне…

Я хочу выполнить операцию поиска, которую мы можем использовать внутри нашего листа или сделать что-то на новом листе, где мы также сможем получить все данные внутри листа.

это файл сценариев

Код. gs

 function doGet() {
 
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){
      result = search(formObject.searchtext);
  }
  return resu<
}



function search(searchtext){
  var spreadsheetId   = '1JZanz4UZObZeLfN-z1RM77VcS_13pEBVcxf4pLzZ7wY'; 
  var dataRage        = 'APAC!A3:P';
                                     
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];
  
  data.forEach(f=> {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

Это HTML — файл

Index.html

 <!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        
        <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
        <script>
          //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i  ) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray amp;amp; dataArray !== undefined amp;amp; dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>" 
                           "<thead style='white-space: nowrap'>" 
                             "<tr>"                               
                        
                              "<th scope='col'>Manage status</th>" 
                              "<th scope='col'>Site Code</th>" 
                              "<th scope='col'>BU</th>" 
                              "<th scope='col'>Site name</th>" 
                              "<th scope='col'>SSH / Telnet</th>" 
                              "<th scope='col'>Comment</th>" 
                              "<th scope='col'>Hostname</th>" 
                              "<th scope='col'>Model</th>" 
                              "<th scope='col'>Function</th>" 
                              "<th scope='col'>AAA config</th>" 
                              "<th scope='col'>Mgt IP</th>" 
                              "<th scope='col'>Subnet</th>" 
                              "<th scope='col'>VLAN</th>" 
                              "<th scope='col'>Location</th>" 
                              "<th scope='col'>Serial No </th>" 
                              "<th scope='col'>Software Ver </th>" 
                            "</tr>" 
                          "</thead>";
              for(var i=0; i<dataArray.length; i  ) {
                  result  = "<tr>";
                  for(var j=0; j<dataArray[i].length; j  ){
                      result  = "<td>" dataArray[i][j] "</td>";
                  }
                  result  = "</tr>";
              }
              result  = "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = resu<
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
        
    </head>

    <style>
      th,td{
        border-left:1px dashed gray;
      }
      </style>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
            
                  <!-- ## SEARCH FORM ------------------------------------------------ -->
                  <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <label for="searchtext">Search Text</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Search Text">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">Search</button>
                  </form>
                  <!-- ## SEARCH FORM ~ END ------------------------------------------- -->
              
              </div>    
            </div>
            <div class="row">
              <div class="col">
            
                <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
                <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
                  
              </div>
            </div>
        </div>
    </body>
</html>

Ответ №1:

Попробуй:

 function launchwebapdialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createTemplateFromFile('Index').evaluate(),'Title');
}

Я заставил это работать. Нет, это не одно и то же. Но вы можете перейти к следующему шагу отсюда.

gs:

 function processForm(formObject){  
  Logger.log(JSON.stringify(formObject));
  var result = "";
  if(formObject.searchtext){
      result = search(formObject.searchtext);
  }
  return resu<
}

function search(searchtext){
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getActiveSheet();
  
  const tf = sh.createTextFinder(searchtext).findAll();
  let found=tf.map(e => e.getA1Notation());
  return found;
}

function launchwebapdialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createTemplateFromFile('ah1').evaluate(),'Title');
}

HTML:

 <!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <script>
          function handleFormSubmit(formObject) {
            google.script.run
            .withSuccessHandler(createTable)
            .processForm(formObject);
          }

          function createTable(dataArray) {
            document.getElementById("search-form").reset();
              document.getElementById('search-results').innerHTML = dataArray.join(', ');
          }        
          
        </script>
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
                  <form id="search-form" class="form-inline">
                    <div class="form-group mb-2">
                      <label for="searchtext">Search Text</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Search Text">
                    </div>
                    <input type="button" value="Search" onclick="handleFormSubmit(this.parentNode);" />
                  </form>
                  
              </div>    
            </div>
            <div class="row">
              <div class="col">
                <div id="search-results" class="table-responsive">
                </div>                  
              </div>
            </div>
        </div>
    </body>
</html>

Комментарии:

1. Спасибо, это работает, но только для HTML-файла основная функция скрипта не работает, и как я могу использовать это всплывающее окно в качестве меню в моей электронной таблице…

2. Просто добавьте в меню название функции, которая запускает диалоговое окно.

3. Вам придется заменить любую функциональность в вашем doget на эквивалентную с помощью google.script.run

4. Может потребоваться некоторая отладка, пока вы не привыкнете к этому. Боль от того, чтобы научиться делать это сейчас, сэкономит вам часы в будущем.

5. Да, спасибо, я сначала попробую заставить кнопку поиска работать, а затем сделаю что-нибудь для меню.

Метки: