Боковая панель листов Google - на основе ссылки на столбец - PullRequest
Новая
       1

Боковая панель листов Google - на основе ссылки на столбец

0 голосов
/ 17 апреля 2019

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

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

Допустим, они попали в ячейку, которая находится в столбце D, на боковой панели будет загружен файл html4 для отображения сообщения, связанного со столбцом D.

Я уверен, что это довольно просто сделать, но я не эксперт! 

     var ui = SpreadsheetApp.getUi();
  ui.createMenu("Risk Menu")
  .addItem("Add New Risk", "sideBar")
  .addToUi()
}


function sideBar() {

  var html= HtmlService.createHtmlOutputFromFile("sideBar").setTitle("Risk Guidance")
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(html);

}

function sideBar2() {
  var ui = SpreadsheetApp.getUi();
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Risk Register');
  var Cell = sh.getActiveCell();
  var Column = Cell.getColumn();
}

1 Ответ

0 голосов
/ 17 апреля 2019

Выполнение функций одним нажатием на флажок

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

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

Codes.js: 

function onOpen() {
  menu();
}

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

function menu() {
  SpreadsheetApp.getUi().createMenu('My Menu')
  .addItem('Insert CheckBoxes', 'insertCheckboxes')
  .addItem('Create OnEdit Trigger', 'createOnEditTrigger')
  .addItem('Open Dialog', 'openTheDialog')
  .addItem('Close Dialog', 'closeDialog')
  .addItem('Open Sidebar', 'openTheSidebar')
  .addItem('Display Project Triggers', 'displayProjectTriggers')
  .addItem('Delete Trigger', 'deleteOnEditTrigger')
  .addSubMenu(SpreadsheetApp.getUi().createMenu('Utilities')
             .addItem('Named Range', 'jjeSUS1.createNamedRange')
             .addItem('Skip Header Select', 'jjeSUS1.selectColumnsSkipHeader'))
  .addToUi();
}

function openTheDialog() {
  var userInterface=HtmlService.createTemplateFromFile('example1').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Example 1 HTML');
}

function openTheSidebar() {
  var userInterface=HtmlService.createTemplateFromFile('example1').evaluate();
  SpreadsheetApp.getUi().showSidebar(userInterface);
}

function getColumnHeight(col,sh,ss){
  var ss=ss || SpreadsheetApp.getActive();
  var sh=sh || ss.getActiveSheet();
  var col=col || sh.getActiveCell().getColumn();
  var lastrow=sh.getLastRow();
  if(lastrow==0)return 0;
  var rg=sh.getRange(1,col,lastrow,1);
  var vA=rg.getValues();
  while(vA.length>0 && vA[vA.length-1][0].length==0){
    vA.splice(vA.length-1,1);
  }
  return vA.length;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function getRowColumn() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getActiveSheet();
  var rg=sh.getActiveCell();
  var rObj={row:rg.getColumn() ,column:rg.getRow()};
  return rObj;
}

function getCellA1() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getActiveSheet();
  var rg=sh.getActiveCell();
  var rObj={A1:rg.getA1Notation()};
  return rObj;
}

function onCheckOpenSideBar(e) {
  if(e.range.getSheet().getName()!='Sheet1')return;
  if(e.range.rowStart==2 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      openTheSidebar();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
  if(e.range.rowStart==3 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      openTheDialog();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
  if(e.range.rowStart==4 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      sortByCol(3);
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
  if(e.range.rowStart==5 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      sortByCol(4,5);
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
  if(e.range.rowStart==6 && e.range.columnStart==1) {
    if(e.value=='C') {
      sortByCol(3);
    }
  }
  if(e.range.rowStart==6 && e.range.columnStart==1) {
    if(e.value=='D,E') {
      sortByCol(4,5);
    }
  }
  if(e.range.rowStart==7 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      closeSideBar();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
  if(e.range.rowStart==8 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      closeDialog();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  }
}

function sortByCol(col,col2) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var rg=sh.getRange(1,3,getColumnHeight(col,sh,ss),3);
  if(col2) {
    rg.sort([{column: col,ascending:true},{column: col2,ascending:true}]);
  }else{
    rg.sort({column: col, ascending:true});
  }
}

function createOnEditTrigger() {
  ScriptApp.newTrigger('onCheckOpenSideBar').forSpreadsheet(SpreadsheetApp.getActive()).onEdit().create();
  displayProjectTriggers();
}

function insertCheckboxes() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  sh.getActiveRange().insertCheckboxes();
}

function deleteOnEditTrigger() {
  var tA=ScriptApp.getProjectTriggers();
  for(var i=0;i<tA.length;i++) {
    if(tA[i].getHandlerFunction()=='onCheckOpenSideBar') {
      ScriptApp.deleteTrigger(tA[i]);
      break;
    }
  }
  displayProjectTriggers();
}

function displayProjectTriggers() {
  var tA=ScriptApp.getProjectTriggers();
  var html="<style>th,td{border:1px solid black;padding:2px;margin:2px;}</style><table><tr><th>Handler Function</th><th>Trigger Type</th><th>Unique ID</th></tr>";
  for(var i=0;i<tA.length;i++) {
    html+=Utilities.formatString('<tr><td>%s</td><td>%s</td><td>%s</td></tr>', tA[i].getHandlerFunction(),tA[i].getEventType(),tA[i].getUniqueId());
  }
  html+='</table>';
  var userInterface=HtmlService.createHtmlOutput(html).setWidth(800);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Project Triggers');
}

function closeSideBar() {
  var userInterface=HtmlService.createHtmlOutputFromFile('dummy');
  SpreadsheetApp.getUi().showSidebar(userInterface);
}

function closeDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('dummy');
  SpreadsheetApp.getUi().showModelessDialog(userInterface,'Closing');
}

script.html: 

<script>
  function getRowCol(){
    $('#rc').css('background-color','#ffff00');
    google.script.run
    .withSuccessHandler(function(rObj){
      $('#rc').val(rObj.row + ',' + rObj.column);
      $('#rc').css('background-color','#ffffff');
    })
    .getRowColumn();
  }
  function getCellA1(){
    $('#A1').css('background-color','#ffff00');
    google.script.run
    .withSuccessHandler(function(rObj){
      $('#A1').val(rObj.A1);
      $('#A1').css('background-color','#ffffff');
    })
    .getCellA1();
  }
  function getColumnHeight(){
    $('#colheight').css('background-color','#ffff00');
    google.script.run
    .withSuccessHandler(function(h){
      $('#colheight').val(h);
      $('#colheight').css('background-color','#ffffff');
    })
    .getColumnHeight();
  }
</script>

css.html: 

<style>
body {background-color:#ffffff;}
input{padding:2px;margin:2px;}
</style>

res.html: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

example1.html: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('res') ?>
    <?!= include('css') ?>
  </head>
  <body>
   <input id="A1" type="text" placeholder="A1Notation" size="6" /><input type="button" value="Cell A1" onClick="getCellA1();" />
   <br /><input id="rc" type="text" placeholder="Row , Column" size="6" /><input type="button" value="Row,Column " onClick="getRowCol();" />
   <br /><input id="colheight" type="text" placeholder="Column Height" size="6" /><input type="button" value="Column Height" onClick="getColumnHeight();" />
   <?!= include('script') ?>
  </body>
</html>

dummy.html: (самозакрывающийся html для закрытия других диалогов или боковых панелей) 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function(){
      google.script.host.close();
    });
    </script>
  </head>
  <body>
  </body>
</html>

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

enter image description here

enter image description here

enter image description here

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

Нет похожих вопросов

...