0

google script + sheet + html

Как выполнить подстановку из листа по выпадающему полю с присвоением ячейки справа содержащую порядковый номер? На данный момент реализовано так, но слишком объемный код получается...


<select required name="department">
    <option disabled>choose</option>
    <option>Moscow</option>
    <option>Sidney</option>
    <option>Barcelona</option>

//New id
var idn = template.idn = theForm.idn;
if (department == "Moscow") { idn = "1";}
else if (department == "Sidney") { idn = "2";}
else if (department == "Barcelona") { idn = "3";}

Полный код:

Code.gs

var submissionSSKey = 'THERE_ID_KEY';
var folderId = "THERE_ID_FOLDER";

function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}

function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);

// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
//  if (name != null) {
var department = template.department = theForm.department;
var month = template.month = theForm.month;
var message = template.message = theForm.message;
var email = template.email = theForm.email; 
var fileUrl = template.fileUrl = doc.getUrl();

//validate form
//var elems = theForm.elements;

//  resetError(elems.name,parentNode);
//  if(name != null){
//  showError(elems.name.parentNode, 'Укажите Имя!')
//  }

//Date write
var dat = new Date();
//  var dat = d.toLocaleTimeString();

//New id
//    var idn = template.idn = theForm.idn;
//    if (department == "Moscow") { idn = "1";}
//    else if (department == "Sidney") { idn = "2";}
//Потуги обрести внутреннюю силу
//  var a = sheet.getSheetName("DB_F").getRange("A"+activeRow+":B"+activeRow);
//  var sheet2 = SpreadsheetApp.openById(submissionSSKey).getSheetByName('DB_F');  
//  var last = sheet2.getLastRow();
//  var a = sheet2.getRange("DB_F!A2:A100");
//  var b = sheet2.getRange("DB_F!B2:B100");
//  var values = a.getValues();
//  var rows = b.getValues();
//  var idn = template.idn = theForm.idn;
//  if (department == a.getDisplayValue()) { idn = b.getDisplayValue();} 
//  if (department == values.join()){idn = rows.join();}
var idn = template.idn = theForm.idn;
    if (department == "Moscow") { idn = "1";}
    else if (department == "Sidney") { idn = "2";}
    else if (department == "Barcelona") { idn = "3";}
//  else if (department == ">1000 items") { idn = "5";}

//Logger.log(department.getDisplayValue());
//Logger.log(idn.getDisplayValue());
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 8).setValues([[dat,name,department,message,email,month,fileUrl,idn]]);

// Return HTML text for display in page.
return template.evaluate().getContent();
}

Thanks.html

<div>
    <h1><strong>Загрузка...</strong></h1>
    <p><strong>Загрузка прошла успешно.</strong></p>
    <strong>Имя:</strong> 
    <strong style="color:red;"><?= name ?></strong><br/>
    <strong>Филиал:</strong> 
    <strong style="color:red;"><?= department ?> <?= idn ?></strong><br/>
    <strong>Доп. Информация:</strong> 
    <strong style="color:red;"><?= message ?></strong><br/>
    <strong>Период с:</strong> 
    <strong style="color:red;"><?= email ?></strong> 
    <strong>по:</strong> 
    <strong style="color:red;"><?= month ?></strong><br/>
    <strong>Прикрепленный файл:</strong> 
    <strong><?= fileUrl ?></strong><br/>
</div>

Form.html

Публикуется как веб приложение

<!DOCTYPE html>
<html>
  <head>
   <title>Example: Form</title>
    <base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
        #formDiv {
            margin: 55px auto;
            width: 350px;
        }
        /* Перепишем кое-что из add-ons.css */

        input {
            width: 50%;
        }

        input:required:invalid {
            border:1px solid red;
        }

        .form-group {
            margin: 9px 0px 9px 0px;
        }  
        div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 1px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 99%; /* Ширина слоя */
    background: #32CD32; /* Цвет фона */
   }
    </style>
</head>
<body>

    <div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">

          <div class="content">
            <div id="center"><h2>Example:</h2></div>
            <div id="center"><h2>"Form"</h2></div>
          </div>

            <div class="form-group">

            Имя: <input style="" name="name" type="text" autofocus required /><br/>

            </div>
            <p></p>
           <div style="color:white; background: #6495ED;"><strong>"Укажите имя документа"</strong>
           </div>          


    <div class="form-group">
        Город:  
        <select required name="department">
        <option disabled>Insert item</option>
        <option>Moscow</option>
        <option>Sidney</option>
        <option>Barselona</option>
    </select><br/>
    </div>

           <label for="email">Период c:</label>
           <input required name="email" type="date"/>
           <p></p>
             <div style="color:white; background: #6495ED;">"Укажите период в формате дд.мм.гггг</div>
             <div style="color:red;">(Пример: 21.06.2099)</div><br />             


           <label for="month">Период по:</label>
             <input required name="month" type="date"/>
             <p></p>
             <div style="color:white; background: #6495ED;">"Укажите период в формате дд.мм.гггг</div>
             <div style="color:red;">(Пример: 21.06.2099)</div><br />                    


Доп. Информация:<textarea placeholder="Введите текст...
Это поле необязательное к заполнению" name="message" style="margin: 2px; height: 148px; width: 330px;"></textarea><br/>

    <p></p>    
    Прикрепить файл:<div style="color:red; background: #FFFFFF;">(Только сканы!)</div>
    <p></p>
    <input name="myFile" type="file" accept="image/*" /><br/>

    <p></p>

  <input class="share" type="button" value="Отправить"
      onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run        
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />

</form>

    <div id="inProgress" style="display: none;">
    <!-- Progress starts hidden, but will be shown after form submission. -->
    Загрузка. Пожалуйста подождите...
    </div>

    <div id="output">
      <!-- Blank div will be filled with "Thanks.html" after form submission. -->
    </div>

<script>
  // Javascript function called by "submit" button handler,
  // to show results.
  function updateOutput(resultHtml) {
    toggle_visibility('inProgress');
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

3
  • Что и куда подставить? Причем тут Таблицы, HTML и Google Apps Script? Приведите хоть какие-то примеры. Вообще ничего не понятно.
    – oshliaer
    25 мар 2017 в 7:19
  • google таблица опубликована как веб, выше кусок html формы и gs... пользователь вводит данные в html которые заполняют таблицу... необходимо присвоить name = departament индивидуальный id и записать в отдельную ячейку, в примере выше получается громоздко, если наименований более 1000.... если создать отдельный лист со столбцом A1:A1000 name = departament и B1:B1000 idn = порядковому номеру, можно значительно его сократить, если сопоставлять из диапазона по name= departamen и ячейка рядом из B1:B1000..
    – 0x7F000001
    25 мар 2017 в 15:05
  • "google таблица опубликована как веб" Это как? Вот так? Или, все же, у вас опубликован скрипт, который находится в Таблице? Обратитесь к описанию , чтобы более точно изложить свою проблему.
    – oshliaer
    25 мар 2017 в 19:25

1 ответ 1

0

Я правильно понимаю? Вы разворачивает ваш скрипт как веб-приложение?

Подскажите как вы формируете html? (есть несколько способов, поэтому опишите как именно вы это делаете)

Если я вас правильно понял, вам нужно автоматически создать < option > сделав каждый из них уникальными, то есть задав им id, который вы берете из столбца B а название для вы берете из столбца A.

Сделайте следующее (я опишу алгоритм):

  1. Получите все данные из столбцов A и B.
  2. Для удобства множите преобразовать массив в объект.
  3. Передайте эти данные в html.
  4. Организуйте цикл который переберет все данные из массива (или объекта) с вашими Названиями и ID-шниками.
  5. В теле вашего цикла, в какой-то переменной добавляйте все ваши < option > и задайте новый атрибут для этого < option > в котором впишите ваш id
  6. Вставьте эту переменную (в которой все < option >) в html
  7. При получении данных из выбранного < option >, заберите данные из вашего атрибута

Вот пример реализации такого цикла в html (пункт 4).

var data = {
      "Moscow": "1",
      "Sidney": "2",
      "Barcelona": "3",
      ...
    }, // Предположим тут ваши все данные которые вы передали в html.
    html_option = ""; // Тут будем хранить все ваши <option>

    for (var key in data) {
      html_option += `<option idn="${data[key]}">${key}</option>`;
    }

   // Теперь вставляем данные html_option  в Ваш <select>
   $("select[name=department]").append( html_option );

Ваш html будет таким (до работы предыдущего кода):

<select required name="department">
  <option idn="0" disabled>choose</option>
</select>

Ваш html будет таким (после работы предыдущего кода) (пункт 6):

<select required name="department">
  <option idn="0" disabled>choose</option>
  <option idn="1">Moscow</option>
  <option idn="2">Sidney</option>
  <option idn="3">Barcelona</option>
</select>

А так, к примеру, вы множите получить данные из атрибута idn из выбранного элемента (пункт 7):

$('select[name=department] option:selected').attr("idn");

А так, к примеру, вы множите получить значение текста выбранного элемента (пункт 7):

$('select[name=department] option:selected').text();
3
  • Приветствую, да, публикация как веб приложение. Но смысл был избавиться от данных в коде и оперировать диапазоном ячеек с подстановкой значений... из-за значений в списке более 1000 позиций Пришлось отказаться от подобной реализации т.к пришлось делать отдельную страницу с доступом по паролю(что не мешало сохранить линк к таблице в случае тех работ), а так же в форме так и не получилось сделать обязательные ячейки к заполнению, так же в форме присутствуют прикрепляемые файлы с хранением на google disk, а сама таблица в итоге стала "базой данных" в другие таблицы по запросам query
    – 0x7F000001
    18 дек 2017 в 6:36
  • Не могу понять вас :) Вам в таблице нужно составить автоматически выпадающее поле. Затем при выборе определенного пункта, в соседнюю ячейку вставить какой-то текст, все верно ? 18 дек 2017 в 14:54
  • )) это видимо была связь с космосом, решить задачу просто удалось, но я хотел уменьшить "простынь" в коде. В теории это можно сделать, если перенести значения переменной department из gs в таблицу и по выпадающему списку из html делать подстановку ID ячейки справа. я добавлю рабочий код и потуги, чтобы была наглядность
    – 0x7F000001
    19 дек 2017 в 7:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.