Zoeken…


Opmerkingen

Achtergrond

Het JavaScript Object Model is geïntroduceerd in SharePoint 2010. Aan de clientzijde zijn veel van de objecten zichtbaar die voorheen alleen toegankelijk waren via server-side code of via speciale webservices.

JavaScript insluiten in SharePoint-pagina's

In SharePoint 2013 kunt u uw JavaScript in een webonderdeel van Script Editor plaatsen.

In SharePoint 2010 kunt u de eigenschap "contentlink" van een webonderdeel Content Editor gebruiken om te linken naar een HTML-bestand dat uw ingesloten script bevat.

Object referentie

De constructors, werkwijzen en eigenschappen van alle objecten in de SP naamruimte worden beschreven in de SharePoint 2013 cliëntobject model en hier .

De referentie van het SharePoint 2010 JavaScript-clientobjectmodel is hier beschikbaar.

Asynchroon programmeerpatroon van JSOM

Bij het gebruik van het JavaScript-clientobjectmodel heeft code doorgaans het volgende patroon:

  1. Verkrijg een ClientContext object.
  2. Gebruik het ClientContext object om objecten op te halen die entiteiten in het SharePoint-objectmodel vertegenwoordigen, zoals lijsten, mappen en views.
  3. Wachtrij-instructies die tegen de objecten moeten worden uitgevoerd. Deze instructies worden nog niet naar de server verzonden.
  4. Gebruik de load om ClientContext te vertellen welke informatie u van de server wilt ontvangen.
  5. Roep de ClientContext object executeQueryAsync functie om de wachtrij staan instructies te sturen naar de server, langs twee callback-functies uit te voeren op het succes of falen.
  6. Werk in de callback-functie met de resultaten die door de server zijn geretourneerd.

alternatieven

Alternatieven aan de clientzijde voor de JSOM zijn de webservices van SharePoint, REST-eindpunten en het .NET- clientobjectmodel.

Bibliotheekinhoudstypen verkrijgen met behulp van de bibliotheeknaam

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

Verwijder een item in een lijst

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

Items of mappen maken

Lijstitems maken

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

Het bovenstaande voorbeeld laat zien dat een lijstitem wordt gemaakt door het volgende uit te voeren:

  1. Roep de addItem methode van een addItem aan om een addItem te krijgen
  2. Roep de methode set_item op het resulterende lijstitemobject aan om elke veldwaarde naar wens in te stellen
  3. Roep de update op het lijstitemobject aan om aan te geven dat de wijzigingen moeten worden doorgevoerd
  4. Roep de methode executeQueryAsync van het clientcontextobject aan om de instructies in de wachtrij uit te voeren

Merk op dat u niet nodig om het nieuwe item object doorgeven aan de klant de context van load methode om het item te maken. Die stap is alleen nodig als u de veldwaarden van het item van de server wilt ophalen.

Mappen maken

Een map maken lijkt op het toevoegen van een item aan een lijst. Het verschil is dat men eerst een ListItemCreationInformation object moet maken en zijn underlyingObjectType eigenschap moet SP.FileSystemObjectType.folder op SP.FileSystemObjectType.folder en de eigenschap leafName op de gewenste naam van de nieuwe map.

Het object wordt vervolgens doorgegeven als parameter in de methode addItem in de bibliotheek om de map te maken.

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

Om de wijziging door te voeren, roept u de methode executeQueryAsync van het ClientContext object waarmee de bibliotheek is geopend.

Het volledige voorbeeld hieronder maakt een map met een naam op basis van de huidige tijdstempel en opent die map vervolgens in een modaal dialoogvenster.

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

Ontvang huidige gebruikersinformatie

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

Ontvang een lijstitem op 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());
        }
    );
}

Lijstitems ophalen via CAML-zoekopdracht

Basis voorbeeld

Gebruik de methode set_viewXml van het SP.CamlQuery-object om een CAML-query op te geven om items op te halen.

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

Oproepen van de resultaten van een CAML-zoekopdracht

U kunt profiteren van het RowLimit element in een CAML-query om bij elke query slechts een subset resultaten op te halen.

Gebruik de methode get_listItemCollectionPosition van een lijstitemverzameling om de huidige positie op te halen en gebruik vervolgens die waarde als parameter in de methode set_listItemCollectionPosition een SP.CamlQuery-object om de volgende batch met resultaten op te halen.

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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow