Организационная/иерархическая диаграмма в SharePoint (с использованием jquery, Javascipt-CSOM)

Привет разработчики,

На этот раз у меня есть очень интересный материал для вас, ребята. Несколько дней назад я получил сложное требование от одного из моих клиентов. динамическое заполнение своей организационной структуры на своем сайте интрасети SharePoint без каких-либо компонентов на стороне сервера /Code. Означает — будет список SharePoint, откуда будут извлекаться данные, и на веб-части (CEWP или OOB WP) необходимо отобразить иерархию. К счастью, в течение нескольких часов я смог интегрировать 2-3 вещи с некоторым кодом javascript/jquery для выполнения этого требования. Вещи, которые необходимо приготовить,

jQuery
Подключаемый модуль jQuery OrgChart – Пожалуйста, ознакомьтесь с техническими артефактами jQuery OrgChart по этому адресу.
Веб-часть редактора контента
CSOM для Javascript в SharePoint
список SharePoint
Подключаемый модуль jQuery Balloon – Если необходимо показать какие-либо дополнительные данные

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

Итак, здесь мы начинаем.

Создайте собственный список SharePoint с такими столбцами, как «Название», «Менеджер», «Назначение». Введите некоторые логические данные, как указано ниже.

Скачайте и разместите Jquery & Организационная диаграмма jQuery файлы подключаемых модулей в папку _layouts улья (см. изображение ниже). Примечание. Когда мы используем метод развертывания решения, нам нужно поместить эти файлы в SP Project, чтобы упаковать его в файл WSP. Здесь мы напрямую копируем файлы в папку _layouts просто для демонстрации. При необходимости вы можете разместить воздушный шар jQuery файл тоже.

3.Создание веб-части редактора контента / редактора скриптов WP — исходный файл скрипта. Сохраните указанный ниже код в текстовый файл и загрузите его в библиотеку SiteAssets. Укажите путь к файлу в CEWP, например «/SiteAssets/ScriptstxtFile.txt», или напрямую используйте этот скрипт в своем клиентском компоненте.

<link rel="stylesheet" href="_layouts/jquery.orgchart.css" /></pre>
<link rel="stylesheet" href="_layouts/jquery-ui-1.10.3.custom.css" />

<script src="_layouts/jquery-1.9.1.js"></script>
<script src="_layouts/jquery-ui-1.10.3.custom.js"></script>
<script src="_layouts/jquery.orgchart.js"></script>
<script src="_layouts/jquery.balloon.js"></script>

<!--This div will be populated with the <ul><li> structure from the SCOM returned objects-->
<div id="left">
</div>
<style>
 div.node.bladerunner {
 background-color: #a4a0d9 !important;
 }

div.node.replicant {
 background-color: #d9ada0 !important;
 }

div.node.deceased {
 background-color: #d9d2a0 !important;
 text-decoration: line-through;
 }

div.node.retired {
 background-color: #d9c0a0 !important;
 text-decoration: line-through;
 }
</style>

<!--Main Org Structure will pupulate under this DIV-->
<div id="content">
 <div id="main">
 </div>
</div>

<script type="text/javascript">

//loading SharePoint Javascript SCOM
 ExecuteOrDelayUntilScriptLoaded(loadStructure, "sp.js");

//calling the executing function
 function loadStructure() {

//Querying SP using SCOM
 var context = new SP.ClientContext.get_current();
 var web = context.get_web();
 var list = web.get_lists().getByTitle("Employee"); //Employee is SP List containing heirarchy data of the Orgnization
 var viewXml="<View><RowLimit>1200</RowLimit></View>";
 var query = new SP.CamlQuery();
 query.set_viewXml(viewXml);
 this.items = list.getItems(query);
 context.load(items, 'Include(Title, Manager,Designation)');
 context.add_requestSucceeded(onLoaded);
 context.add_requestFailed(onFailure);
 context.executeQueryAsync();

function onLoaded() {
 //Adding SCOM return objects to an array
 var tasksEntries = [];
 var itemsCount = items.get_count();
 for (i = 0; i < itemsCount; i++) {
 var item = items.itemAt(i);
 var taskEntry = item.get_fieldValues();
 tasksEntries.push(taskEntry);
 }
 //array's filter function wont work in IE8. Hence GetChildArrayObjects
 //var topHead = tasksEntries.filter(function (item) { return (item.Manager == null) });
 var topHead = GetChildArrayObjects(tasksEntries, null);

/////Logic to create <ul><li>....</li></ul> for jQuery orgChart -- ####Starts Here
 var headName = topHead[0].Title;

var title = topHead[0].Designation + ", Manager :" + topHead[0].Manager;

var listString = "<ul id='organisation'><li class="hide" title="" + headName + "">" + headName;

//Calling the recursive function.getChildNodes
 var childliststring = getChildNodes(tasksEntries, headName, listString);

listString = childliststring + "</li></ul>";

var divForList = document.getElementById('left');
 divForList.innerHTML = listString;
 /////Logic to create <ul><li>....</li></ul> for jQuery orgChart -- ####Ends Here

//Populating OrgChart using Jquery OrgChart Plug in - Basically it reads Created <ul><li> list named 'organisation' and writes a TABLE - DIV structure.
 $("#organisation").orgChart({ container: $("#main"), nodeClicked: onChartNodeClicked });

//enabling balloon for each orgchart block
 for (var i = 0; i < tasksEntries.length; i++) {

$("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
 contents: '<img src ="/Images1/_t/images_jpg.jpg"/></br><ul><li> Designation :' + tasksEntries[i].Designation + '</li><li>Phone# : 123-234-1233</li></ul>'

});

}

}
 //Handled event for node clicked.
 function onChartNodeClicked(node) {
 //If we need to do anything specific when clicking a node.
 }
 function onFailure() {
 alert('script failed');
 }
 }

 //Recursive function to create <ul><li> organization structure.
 function getChildNodes(tasksEntries, headName, liststring) {

//var childs = tasksEntries.filter(function (item) { return (item.Manager == headName) });
 var childs = GetChildArrayObjects(tasksEntries, headName);

if (childs.length > 0) {

liststring = liststring + "<ul>";
 for (var cnt = 0; cnt < childs.length; cnt++) {
 var head = childs[cnt].Title;
 var title = childs[cnt].Designation + ", Manager :" + childs[cnt].Manager;
 liststring = liststring + "<li class="bladerunner" title="" + head + "">" + head;
 liststring = getChildNodes(tasksEntries, head, liststring);
 liststring = liststring + "</li>";
 }

liststring = liststring + "</ul>";
 }

return liststring;
 }

//Alternative function for .filter function to query child objects for a parent in an array
 function GetChildArrayObjects(items, manager) {

var newArray = [];
 for (var i = 0; i < items.length; i++) {
 var item = items[i];
 if (item.Manager == manager) {
 newArray.push(item);
 }
 }

return newArray;
 }

</script>

JQuery OrgChart в основном нуждается в формате

(неупорядоченный список) для заполнения Org-Chart. Поэтому я запрашиваю список SP с помощью SCOM (javascript) и с помощью рекурсивной функции (getChildNodes) создается структура
- . После загрузки этой структуры
  - я вызываю функцию jquery orgchart для заполнения иерархии в другом
    Основные контрольные точки в приведенном выше скрипте:
    - loadStructure () — функция JS использует SharePoint JS SCOM для запроса списка, чтобы получить иерархию «родитель-потомок».
    - GetChildArrayObjects() — это альтернатива JS-функции .filter, поскольку она не поддерживается в IE8.
    - getChildNodes — упомянутая выше рекурсивная функция — которая в основном структурирует неупорядоченный список (см.
      , упомянутый на изображении ниже).
      $(«#organization»).orgChart({ container: $(«#main»), nodeClicked: onChartNodeClicked }); – Эта строка кода jQuery в приведенном выше скрипте фактически считывает
      и создает OrgChart. Пока вы просматриваете приведенный выше код, вы сможете увидеть
      с идентификатором в качестве созданной «организации», которая читается, а организационная диаграмма заполняется в
      «основной»
      После создания orgChart я перебираю
      блока OrgChart в соответствии с его идентификатором, чтобы включить баллон.
      //enabling balloon for each orgchart block for (var i = 0; i < tasksEntries.length; i++) { $("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({ contents: '<img src ="/Images1/_t/images_jpg.jpg"/></br><ul><li> Designation :' + tasksEntries[i].Designation + '</li><li>Phone# : 123-234-1233</li></ul>' });
      Наконец, OrgChart заполняется, как показано ниже. Вы можете увидеть список
      вверху, который может быть сделан видимым = ложным для
      с идентификатором «left» в вышеупомянутом скрипте, отображаемом только для целей тестирования.
      Надеюсь, вам понравилась эта статья. Пожалуйста, дайте мне знать, если возникнут какие-либо проблемы.