Пример построения организационной диаграммы в SharePoint 2010 / 2013 на JavaScript (часть 1)

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

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

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

В рамках данной минисерии статей я создам пример визуализации иерархических данных из списков SharePoint на JavaScript.

Сразу оговорюсь, что цель - именно в получении данных из списков, и что в постановке задачи не стоит создание организационной структуры предприятия как такового, хотя в редакции SharePoint, обделенной User Profile Services, а именно Foundation можно построить и "заменитель" стандартного функционала старших братьев.

Итак, допустим у нас есть список, в котором представлен перечень, пусть будет, подразделений организации. Подразделения в списке имеют подчиненность один ко многим. Т.е. у подразделений может быть произвольный перечень подчиненных подразделений, а у подчиненного только одно родительское. Естественно, такая связь задается путем lookup'а на этот же список, т.е. атрибута ссылающегося на запись другого подразделения.

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

Приступаем...

Для работы с данными будем использовать SPServices (о данной библиотеке я уже не раз писал, например, вот).

Для визуализации возьмем плагин к jQuery jOrgChart.

jOrgChart умеет превращать такое:

<ul id="org" style="display:none">
   <li>Food
  <ul>
     <li>Beer</li>
      <li>Vegetables
      <ul>
         <li>Pumpkin</li>
         <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
      </ul>
   </li>
   <li>Bread</li>
   <li>Chocolate
      <ul>
         <li>Topdeck</li>
         <li>Reese's Cups</li>
      </ul>
   </li>
   </ul>
   </li>
</ul>

в такое:

А мы, в свою очередь научим его превращать в такое:

Но в рамках следующей статьи. Исходники примера полагаются.

UPD: Продолжение