sharepoint
JavaScript 클라이언트 객체 모델 (JSOM)로 작업하기
수색…
비고
배경
JavaScript 개체 모델은 SharePoint 2010에서 처음 소개되었습니다. 이전에는 서버 쪽 코드 나 전용 웹 서비스를 통해서만 액세스 할 수 있었던 많은 개체가 클라이언트 측에서 노출되었습니다.
SharePoint 페이지에 JavaScript 포함
SharePoint 2013에서는 스크립트 편집기 웹 파트에 JavaScript를 넣을 수 있습니다.
SharePoint 2010에서는 콘텐츠 편집기 웹 파트의 "콘텐츠 링크"속성을 사용하여 포함 된 스크립트가 포함 된 HTML 파일에 연결할 수 있습니다.
객체 참조
SP
네임 스페이스에있는 모든 개체의 생성자, 메서드 및 속성은 SharePoint 2013 클라이언트 개체 모델 참조 에서 설명 합니다 .
SharePoint 2010 JavaScript 클라이언트 개체 모델 참조는 여기에서 사용할 수 있습니다 .
JSOM의 비동기 프로그래밍 패턴
JavaScript 클라이언트 객체 모델을 사용할 때 코드는 일반적으로 다음 패턴을 취합니다.
-
ClientContext
오브젝트를ClientContext
합니다. -
ClientContext
개체를 사용하여 SharePoint 개체 모델의 엔터티 (예 : 목록, 폴더,보기)를 나타내는 개체를 검색합니다. - 객체에 대해 수행 할 명령을 대기열에 넣습니다. 이 지시 사항은 아직 서버로 전송되지 않습니다.
-
load
함수를 사용하여 서버에서 수신 할 정보를ClientContext
에 알려줍니다. -
ClientContext
개체의executeQueryAsync
함수를 호출하여 대기중인 지침을 서버에 보내고 성공 또는 실패시 실행되는 두 가지 콜백 함수를 전달합니다. - 콜백 함수에서 서버에서 반환 된 결과를 사용하십시오.
대안
JSOM의 클라이언트 측 대안으로는 SharePoint의 웹 서비스, REST 끝점 및 .NET 클라이언트 개체 모델이 있습니다.
라이브러리 이름을 사용하여 라이브러리 내용 유형 가져 오기
function getContentTypes(site_url,name_of_the_library){
var ctx = new SP.ClientContext(site_url);
var web = ctx.get_web();
list = web.get_lists().getByTitle(name_of_the_library);
// You can include any property of the SP.ContentType object (sp.js), for this example we are just getting the name
ctx.load(list,'ContentTypes.Include(Name)');
ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
function onQuerySucceeded(sender, args) {
// var list is the one that we used in function "getContentTypes"
var contentTypesEnumerator = (list.get_contentTypes()).getEnumerator();
while (contentTypesEnumerator.moveNext()) {
var contentType = contentTypesEnumerator.get_current();
alert(contentType.get_name());
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
목록에서 항목 삭제
SP.SOD.executeOrDelayUntilScriptLoaded( function(){ deleteItem(1); }, "sp.js");
function deleteItem(id){
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("List Title");
var item = list.getItemById(id);
item.deleteObject();
clientContext.executeQueryAsync(function(){
alert("Item #"+id+" deleted successfully!");
},function(sender,args){alert(args.get_message());});
}
항목 또는 폴더 만들기
목록 항목 만들기
SP.SOD.executeOrDelayUntilScriptLoaded(createItem,"sp.js");
function createItem(){
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("List Title");
var newItem = list.addItem();
newItem.set_item("Title","Example Title");
newItem.update();
clientContext.load(newItem); // only needed to retrieve info from newly created item
clientContext.executeQueryAsync(function(){
var itemId = newItem.get_item("ID");
alert("Item #"+itemId+" Created Successfully!");
},function(sender,args){
alert(args.get_message());
});
}
위의 예제는 다음을 수행하여 목록 항목이 만들어 짐을 보여줍니다.
- 목록 객체의
addItem
메소드를 호출하여 항목 객체를 가져옵니다. - 각 필드 값을 원하는대로 설정하려면 결과 목록 항목 객체에서
set_item
메소드를 호출하십시오. - 목록 항목 객체에서
update
메소드를 호출하여 변경 사항이 커밋됨을 나타냅니다. - 대기중인 명령어를 실행하려면 클라이언트 컨텍스트 객체의
executeQueryAsync
메소드를 호출하십시오.
항목을 만들려면 새 항목 개체를 클라이언트 컨텍스트의 load
메서드에 전달할 필요가 없습니다 . 이 단계는 서버에서 항목의 필드 값을 검색하려는 경우에만 필요합니다.
폴더 만들기
폴더를 만드는 것은 목록에 항목을 추가하는 것과 비슷합니다. 차이점은 먼저 ListItemCreationInformation
개체를 만들고 해당 underlyingObjectType
속성을 SP.FileSystemObjectType.folder
로 설정하고 해당 leafName
속성을 새 폴더의 원하는 이름으로 설정해야한다는 것입니다.
그런 다음 객체는 라이브러리의 addItem
메소드에서 매개 변수로 전달되어 폴더를 만듭니다.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
변경 내용을 커밋하려면 라이브러리가 액세스 된 ClientContext
개체의 executeQueryAsync
메서드를 호출합니다.
아래의 전체 예제는 현재 타임 스탬프를 기반으로 이름을 가진 폴더를 만든 다음 해당 폴더를 모달 대화 상자에서 엽니 다.
SP.SOD.executeOrDelayUntilScriptLoaded(createFolder,"sp.js");
function createFolder(){
var now = new Date();
var timeStamp = now.getYear() + "-" + (now.getMonth()+1) + "-" + now.getDate()
+ "T" + now.getHours()+"_"+now.getMinutes()+" "+now.getSeconds()+"_"+now.getMilliseconds();
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("Library Title");
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(timeStamp);
var newItem = list.addItem(itemCreateInfo);
newItem.update();
clientContext.load(newItem);
var rootFolder = list.get_rootFolder(); // Note: use a list's root folder to determine its server relative URL
clientContext.load(rootFolder);
clientContext.executeQueryAsync(function(){
var itemId = newItem.get_item("ID");
var name = newItem.get_item("FileLeafRef");
SP.UI.ModalDialog.showModalDialog(
{
title: "Folder \""+name+"\" (#"+itemId+") Created Successfully!",
url: rootFolder.get_serverRelativeUrl() + "/" + name
}
);
},function(sender,args){alert(args.get_message());});
}
현재 사용자 정보 얻기
SP.SOD.executeOrDelayUntilScriptLoaded(showUserInfo,"sp.js");
function showUserInfo(){
var clientContext = new SP.ClientContext();
var user = clientContext.get_web().get_currentUser();
clientContext.load(user);
clientContext.executeQueryAsync(function(){
var details = "ID: "+user.get_id()+"\n"+
"Title: "+user.get_title()+"\n"+
"Login: "+user.get_loginName()+"\n"+
"Email: "+user.get_email();
alert(details);
},function(sender,args){alert(args.get_message());})
}
ID로 목록 항목 가져 오기
SP.SOD.executeOrDelayUntilScriptLoaded(myFunction,"sp.js");
function myFunction(){
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("List Title");
var item = list.getItemById(1); // get item with ID == 1
clientContext.load(item);
clientContext.executeQueryAsync(
function(){ // onSuccess
var title = item.get_item("Title");
alert(title);
},
function(sender,args){ // onError
alert(args.get_message());
}
);
}
CAML 쿼리로 목록 항목 가져 오기
기본 예제
SP.CamlQuery 개체의 set_viewXml
메서드를 사용하여 항목을 검색 할 CAML 쿼리를 지정합니다.
SP.SOD.executeOrDelayUntilScriptLoaded(showListItems,"core.js");
function showListItems(){
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("List Title");
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
"<View><Query>" +
"<Where>" +
"<Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">Value</Value></Eq>" +
"</Where>" +
"<OrderBy><FieldRef Name=\"Modified\" Ascending=\"FALSE\"/></OrderBy>" +
"</Query>"+
//"<RowLimit>5000</RowLimit>" +
"</View>");
var items = list.getItems(camlQuery);
clientContext.load(items);
clientContext.executeQueryAsync(function(){
var itemArray = [];
var itemEnumerator = items.getEnumerator();
while(itemEnumerator.moveNext()){
var item = itemEnumerator.get_current();
var id = item.get_item("ID");
var title = item.get_item("Title");
itemArray.push(id + ": " + title);
}
alert("ID: Title\n"+itemArray.join("\n"));
},function(sender,args){alert(args.get_message());});
}
CAML 쿼리 결과 페이징
CAML 조회의 RowLimit
요소를 사용하여 각 조회와 함 2 결과의 서브 세트 만 검색 할 수 있습니다.
목록 항목 컬렉션의 get_listItemCollectionPosition
메서드를 사용하여 현재 위치를 검색 한 다음 SP.CamlQuery 개체의 set_listItemCollectionPosition
메서드에서 해당 값을 매개 변수로 사용하여 다음 결과 묶음을 검색합니다.
SP.SOD.executeOrDelayUntilScriptLoaded(showListItems,"sp.js");
function showListItems(){
var itemArray = [];
var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle("List Title");
var viewXml =
"<View><Query>" +
"<OrderBy><FieldRef Name=\"Modified\" Ascending=\"FALSE\"/></OrderBy>" +
"</Query>"+
"<RowLimit>1</RowLimit>" +
"</View>";
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(viewXml);
var items = list.getItems(camlQuery);
clientContext.load(items);
clientContext.executeQueryAsync(loadResults,showError);
function loadResults(){
var resultsFound = false;
var itemEnumerator = items.getEnumerator();
while(itemEnumerator.moveNext()){
var item = itemEnumerator.get_current();
var id = item.get_item("ID");
var title = item.get_item("Title");
itemArray.push(id + ": " + title);
}
var pos = items.get_listItemCollectionPosition();// <- get position
if(pos !== null){ // <-- position is null when no more results are returned
if(confirm("Results so far: \nID: Title\n"+itemArray.join("\n"))){
camlQuery = new SP.CamlQuery();
camlQuery.set_listItemCollectionPosition(pos);// <- set position for next batch
camlQuery.set_viewXml(viewXml);
items = list.getItems(camlQuery);
clientContext.load(items);
clientContext.executeQueryAsync(loadResults,showError);
}
}else{
alert("Total Results: \nID: Title\n"+itemArray.join("\n")); // <- display when no more results
}
}
function showError(sender,args){
alert(args.get_message());
}
}