KeyWeb
1111111111Rating 0.00 (0 Votes)
В SharePoint можно сделать красивый вывод из любых листов будь то листы задач, анонсов, даже кастомных, в решении этой задачи мне помогла JS библиотека SharepointPlus которая позволяет работать с формами, листами и т.п., по факту что нам нужно - получить данные из листа, сгенерировать список, который изначально выглядит не очень красиво:
sp view 2
Архитектура - я не стал привязываться к хардкодингу и для каждой анонс страницы писать одельный скрипт, для этого я определил несколько своих элементов, которые можно разместить на странице, скрипт читает параметры из блока, обрабатывает их, парсит и выводит результат на страницу.

Лист параметров

Параметры выглядят так:

<div id="param-list">
<param target="pwa-test" site="http://server/announces/"/>
</div>

От куда видно ссылку на сайт, который содержит лист с названием pwa-test, который по сути выглядит так:
sp view 3
Данные параметры размещены на индексной странице сайта в Web парте - Content Editor, в месте, где необходимо размещать сами аноансы необходимо через Edit Source разметить блок:

<div id="list-container">
</div>​ ​

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

Привязка скрипта

В свое время я делал свой кастомный MasterPage поэтому скрипты цепляю либо на прямую в него или через динамический скрипт. По факту JS SPPlus зацеплен на прямую, весь остальной код пишу в динамическом:
sp view 4 

Скрипт отображения Анонсов для SharePoint

Добавляем обработчики параметров:
// Count target count elements
function getElemensCount(elementName){
  var mainDiv = $('#param-list');
  return mainDiv.find('param').length;
}

// Check if parametern exist on page
if ($('#param-list').length > 0) {
  console.log("Parameter list exist...");

  // Get current url
  var fullURL = window.location.href;
  console.log(fullURL);

 var num = getElemensCount("#param-list");

  if(num){

    var count;
    for (count = 0; count < num; count++){
      console.log(count);

      runCommand(document.getElementsByTagName("param")[count].getAttribute("site"), document.getElementsByTagName("param")[count].getAttribute("target"));

    }
  }

}

Функция скрипта runCommand

Далее пишем функцию runCommand:

function runCommand(url, target) {

var siteURL = url;

function clearBlock(blockName){
$(blockName).html("");
}

function appnedToBlock(blockName, data) {
// body...
$(blockName).append(data);
}

function stripString(string){
var stripCol = 160;
return string.substring(0, stripCol) + "...";
}

// Show data in console
var list = $SP().list(target,siteURL);
console.log(list);

// Clear div block with jquery
clearBlock("#list-container");

appnedToBlock("#list-container", "<div id='list-anonses'></div>");
appnedToBlock("#list-container", "<div id='list-anonses-detail'></div>");

$SP().list(target,siteURL).get({fields:"Title,Body,Created,Description",orderby:"Test_x0020_Date DESC"}, function(data) {
var html="<ul class='ul-anonses-detail'>",d, title, desc, linkToList, body;
for (var i=data.length; i--;) {
// convert the Created date to a Javascript Date Object
d = $SP().toDate(data[i].getAttribute("Created"));
d = (d.getMonth()+1) + '/' + d.getDate() + '/' + d.getFullYear();

title = data[i].getAttribute("Title");
console.log(title);
linkToList = siteURL+"Lists/" + target.split('-').join('') + "/DispForm.aspx?ID="+data[i].getAttribute("ID");
body = stripString(data[i].getAttribute("Body"));

// Get custom fields - Description, etc...
desc = data[i].getAttribute("Description");
console.log(desc);

if (desc == null){
desc = "";
//
// create html object
html += "<li><a class='title' target='_blank' href="/+ linkToList +">" + title + "</a></br>" + body + "</br><span class='created-date'>Created (" + d + ")</span> <span class='read-more'><a target='_blank' href="/+ linkToList +">&gt;&gt;&gt;</a></span></li>";
}
else {
// create html object
var cutDesc = stripString(desc);
console.log(cutDesc);
html += "<li><a class='title' target='_blank' href="/+ linkToList +">" + title + "</a></br>" + cutDesc + "</br><span class='created-date'>Created (" + d + ")</span> <span class='read-more'><a target='_blank' href="/+ linkToList +">&gt;&gt;&gt;</a></span></li>";
}


}
$("#list-anonses-detail").append(html+'</ul>');
})

}

Основные моменты:
  • getElemensCount - смотрит сколько параметров
  • if(num) - если есть параметр, то используем runCommand
  • appnedToBlock - добавляет в указанный блок, вложенный блок
  • stripString - обрезает строку до нужного кол-ва символов
  • clearBlock - удаляет блок
  • desc == null - если в лист было добавлено поле Description то данные для отображения будут браться от туда

"Прямой" скрипт

При необходимости, скрипт можно на прямую "втыкать" в страницу:

<script type="text/javascript">

var siteURL = "http://site/";>

function fillData(listName, listURL, blockID) {
// Get element from list
$SP().list(listName,listURL).get({fields:"Title,Body,Created,ID",orderby:"Test_x0020_Date DESC"},function(data) {
var html = "<ul>";
for (var i=data.length; i--;)
html += "<li>Title: <a href='"+siteURL+"Lists/"+listName+"/DispForm.aspx?ID="+data[i].getAttribute("ID")+"'>'"+data[i].getAttribute("Title")+"' (ID: "+data[i].getAttribute("ID")+")</a><li>";
$(blockID).append(html+'</ul>');
});
}

function clearBlock(blockName){
$(blockName).html("");
}

function appnedToBlock(blockName, data) {
// body...
$(blockName).append(data);
}

// Show data in console
var list = $SP().list("anonses",siteURL);
console.log(list);

// Clear div block with jquery
clearBlock("#list-container");

appnedToBlock("#list-container", "<div id='list-anonses'></div>");
appnedToBlock("#list-container", "<div id='list-anonses-detail'></div>");
appnedToBlock("#list-container", "<div id='list-tasks'></div>");

fillData("anonses",siteURL, "#list-anonses");

</script>​​​​
<script type="text/javascript">
$('.ul-anonses-detail').easyPaginate({
elementsPerPage: 3
});
</script>

Стиль

Для листа создаем стиль:
.ul-anonses-detail a {
  text-decoration: none;
}

.ul-anonses-detail span.created-date, .ul-anonses-detail span.read-more {
    text-transform: uppercase;
    font-size: 10px;
    color: #ccc;
}

.ul-anonses-detail li {
    list-style-type: none;
    margin-top: 20px;
}


.ul-anonses-detail li a {
    text-transform: uppercase;
}

.ul-anonses-detail li a.title {
    display: block;
    width: 90%;
    border-bottom: 1px solid #ccc;
    padding-right: 30px;
}

Итог

В итоге можно использовать скрипт где угодно, например для вывода новостей на главной или на странице проектов. Данные можно "затягивать" с листов разных коллекций сайтов. Привязывать можно хоть где. У меня получился например вот такой результат:
sp view 1

Добавить комментарий


Обновить
Защитный код

KeyWeb

Сейчас 100 гостей и ни одного зарегистрированного пользователя на сайте

Вверх
Вниз