Раскрывающееся меню пользовательского ввода боковой панели Google Sheets со значениями из диапазона электронных таблиц - PullRequest
0 голосов
/ 24 марта 2020

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

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

Снимок экрана
Копия электронной таблицы электронных таблиц

  1. Параметры раскрывающегося списка будут отображаться при открытии боковой панели с помощью showNewJobSidebar ()
  2. Входы для обработки, категории, пополнения, скидки, клиента, и Type будет раскрывающимся меню

Вот динамические c диапазоны данных для использования:

  • Turnaround = Rates! A2: A
  • Категория = Цены! B2: B
  • Пополнение = Повышения! A2: A
  • Скидка = Скидки! A2: A
  • Клиент = Ростер! A2: A
  • Тип = Данные! A2: A

Применимые части Code.gs:

function showNewJobSidebar() {
  var html = HtmlService
      .createHtmlOutputFromFile('NewJobSidebar')
      .setTitle('New Job Sidebar')
      .setWidth(200);
  SpreadsheetApp.getUi()
      .showSidebar(html);
}

function applyNew(turnaround, category, upcharge, discount,
datein, timein, datedue, timedue, client, type, description, pages) {
  var ss = SpreadsheetApp.getActive()
  var sheet = ss.getSheetByName("Job Log");

  //Select the column we will check for the first blank cell
  var columnToCheck = sheet.getRange("B:B").getValues();
  
  // Get the last row based on the data range of a single column.
  var lastRow = getLastRowSpecial(columnToCheck);
  
  var selectedRow = lastRow + 1;

  //Apply turnaround to Column B = Column 2
  sheet.getRange(selectedRow, 2).setValue(turnaround);
  //Apply category to Column C = Column 3
  sheet.getRange(selectedRow, 3).setValue(category);
  //Apply upcharge to Column D = Column 4
  sheet.getRange(selectedRow, 4).setValue(upcharge);
  //Apply discount to Column E = Column 5
  sheet.getRange(selectedRow, 5).setValue(discount);
  //Apply datein to Column F = Column 6
  sheet.getRange(selectedRow, 6).setValue(datein);
  //Apply timein to Column G = Column 7
  sheet.getRange(selectedRow, 7).setValue(timein);
  //Apply datedue to Column H = Column 8
  sheet.getRange(selectedRow, 8).setValue(datedue);
  //Apply timedue to Column I = Column 9
  sheet.getRange(selectedRow, 9).setValue(timedue);
  //Apply client to Column L = Column 12
  sheet.getRange(selectedRow, 12).setValue(client);
  //Apply type to Column M = Column 13
  sheet.getRange(selectedRow, 13).setValue(type);
  //Apply description to Column N = Column 14
  sheet.getRange(selectedRow, 14).setValue(description);
  //Apply pages to Column O = Column 15
  sheet.getRange(selectedRow, 15).setValue(pages);
  
};

function getLastRowSpecial(range){
  var rowNum = 0;
  var blank = false;
  for(var row = 0; row < range.length; row++){

    if(range[row][0] === "" && !blank){
      rowNum = row;
      blank = true;
    }else if(range[row][0] !== ""){
      blank = false;
    };
  };
  return rowNum;
};

NewJobSidebar. html:

<body bgcolor="#039EB2">
  <font face="arial" color="white">
    <b>Enter new job details.</b><br><br>
    
    <!-- Create input fields to accept values from the user -->
    Turnaround:<br>
    <input type="text" id="Turnaround"><br><br>
    
    Category:<br>
    <input type="text" id="Category"><br><br>
    
    Upcharge:<br>
    <input type="text" id="Upcharge"><br><br>
    
    Discount:<br>
    <input type="text" id="Discount"><br><br>
    
    Date In:<br>
    <input type="text" id="DateIn"><br><br>
    
    Time In:<br>
    <input type="text" id="TimeIn"><br><br>
    
    Date Due:<br>
    <input type="text" id="DateDue"><br><br>
    
    Time Due:<br>
    <input type="text" id="TimeDue"><br><br>
    
    Client:<br>
    <input type="text" id="Client"><br><br>
    
    Type:<br>
    <input type="text" id="Type"><br><br>
    
    Description:<br>
    <input type="text" id="Description"><br><br>
    
    Pages:<br>
    <input type="text" id="Pages"><br><br>
    
    <!-- Create a button to update values -->
    <button onclick='saveNew()'>Save New Job</button><br><br><br>
    
<script>

  function saveNew(){
   //Get the value of the input fields 
   var turnaround = document.getElementById("Turnaround").value
   var category = document.getElementById("Category").value
   var upcharge = document.getElementById("Upcharge").value
   var discount = document.getElementById("Discount").value
   var datein = document.getElementById("DateIn").value
   var timein = document.getElementById("TimeIn").value
   var datedue = document.getElementById("DateDue").value
   var timedue = document.getElementById("TimeDue").value
   var client = document.getElementById("Client").value
   var type = document.getElementById("Type").value
   var description = document.getElementById("Description").value
   var pages = document.getElementById("Pages").value
   
   //Log input values in the web browser console
   console.log(turnaround, category, upcharge, discount,
   datein, timein, datedue, timedue, client, type, description, pages)

   //Send values as arugments to the server side function
   google.script.run.applyNew(turnaround, category, upcharge, discount,
   datein, timein, datedue, timedue, client, type, description, pages)
  }
  
</script>
    
  </font>
  </body>

1 Ответ

0 голосов
/ 25 марта 2020

Чтобы создать динамический c раскрывающийся список, вы должны будете использовать шаблон HTML, который позволяет создавать динамический c html контент. Сначала вы выбираете нужные данные из электронной таблицы, а затем передаете их в свой шаблон.

Создайте шаблон и переменные из Apps Script:

function showNewJobSidebar() {
  var html = HtmlService
      .createTemplateFromFile('NewJobSidebar');

  // Add the dropdown lists to the template
  html.turnaroundDPDWN = SpreadsheetApp.getActiveSheet().getRange("A2:A5").getValues();

  // Keep adding the variables you need based on the ranges containing your dropdown values
  // ...

  // Prepares the template to be shown in the UI
  html = html.evaluate()
      .setTitle('New Job Sidebar')
      .setWidth(200);

  SpreadsheetApp.getUi().showSidebar(html);
}

Добавьте динамические c выпадающие списки на основе списка, который вы создали в скрипте приложений для ваших html

<body bgcolor="#039EB2">
  <font face="arial" color="white">
    <b>Enter new job details.</b><br><br>

    <!-- Create input fields to accept values from the user -->
    Turnaround:<br>
    <select id="Turnaround">
    <? for (let i in turnaroundDPDWN) { ?>
      <option value="<?=turnaroundDPDWN[i]?>"><?=turnaroundDPDWN[i]?></option>
    <? } ?>
    </select>

    <!-- And so on with the others dropdowns -->

ссылок:

htmlTemplate

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...