Il Client Side Object Model (CSOM) e Javascript

Con SharePoint 2010 è stato introdotto il “Client Side Object Model” come opzione per accedere al “core” di SharePoint. Con SharePoint 2013 il CSOM è stato esteso dando la possibilità agli sviluppatori di accedere anche a servizi come: Enterprise Search; BCS; Social, Manage Metada e molto altro.

Senza dilungarci troppo; può essere utile focalizzarci sulla possibilità di utilizzare il CSOM con un linguaggio “C#” (si parla di “Managed” client object model) o con Javascript o con Silverlight. Quando si fa uso del linguaggio C#; uso le librerie contenute nelle due DLL

1.Microsoft.Sharepoint.Client.dll

2.Microsoft.Sharepoint.ClientRuntime.dll

localizzate nella cartella ISAPI del Front-End; quando utilizzo il Client-Side, faccio uso della libreria Javascript : sp.js; disponibile nella cartella ‘LAYOUTS’ del Front-End.

Il primo dubbio che quindi ci dovrebbe venire è : quando uso Javascript e quando C#?, semplice , Dipende! Dipende dal modello di Hosting della mia SharePoint APP, che ricordiamo essere:

  1. SharePoint Hosted : dove non potendo usare codice server side, c’è poco da fare, uso Javascript.
  2. Provider-Hosted : si possono usare codice server-side e quindi direi che siamo liberi di scegliere.
  3. Autohosted : idem.

Fatta una premessa, doverosa, vediamo come posso implementare i classici metodi CRUD utilizzando la versione Javascript; dove rispetto al caso “managed” con il C# c’è una leggera complessità in più dipendente dal fatto che le chiamate per ‘eseguire’ le operazioni avvengono in modo ‘asincrono’. Come visibile negli esempi il metodo ‘executeQueryAsync’ definisce due ‘delegate’; uno per gestire il caso ‘operazione corretta’ ed un altro per gestire il caso ‘errore’.

Metodi CRUD con il CSOM e Javascript.

Esempio: CRUD su una lista di tipo  ‘Contatti’.

var elencoContatti;

 function AggiungiContatto(cognome,nome,telefono) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(“Contacts”);
ctx.load(list);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var contatto = list.addItem(listItemCreationInfo);
contatto.set_item(“Title”, cognome);
contatto.set_item(“FirstName”, nome);
contatto.set_item(“WorkPhone”,telefono);
contatto.update();
ctx.executeQueryAsync(success, error);
}

    success = function () {
leggiContatti();
}

error = function (sender, args) {
alert(args.get_message());
}

function leggiContatti () {
var ctx = new SP.ClientContext.get_current();
var query = “<View><Query><OrderBy><FieldRef Name=’Title’/><FieldRef Name=’FirstName’/></OrderBy></Query><ViewFields><FieldRef Name=’ID’/><FieldRef Name=’Title’/><FieldRef Name=’FirstName’/><FieldRef Name=’WorkPhone’/></ViewFields></View>”;
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query);
var list = ctx.get_web().get_lists().getByTitle(“Contacts”);
ctx.load(list);
elencoContatti= list.getItems(camlQuery);
ctx.load(elencoContatti, ‘Include(ID,Title,FirstName,WorkPhone)’);
ctx.executeQueryAsync(mostraContatti, error);
},

function mostraContatti(){

var html = [];
html.push(“<table><thead><tr><th>ID</th><th>Nome</th><th>Cognome</th><th>Title</th></tr></thead>”);

var _elencoContatti= elencoContatti.getEnumerator();

while (_elencoContatti.moveNext()) {
var listItem = _elencoContatti.get_current();
html.push(“<tr>”);
html.push(“<td>”);
html.push(listItem.get_item(“ID”));
html.push(“</td>”);
html.push(“<td>”);
html.push(listItem.get_item(“FirstName”));
html.push(“</td>”);
html.push(“<td>”);
html.push(listItem.get_item(“Title”));
html.push(“</td>”);
html.push(“<td>”);
html.push(listItem.get_item(“WorkPhone”));
html.push(“</td>”);
html.push(“</tr>”);
}

html.push(“</table>”);

//Mostro in un Div con ID = displayDiv la tabella HTML
$(‘#displayDiv’).html(html.join(”));
}

function aggiornaContatto() (id, cognome, nome, telefono) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(“Contacts”);
ctx.load(list);
var listItem = list.getItemById(id);
listItem.set_item(“Title”, lname);
A  listItem.set_item(“FirstName”, fname);
listItem.set_item(“WorkPhone”, wphone);
listItem.update();
ctx.executeQueryAsync(success, error);
}

function eliminaContatto (id) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(“Contacts”);
ctx.load(list);
var listItem = list.getItemById(id);
listItem.deleteObject();
ctx.executeQueryAsync(success, error);
}

Annunci

Informazioni su masiciliano

Analista programmatore, seguo da anni con interesse la piattaforma di collaboration 'Sharepoint'; argomento principale del blog.
Questa voce è stata pubblicata in Articoli, Sharepoint APP e contrassegnata con , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...