Szukaj…


Uwagi

tło

JavaScript Object Model został wprowadzony w SharePoint 2010. Udostępnia po stronie klienta wiele obiektów, które wcześniej były dostępne tylko za pośrednictwem kodu po stronie serwera lub poprzez dedykowane usługi sieciowe.

Osadzanie JavaScript na stronach SharePoint

W SharePoint 2013 możesz umieścić swój JavaScript w części web Script Editor.

W SharePoint 2010 możesz użyć właściwości „content content” składnika Web Part Content Editor, aby połączyć się z plikiem HTML zawierającym osadzony skrypt.

Odniesienie do obiektu

Konstruktory, metody i właściwości wszystkich obiektów znalezionych w przestrzeni nazw SP są udokumentowane tutaj w odwołaniu do modelu obiektu klienta SharePoint 2013.

Odwołanie do modelu obiektowego klienta JavaScript SharePoint 2010 jest dostępne tutaj .

Wzorzec programowania asynchronicznego JSOM

Podczas korzystania z modelu obiektowego klienta JavaScript kod na ogół przyjmuje następujący wzorzec:

  1. Uzyskaj obiekt ClientContext .
  2. Użyj obiektu ClientContext aby pobrać obiekty reprezentujące byty w modelu obiektowym SharePoint, takie jak listy, foldery, widoki.
  3. Kolejkuj instrukcje do wykonania względem obiektów. Te instrukcje nie są jeszcze przesyłane do serwera.
  4. Użyj funkcji load aby powiedzieć ClientContext jakie informacje chcesz otrzymać z serwera.
  5. Wywołaj funkcję ClientContext obiektu executeQueryAsync aby wysłać instrukcje umieszczone w kolejce na serwer, przekazując dwie funkcje zwrotne w celu uruchomienia lub niepowodzenia.
  6. W funkcji wywołania zwrotnego pracuj z wynikami zwróconymi z serwera.

Alternatywy

Alternatywy po stronie klienta do JSOM obejmują usługi sieciowe SharePoint, punkty końcowe REST i model obiektowy klienta .NET .

Pobieranie typów zawartości biblioteki za pomocą nazwy biblioteki

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

Usuń element z listy

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

Tworzenie elementów lub folderów

Tworzenie elementów listy

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

Powyższy przykład pokazuje, że element listy jest tworzony przez wykonanie następujących czynności:

  1. Wywołaj metodę addItem obiektu listy, aby uzyskać obiekt elementu
  2. Wywołaj metodę set_item na wynikowym obiekcie elementu listy, aby ustawić każdą wartość pola zgodnie z potrzebami
  3. Wywołaj metodę update obiektu obiektu listy, aby wskazać, że zmiany mają zostać zatwierdzone
  4. Wywołaj metodę executeQueryAsync obiektu kontekstu klienta, aby wykonać instrukcje umieszczone w kolejce

Należy pamiętać, że nie trzeba przekazywać nowego obiektu elementu do metody load kontekstu klienta, aby utworzyć element. Ten krok jest konieczny tylko wtedy, gdy chcesz odzyskać dowolną wartość pola elementu z serwera.

Tworzenie folderów

Tworzenie folderu jest podobne do dodawania elementu do listy. Różnica polega na tym, że najpierw trzeba stworzyć ListItemCreationInformation obiekt i ustawić jego underlyingObjectType właściwość SP.FileSystemObjectType.folder , a jego leafName nieruchomość na żądaną nazwę nowego folderu.

Obiekt jest następnie przekazywany jako parametr w metodzie addItem w bibliotece w celu utworzenia folderu.

// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...

Aby zatwierdzić zmianę, executeQueryAsync metodę ClientContext obiektu ClientContext przez który uzyskano dostęp do biblioteki.

Pełny przykład poniżej tworzy folder o nazwie opartej na bieżącym znaczniku czasu, a następnie otwiera ten folder w modalnym oknie dialogowym.

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

Uzyskaj bieżące informacje o użytkowniku

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

Uzyskaj element listy według identyfikatora

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

Uzyskaj elementy listy według zapytania CAML

Podstawowy przykład

Użyj set_viewXml metodę obiektu SP.CamlQuery określić kwerendy CAML do pobierania przedmiotów.

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

Stronicowanie wyników zapytania CAML

Możesz skorzystać z elementu RowLimit w zapytaniu CAML, aby pobrać tylko podzbiór wyników dla każdego zapytania.

Użyj metody get_listItemCollectionPosition kolekcji elementów listy, aby pobrać bieżącą pozycję, a następnie użyj tej wartości jako parametru w metodzie set_listItemCollectionPosition obiektu set_listItemCollectionPosition , aby pobrać następną partię wyników.

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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow