Функциональность боковой панели - PullRequest
Новая
       2

Функциональность боковой панели

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

Я продолжил развивать возможность боковой панели в моем листе Google. Мне нужна помощь в создании потока внутри боковой панели и использовании ссылок или кнопок для создания некоторых выходных сообщений.

Проблема 1) - Я создал боковую панель со стрелками вперед и назад, с которой я хочу связать другие html-файлы, когда они щелкаются внутри боковой панели, поэтому создается поток или диалог, который можно перемещать назад или вперед в одной и той же последовательность. т.е. я нажимаю «Далее», и функция openTheSidebar2 () запускается

У меня есть функция выпадающего поиска, которая в приведенном ниже коде дает основные категории риска.

Проблема 2) - Я бы хотел, чтобы у них была возможность предоставить простой параграф (объяснение каждой категории), когда они выбраны. Нужно ли создавать разные HTML-файлы для каждой категории? Я надеюсь, что я могу добавить каждое сообщение для каждой категории в тот же HTML-файл. Являются ли гиперссылки неправильным путем?

Любая помощь очень ценится

code.gs 

function onOpen() {
  menu();
}


function menu() {
  SpreadsheetApp.getUi().createMenu('Risk Menu')
  .addItem('Generate Risk Waiver', 'createNewCase')
  .addSubMenu(SpreadsheetApp.getUi().createMenu('Risk Help')
             .addItem('Risk Guidance', 'openTheSidebar')
             .addItem('Risk Title', 'openTheSidebar2'))

  .addToUi();
}


function openTheSidebar() {
  var userInterface=HtmlService.createTemplateFromFile('example3').evaluate()
  .setTitle('Risk Rating');
  SpreadsheetApp.getUi().showSidebar(userInterface);
}

function openTheSidebar2() {
  var userInterface2=HtmlService.createTemplateFromFile('example4').evaluate()
    .setTitle('Primary Risk Category');
  SpreadsheetApp.getUi().showSidebar(userInterface2);
}

function openTheSidebar3() {
  var userInterface3=HtmlService.createTemplateFromFile('example').evaluate()  
  .setTitle('Cause');
  SpreadsheetApp.getUi().showSidebar(userInterface3);
}

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()!='Option 1')return;
  if(e.range.rowStart==2 && e.range.columnStart==24) {
    if(e.value=='TRUE') {
      openTheSidebar();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
  } 
   if(e.range.getSheet().getName()!='Option 1')return;
   if(e.range.rowStart==2 && e.range.columnStart==8) {
    if(e.value=='TRUE') {
      openTheSidebar2();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
   }

   if(e.range.getSheet().getName()!='Option 1')return;
   if(e.range.rowStart==2 && e.range.columnStart==1) {
    if(e.value=='TRUE') {
      openTheSidebar3();
      e.range.getSheet().getRange(e.range.rowStart,e.range.columnStart).setValue("FALSE");
    }
   }}

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

}

example4.html 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  border-box: box-sizing;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;

}

.round {
  border-radius: 50%;
}
</style>
</head>
<body>

<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Categories</button>
  <a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250</a>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#IT Security & Vulnerability">IT Security & Vulnerability</a>
<a href="#Information Security - Data Only">Information Security - Data Only</a>
<a href="#Technical Debt or Decommission">Technical Debt or Decommission</a>
<a href="#Availability (SLA)">Availability (SLA)</a>
<a href="#Service Continuity & Resilience">Service Continuity & Resilience</a>
<a href="#Capacity & Performance">Capacity & Performance</a>
<a href="#Licencing & Asset Management, Contracts, Maintenance,">Licencing & Asset Management, Contracts, Maintenance,</a>
<a href="#Legal & Regulatory Compliance">Legal & Regulatory Compliance</a>
<a href="#Supplier & Vendor Management">Supplier & Vendor Management</a>
<a href="#Shadow IT">Shadow IT</a>
<a href="#Resource">Resource</a>
<a href="#Knowledge / Skills / Tooling)">Knowledge / Skills / Tooling)</a>
<a href="#Procedure & Process">Procedure & Process</a>
<a href="#Service Ownership">Service Ownership</a>
<a href="#Project">Project</a>
<a href="#Environmental (includes facilities)">Environmental (includes facilities)</a>
<a href="#Architecture and Strategic">Architecture and Strategic</a>
  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</body>
</html>

1 Ответ

1 голос
/ 25 апреля 2019

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

Способ 1: подавать все сразу; показать и спрятать при необходимости

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

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

Фрагмент содержимого в своем собственном файле .html и присвоение внешнему HTML-элементу уникального идентификатора. 

<section id="IT_Security_And_Vulnerability" class="hidden">
  <h1>IT Security & Vulnerability</h1>
  <p> ...
  </p>
</section>

Распечатайте все эти html-файлы в ваш основной html-файл, который вы вернете пользователю. Фрагменты основного html-файла: 

<style>
.hidden {
  display: none;
}
</style>

<?= include("#IT_Security_And_Vulnerability") ?>
<?= include("#Information_Security_Data_Only") ?>
<!-- etc -->

<script>
const body = document.querySelector("body"); // this just grabs the sidebar body
body.addEventListener("click", handleClick);
function handleClick(clickEvent) {
  if (clickEvent.target.tagname != "A") { // this listener only for clicking links
    return;
  }
  clickEvent.target.preventDefault(); // you may or may not want/need this to prevent browser from trying to actually navigate with your <a> tag
  const id = clickEvent.target.getAttribute("href");
  const sections = document.querySelectorAll("section");
  for (let i = 0, l = sections.length; i < l; ++i) { // hide everyone
    sections[i].classList.add("hidden");
  }
  document.querySelector(id).classList.remove("hidden"); // show the selected one
}
</script>

Способ 2. Использование google.script.run для извлечения контента по мере необходимости

Все еще используя функцию include на сервере, он обрабатывает контент по требованию. 

...
<section class="contentContainer">
<!-- populated by js -->
</section>
...
<script>
const body = document.querySelector("body"); // this just grabs the sidebar body
body.addEventListener("click", handleClick);

function refresh(html) {
  const contentContainer = document.querySelector(".contentContainer");
  contentContainer.innerHTML = html;
}

function handleClick(clickEvent) {
  if (clickEvent.target.tagname != "A") {
    return;
  }
  clickEvent.target.preventDefault(); // you may or may not want/need this.
  const reference = clickEvent.target.getAttribute("href");
  google.script.run.withSuccessHandler(refresh).include(reference);
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...