수색…


비고

배경

JavaScript 개체 모델은 SharePoint 2010에서 처음 소개되었습니다. 이전에는 서버 쪽 코드 나 전용 웹 서비스를 통해서만 액세스 할 수 있었던 많은 개체가 클라이언트 측에서 노출되었습니다.

SharePoint 페이지에 JavaScript 포함

SharePoint 2013에서는 스크립트 편집기 웹 파트에 JavaScript를 넣을 수 있습니다.

SharePoint 2010에서는 콘텐츠 편집기 웹 파트의 "콘텐츠 링크"속성을 사용하여 포함 된 스크립트가 포함 된 HTML 파일에 연결할 수 있습니다.

객체 참조

SP 네임 스페이스에있는 모든 개체의 생성자, 메서드 및 속성은 SharePoint 2013 클라이언트 개체 모델 참조 에서 설명 합니다 .

SharePoint 2010 JavaScript 클라이언트 개체 모델 참조는 여기에서 사용할 수 있습니다 .

JSOM의 비동기 프로그래밍 패턴

JavaScript 클라이언트 객체 모델을 사용할 때 코드는 일반적으로 다음 패턴을 취합니다.

  1. ClientContext 오브젝트를 ClientContext 합니다.
  2. ClientContext 개체를 사용하여 SharePoint 개체 모델의 엔터티 (예 : 목록, 폴더,보기)를 나타내는 개체를 검색합니다.
  3. 객체에 대해 수행 할 명령을 대기열에 넣습니다. 이 지시 사항은 아직 서버로 전송되지 않습니다.
  4. load 함수를 사용하여 서버에서 수신 할 정보를 ClientContext 에 알려줍니다.
  5. ClientContext 개체의 executeQueryAsync 함수를 호출하여 대기중인 지침을 서버에 보내고 성공 또는 실패시 실행되는 두 가지 콜백 함수를 전달합니다.
  6. 콜백 함수에서 서버에서 반환 된 결과를 사용하십시오.

대안

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());
    });
}

위의 예제는 다음을 수행하여 목록 항목이 만들어 짐을 보여줍니다.

  1. 목록 객체의 addItem 메소드를 호출하여 항목 객체를 가져옵니다.
  2. 각 필드 값을 원하는대로 설정하려면 결과 목록 항목 객체에서 set_item 메소드를 호출하십시오.
  3. 목록 항목 객체에서 update 메소드를 호출하여 변경 사항이 커밋됨을 나타냅니다.
  4. 대기중인 명령어를 실행하려면 클라이언트 컨텍스트 객체의 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());
    }
}


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow