Questo articolo è il secondo di una mini-serie di articoli sull'interfaccia REST di SharePoint 2013 e KnockoutJs:
- CRUD su liste con i servizi REST di SharePoint 2013 e KnockoutJS - Lettura
- CRUD su liste con i servizi REST di SharePoint 2013 e KnockoutJS - Cancellazione (questo articolo)
- CRUD su liste con i servizi REST di SharePoint 2013 e KnockoutJS - Inserimento
- CRUD su liste con i servizi REST di SharePoint 2013 e KnockoutJS - Modifica
Nel precedente post visto come sfruttare JQuery e KnockoutJs per fare delle query ai servizi REST di SharePoint 2013, leggerne il risultato e stamparlo nella view (nella pagina HTML).
Oggi vedremo come effettuare una cancellazione, partendo dall'esempio che abbiamo già visto le scorse settimane.
Bene, integriamo quanto già scritto all'interno della nostra view, con l'inserimento di un pulsante per la cancellazione di un elemento della tabella. Per questo sfruttiamo il binding "click" di KnockoutJs e scegliamo di richiamare un metodo del nostro view model che andremo poi a definire in un secondo momento.
<tbody data-bind="foreach: { data: contacts }">
<tr>
<td>
<span data-bind="text: Title"></span>
</td>
<td>
<span data-bind="text: FirstName"></span>
</td>
<td>
<span data-bind="text: Email"></span>
</td>
<td>
<a href="#">EDIT</a> | <a href="#" data-bind="click: $root.deleteContact">DELETE</a>
</td>
</tr>
</tbody>
Ho omesso le parti di codice che abbiamo già visto nel precedente post, così da concentrarci sulle nuove.
Il binding "click" direi che è auto-esplicativo. Lega il metodo che viene specificato come valore, all'evento "onClick" che viene scatenato dal browser al click sull'elemento HTML desiderato (nel nostro caso abbiamo utilizzato un'anchor, ma nessuno ci vieta di farlo su un "div", un "li" o altro).
La funzione legata al binding "click" è una funzione che dovremmo creare all'interno del nostro view model e alla quale verrà passato poi l'intero model relativo all'elemento che si è deciso di eliminare.
La cosa cui fare attenzione è l'utilizzo dell'oggetto speciale "$root". Questo oggetto rappresenta l'istanza del nostro view model che è stato dato in pasto a KnockoutJs ed è fondamentale per uscire dal contesto in cui ci si trova, quando si cerca di richiamare una funzione del view model all'interno di un ciclo foreach.
Senza l'utilizzo di "$root", era come se chiamassimo la funzione "deleteContact" su un oggetto di tipo "contact" che, ovviamente, non ha definito quella funzione.
Passiamo ora all'operazione di cancellazione vera e propria, scrivendo la relativa action all'interno del nostro view model.
self.deleteContact = function (data, event) {
var selectedId = data.Id();
$.ajax({
url: self.webUrl.SPItemByIdFromList('Contacts', selectedId),
type: 'POST',
contentType: self.requestContentType,
headers: {
'content-type': self.requestContentType,
'Accept': self.requestContentType,
'X-RequestDigest': self.digest,
'X-HTTP-Method': 'DELETE',
'IF-MATCH': '*'
},
success: function (data) {
//reload data self.read();
//or remove item from observable collection, to update the UI //self.contacts.remove(data); },
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
};
L'action per la cancellazione ha un parametro che, come dicevamo, rappresenta il model dell'elemento selezionato e che è stato deciso di cancellare (io l'ho chiamato "data", ma non ci sono vincoli nella scelta del nome di questa variabile, JavaScript power!). E' compito di KnockoutJs farmi ritornare questo oggetto correttamente valorizzato al click su una riga creata dal binding foreach.
Questo significa che abbiamo accesso a tutte le proprietà di tale oggetto, che possiamo leggere tramite una chiamata a funzione (quindi grazie all'utilizzo delle parantesi tonde).
var selectedId = data.Id();
La lettura dell'Id dell'elemento selezionato è fondamentale per dire a SharePoint che elemento cancellare dalla nostra lista di contatti.
Rispetto alla sintassi che abbiamo visto per fare una lettura tramite i servizi REST di SharePoint 2013, se vogliamo fare una cancellazione, dobbiamo effettuare una chiamata HTTP che segua queste regole:
- La chiamata deve essere fatta alla URL che rappresenta l'elemento da cancellare (specificando quindi il suo id):
- /_api/lists/getBtyTitle(Contacts)/items(1) URL per recuperare l'elemento con ID = 1
- La chiamata deve essere in POST
- Tra gli header della chiamata, dobbiamo passare:
- X-RequestDigest
- X-HTTP-Method = DELETE
- IF-MATCH
Il parametro X-HTTP-Method=DELETE dice a SharePoint che quell'elemento va cancellato.
Il parametro IF-MATCH serve invece per gestire la concorrenza e il versioning degli elementi. Nell'esempio labbiamo messo IF-MATCH='*', che significa di effettuare l'operazione di delete in qualsiasi caso, anche nel caso in cui il server riscontra dei conflitti. Come se fosse un force.
Il resto dell'esempio, nel caso di successo di questa operazione di cancellazione, effettua l'intero reload della nostra lista di contatti.
Potevamo anche solo togliere l'elemento cancellato dalla lista di contatti in memoria (che è il pezzo di codice che ho lasciato commentato), ma io consiglio sempre di effettuare un reload dei dati, sopratutto quando questi dati possono essere stati modificati da altri utenti.
Potete vedere l'esempio in funzione scaricando il progetto d'esempio che ho creato:
- D4S.SP2013.FrontEndCRUD.zip (1.8 MB)
