SharePoint 2013 на стороне клиента настраиваемое поле поиска Javascript с возможностью заполнения результатов в таблицу HTML - PullRequest
0 голосов
/ 12 марта 2020

Сценарий:

  • Клиент хотел бы улучшить свою «поисковую систему» ​​SharePoint 2013
  • «Поисковая система» была изначально поиском с более ярким фильтром ключей, введенным в редактор сценариев. в отдельные списки SharePoint 2013.
  • Клиент запросил поисковую систему на пустой странице сайта с возможностью поиска по всему семейству сайтов.
  • После получения результатов клиент хотел бы, чтобы результаты заполнить таблицу HTML, расположенную прямо под поисковой системой. Проблема:
  • Прежде чем я реструктурирую URL-адрес при нажатии, чтобы отфильтровать то, что клиент увидит в списке, я понимаю, что это уже не так.

Вопрос: Есть ли в любом случае получить эти элементы списка и отобразить их в таблице HTML после события onclick? В прошлых проектах я делал запросы stati c XML, CamlQuerys и AJAX для заполнения ячеек в таблице HTML под нагрузкой, однако я никогда не делал ничего подобного на клиентской стороне SharePoint 2013. Помощь будет принята с благодарностью! Мой предыдущий код был включен ниже.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>
<div class="hero-image">
<h1 style="color:black; font:46px castellar; text-shadow: 5px -5px #999999;"><strong>Transaction Retrieval</strong></h1>
</body>
</head>
</html>

<script type="text/javascript">
    function Search() {
        var st = document.getElementById("Searchtxt").value;
        var cd = document.getElementById("coldropdown").value;
        var url = "";

        if (st != "") {
            if (cd == "Employee ID" || cd == "Document ID" || cd == "Cycle Number" || cd == "Type of Transaction") {

                url = "FilterField1=" + cd + "&FilterValue1=" + st;
                window.location.href = "AllItems.aspx?" + url;
                    }
        else {
            return false;
        }  
  }
    function Clear() {  
      window.location.href = "AllItems.aspx";
    }
</script>


<p style="color:black; font:15px georgia;">Search Field:<select id="coldropdown" style="border-radius: 5px; border-color: black;"</p>
<option value="EmployeeID">Employee ID</option>
<option value="DocumentID">Document ID</option>
<option value="CycleNumber">Cycle Number</option>
<option value="TypeofTransaction">Type of Transaction</option>
</select>
<p style="color:black; font:15px georgia;">Search text: <input id="Searchtxt" type="text" style="border-radius: 5px; border-color: black;"</p>
<br>
<br>
<input id="btnSearch" onclick="return Search();" type="button" style=" background-color:Green; color:White; font-size: 12px; border-radius: 6px; box-shadow: 0 14px 16px 0 rgba(0,0,0,0.2), 0 17px 30px 0 rgba(0,0,0,0.19)" value="Search"/>

<input id="btnClear" onclick="return Clear();" type="button" style=" background-color:Red; color:White; border-radius: 6px; font-size: 12px; box-shadow: 0 14px 16px 0 rgba(0,0,0,0.2), 0 17px 30px 0 rgba(0,0,0,0.19)"   value="Clear"/>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Result Table</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Employee ID</th>
      <th>Document ID</th>
      <th>Cycle Number</th>
      <th>Type of Transaction</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

          </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>


    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>


         </tr>
  </table>
</div>

</body>
</html>

Изображение, как выглядит компоновка до сих пор

1 Ответ

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

Да, SharePoint имеет богатый API на основе REST , который можно выполнить с Ajax в JavaScript. Включая конкретный c API для поиска .

Чтобы вызывать API и динамически отображать его на странице, я бы предложил использовать инфраструктуру JavaScript, чтобы немного упростить задачу. jQuery имеет вспомогательные методы для вызова Ajax и помогает вам манипулировать DOM для рендеринга вашей таблицы, но вы, вероятно, могли бы сделать его более функциональным с помощью подкачки страниц, уточнений и прочего, используя Angular или ReactJS рамки. Вот хороший учебник, который покажет вам, как это сделать с jQuery.

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

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