#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. Да, спасибо, я сначала попробую заставить кнопку поиска работать, а затем сделаю что-нибудь для меню.