Клиентская модель данных
В некоторых ситуация во время разработки не хочется или не требуется перезагрузка текущей страницы, но при этом необходимо получать данных из списков или в общем случаи использовать стандартные объекты SharePoint. В этом случаи необходимо сделать так чтобы код выполнялся на стороне клиента (JavaScript). И нам поможет клиентская модель данных (Clinet Object Model). Возможным "недостатком" может оказаться то, что скрипт исполняется под правами текущего пользователя (т.е. его нельзя выполнить под другим более привелигированным) и есть ограничения использования его внутри текущего семейства (т.е. нельзя взять информацию из другого семейства).
Конечно же, это будет полезно, когда добавляется функционал в Риббон (Ribbon), особенно функционал связанный с элементами и списками.
Попробуем сделать простой пример
1. Создадим страницу приложения "COM.aspx"
2. Создадим список с полями (как это можно сделать из проекта см. здесь) и добавим данные в него
<Fields>
<Field Type="Text" DisplayName="Поле с
текстом" ID="{2D115F85-E0C0-496F-B16A-1708FF628BB2}" StaticName="tField" Name="tField"/>
<Field Type="DateTime" Format="DateOnly" DisplayName="Поле с
датой" ID="{7CF0B89D-60BC-4799-9657-F34DC44C1987}" StaticName="dField" Name="dField"/>
</Fields>
3. В разметку страницы приложения добавим следующее
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"
></script>
<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadContext, 'sp.js');
function
loadContext() {
var
context = SP.ClientContext.get_current(); // Получаем текущий контекст
var
list = context.get_web().get_lists().getByTitle('demolist');
// По названию выбираем необходимый список
// var list = ctx.get_web().get_lists().getById('<%# listGUID %>'); //Если известен GUID можно так
var
camlQuery = SP.CamlQuery.createAllItemsQuery(); //
Создаём CAML запрос на все элементы
items = list.getItems(camlQuery);
// Заправшивам элементы
context.load(items, 'Include(ID,tField,dField)'); // Указываем какие столбцы нам необходимо получить
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFail)); // Делаем асинхронный запрос на получение загруженных данных
}
function onSuccess() { //
Обработка данных, если они были получены удачно
var enumerator = items.getEnumerator(); // Получаем все загруженные элементы
var resultDiv
= document.getElementById('resultDiv')
while (enumerator.moveNext()) { //
Перебираем каждый элемент по отдельности
var listItem
= enumerator.get_current();
var
divValue = $("#resultDiv").html() +
'<br/> <b>' + listItem.get_item('tField') + '</b>
' + listItem.get_item('dField');
resultDiv.innerHTML =
divValue; // или через JQuery:
$("#resultDiv").html(divValue);
}
}
function onFail(sender, args) { // Обработка ошибок в получении данных
alert('Ошибка получения данных:' +
args.get_message());
}
</script>
<div id="resultDiv"></div>
4. В результате загрузится страница, которая отобразит все значения двух столбцов (tField, dField) указанного нами списка.
Теперь немного немного будем усложнять
1. Чтобы получать не все элементы, изменим CAML запрос
var
camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef
Name=\'ID\'/><Value Type=\'Number\'>2</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
items = list.getItems(camlQuery);
2. Если список находится на другом сайте, но того же семейства, то изменим получение контекста.
var
context = new SP.ClientContext('/demo');
Далее будет пример получение имён пользователей и имени сайта:
<script language="javascript"
type="text/javascript">
var
curUser;
var
admUser;
var
web;
ExecuteOrDelayUntilScriptLoaded(loadContext, 'sp.js');
function
loadContext() {
var
context = SP.ClientContext.get_current(); // Получаем текущий контекст
web = context.get_web(); //
Получаем текущего пользователя
context.load(web);
curUser = context.get_web().get_currentUser(); //
Получаем текущего пользователя
context.load(curUser);
admUser = context.get_web().ensureUser('Администратор');
// Получаем конкретного пользователя
context.load(admUser);
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFail)); // Делаем
асинхронный запрос на получение загруженных данных
}
function onSuccess() { //
Обработка данных, если они были получены удачно
var resultDiv
= document.getElementById('resultDiv')
resultDiv.innerHTML =
curUser.get_title() + ' ' + admUser.get_title()
+ ' ' + web.get_title();
}
function onFail(sender, args) { // Обработка ошибок в получении данных
alert('Ошибка получения данных:' +
args.get_message());
}
</script>
Логично также показать как добавлять и устанавливать значения в списках:
<script language="javascript"
type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadContext, 'sp.js');
function
loadContext() {
var
context = SP.ClientContext.get_current(); // Получаем текущий контекст
var
list = context.get_web().get_lists().getByTitle('demolist');
// По названию выбираем необходимый список
// Изменим элемент
var
item = list.getItemById(1);
item.set_item('tField', 'changed');
item.update();
//Удалим элемент
item = list.getItemById(1);
item.deleteObject();
//Добавим элемент
var
itemCreateInfo = new
SP.ListItemCreationInformation();
var
newlistItem = list.addItem(itemCreateInfo);
newlistItem.set_item('tField', 'new');
newlistItem.update();
//Добавим папку
//Добавим папку
var
folderCreateInfo = new
SP.ListItemCreationInformation(); folderCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
folderCreateInfo.set_leafName('MyNewFolder');
var
newlistFolder = list.addItem(folderCreateInfo);
newlistFolder.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFail)); // Делаем асинхронный запрос на получение загруженных данных
}
function onSuccess() { //
Обработка данных, если они были получены удачно
alert('Элемент обработаны');
}
function onFail(sender, args) { // Обработка ошибок в получении данных
alert('Ошибка обработки данных:' +
args.get_message());
}
</script>
Рассмотрим как можно добавить файл в библиотеку, указанный пользователей
<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadContext, 'sp.js');
function
loadContext() {
var
context = SP.ClientContext.get_current();
var
list = context.get_web().get_lists().getByTitle('SiteAssets');
var
currentUrl = window.location.host;
var
fileCreateInfo = new
SP.FileCreationInformation();
fileCreateInfo.set_url(currentUrl
+ '/SiteAssets/phote.jpg');
fileCreateInfo.set_overwrite(true);
fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
var
fileInput = document.getElementById("upload");
if
(fileInput.files.length > 0) {
var
phote = fileInput.files[0];
var
reader = new FileReader();
reader.onload = function (event) {
var
dataUri = event.target.result,
img = document.createElement("img");
img.src = dataUri;
document.body.appendChild(img);
};
reader.onerror = function (event) {
console.error("Файл не прочитался! Code " + event.target.error.code);
};
reader.readAsDataURL(phote);
setTimeout(function () {
var
arr = convertDataURIToBinary(reader.result);
for
(var i = 0; i < arr.length; ++i) {
fileCreateInfo.get_content().append(arr[i]);
}
this.newFile
= list.get_rootFolder().get_files().add(fileCreateInfo);
context.load(this.newFile);
context.executeQueryAsync(onSuccess, onFail);
}, 1000);
}
}
function onSuccess() { //
Обработка данных, если они были получены удачно
alert('Файл добавлен');
}
function onFail(sender, args) { // Обработка ошибок в получении данных
alert('Ошибка обработки данных:' +
args.get_message());
}
function
convertDataURIToBinary(dataURI) {
var
BASE64_MARKER = ';base64,';
var
base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var
base64 = dataURI.substring(base64Index);
var
raw = window.atob(base64);
var
rawLength = raw.length;
var
array = new Uint8Array(new
ArrayBuffer(rawLength));
for
(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
</script>
Комментариев нет:
Отправить комментарий