Как создать форму ввода данных HTML, используя электронную таблицу Google в качестве бэкэнда - PullRequest
Новая
       34

Как создать форму ввода данных HTML, используя электронную таблицу Google в качестве бэкэнда

5 голосов
/ 11 декабря 2019

У меня есть электронная таблица Google, где некоторые строки добавляются ежедневно, и с помощью электронной таблицы Google отслеживается команда обратной связи с клиентами.

Данные электронной таблицы Google.

https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing

В приведенной выше таблице Google всегда есть указанные ниже данные на листе Google (выделены синим цветом):

Ref ID Название компании Контакт № 1 Контакт № 2 Название проекта ID агента

Остальные упомянутые детали будут получены из пользовательского интерфейса HTML на основе ответа пользователя и, наконец, нажмите «Отправить & Далее» или «Далее», входные данные будут сохранены на странице Google.

Пользователь должен сначалавведите «Идентификатор агента» в пользовательском интерфейсе HTML, и, соответственно, подробности Ref ID будут переданы конкретному пользователю «Идентификатор агента».

Как упомянуто на прилагаемом скриншоте, левая сторона информации будет статичной в соответствии с таблицей googlespread, а правая информация будет заполняться пользователем на основе телефонного разговора.

Ниже упомянутые подробности будут раскрыты или пользовательский ввод параметров радиосвязи: 

Product : Lite, Lite-I, Elite
Ref Code: LIT-1, LIT-2, LIT-3
Status  : Accept, Reject, Pending
Comment : Satisfied, Call Back, Pending

Ниже будут получены упомянутые подробности: 

Days Passed: It will be derived from the current system year - year mentioned in the `Date`

Ниже упомянутые подробности будут вводиться пользователем в виде свободного текста. . 

Client Name
Notes
Final_Status

Примечание: Агенты будут назначены и показаны только те Ref ID, где Agent ID не является пустым и Final_Status либо пустым, либо отличным от 'Отправить& Далее 'помечено на листе Googlespread.

Нам нужно добавить еще один столбец на листе Googlespread, который фиксирует метку даты и времени в соответствии с системной датой, как только Final_Status помечается как «Отправить & Далее»`или 'Далее'

Кнопка« Отправить & Далее »будет доступна, только если все детали захвачены пользователем. Кнопка «Далее» будет активна, только если выбрана опция Comment.

Кроме того, если в гугл листе нет новых строк для ввода данных с использованием пользовательского интерфейса, пользовательский интерфейс выдаст пользователю сообщение о том, что на пустом экране отсутствует «Новая задача», нажав «Кнопка «Отправить & Далее» или «Далее».

Ожидаемый интерфейс:

enter image description here

Ответы [ 4 ]

3 голосов
/ 11 декабря 2019

Похоже, что в документах для разработчиков Google Apps есть подходящее руководство для чего-то похожего на это:

Полезно для создания веб-приложений или добавления пользовательских интерфейсов в Документах, листах и ​​формах Google.

https://developers.google.com/apps-script/guides/html

Похоже, вам нужно предоставить доступ к сценариям Google Apps, затем добавьте один:

https://developers.google.com/apps-script/guides/standalone

Вы можете создатьавтономный скрипт или подключите проект вручную:

Перейдите на Google Диск и нажмите «Создать»> «Дополнительно»> «Подключить другие приложения».

Когда появится окно «Подключить приложения к диску», введите"script" в поле поиска и нажмите Enter.

Нажмите кнопку "Подключиться" рядом со списком для скрипта Google Apps.

Пример скрипта Google говорит, что ваши скрипты будут выглядеть примерно так: 

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Dialog title');
}

с соответствующим HTML: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   My Google Sheets Interface.
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

Здесь, кажется, есть хорошая документация:

https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app

, поэтому ясказал бы, что это хорошее место для начала. То, что вы пытаетесь достичь, выглядит выполнимо наверняка, я думаю, что это будет вопрос настройки того, что поддерживает сценарии Google.

Удачи !!

2 голосов
/ 19 декабря 2019

Если вы знакомы с клиентскими средами кодирования, такими как Angular или ReactJ, лучшим вариантом будет превратить лист Google в API отдыха и использовать его из клиентского приложения. Sheety - лучший бесплатный инструмент для этого.

В противном случае используйте скрипт Google Apps, чтобы связать форму с листом. Все объясняется здесь шаг за шагом.

0 голосов
/ 28 декабря 2019

Нашли это на medium.com https://medium.com/@jaejohns/how-to-use-google-sheets-as-your-website-database-b0f2f13d0396

Может быть полезным.

0 голосов
/ 23 декабря 2019

Диалог ввода данных, созданный из информации заголовка электронной таблицы

Code.gs: 

function onOpen() {
  SpreadsheetApp.getUi().createMenu("My Menu")
  .addItem('Launch Dialog','launchTheFormAsDialog')
  .addToUi();
}

function buildForm() {
  var searchColumnName='RefId';
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var tA=sh.getRange(1,1,1,sh.getLastColumn()).getValues()[0];
  var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
  tA.splice(1,5);
  var ftA=tA.slice();
  hA.splice(1,5);
  var fA=hA.slice();
  var dstr=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
  var html='<style>input{margin:2px 5px 2px 0;}</style><form id="myForm">';
  for(var i=0;i<fA.length;i++) {
    switch(ftA[i]){
      case 'date':
        html+=Utilities.formatString('<br /><input type="%s" value="%s" name="%s" />&nbsp;%s',ftA[i],dstr,fA[i],fA[i]);
        break;
      default:
        html+=Utilities.formatString('<br /><input type="%s" name="%s" />&nbsp;%s',ftA[i],fA[i],fA[i]);
        break;  
    }
  }
  html+='<br /><input type="button" value="Submit" onclick="submitForm(this.parentNode)" /></form>';
  return {html:html};
}

function testUpload() {
  upload({'Status':'none', 'Comment':'to long to fit', 'ClientName':'Don Trump', 'RefCode':'Tweeter', 'Final_Status':'impeachment', 'Product':'Bullshit', 'RefId':'id3', 'DaysPassed':'12', 'Final_Status_Date':'2019-12-23', 'Date':'2019-12-23', 'Notes':'none'})
}

function upload(theForm) {
  Logger.log(theForm);
  var kA=Object.keys(theForm);
  kA.splice(kA.indexOf('refId'),1);//remove refID
  Logger.log(kA);
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
  var hObj={};
  hA.forEach(function(e,i){hObj[e]=i+1});
  Logger.log(hObj);
  var vA=sh.getRange(3,1,sh.getLastRow()-2,2).getValues();
  for(var i=0;i<vA.length;i++) {
    if(theForm.RefId==vA[i][0]) {
      kA.forEach(function(key){
        Logger.log(hObj[key]);
        Logger.log(theForm[key]);
        sh.getRange(i+3,hObj[key]).setValue(theForm[key]);
      });
    }
  }
  return buildForm();
}

function launchTheFormAsDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('theform').setHeight(550);
  SpreadsheetApp.getUi().showModelessDialog(ui, "Form Data Entry");  
}

theform.html: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function() {
   $(function(){
      google.script.run
      .withSuccessHandler(function(obj){
        $('#formDiv').html(obj.html);
      })
      .buildForm();
    });
    });
      function submitForm(frmData) {
        google.script.run
        .withSuccessHandler(function(obj){
          //console.log('flag1');
          $('#formDiv').html(obj.html);
        })
        .upload(frmData);
      }
      function updateSelect(vA,id){
        var id=id || 'sel1';
        var select = document.getElementById(id);
        select.options.length = 0; 
        for(var i=0;i<vA.length;i++) {
          select.options[i] = new Option(vA[i][1],vA[i][0]);
        }
      }
      console.log('My Code');
    </script>
  </head>
   <body>
    <h1 id="main-heading">Form Data Entry</h1>
    <div id="formDiv"></div>
</body>
</html>

Моя электронная таблица:

Я добавил входные типы данных, чтобы можно было инициализировать поля даты и чтобы форма могла быть полностью построена на основе данных в электронной таблице, даже если столбцы добавлены или перемещены. Вы всегда можете скрыть эту строку, поскольку она находится сверху.

enter image description here

Диалог:

enter image description here

...