Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni HTML5

Aggiunta di funzioni HTML5 di trascinamento della selezione agli elenchi SharePoint

Andrey Markeev

Scaricare il codice di esempio

Microsoft SharePoint è una piattaforma di impresa con una storia lunga e vasta varietà di caratteristiche, ed è per questo che non può reagire sempre abbastanza rapidamente a seguire le tendenze emergenti di tecnologia Web.Nonostante un'adozione vasta impresa di SharePoint e un grande sforzo per fornire un ampio numero di caratteristiche, SharePoint ritarda ancora dietro i moderni prodotti CMS in termini di interfacce utente coinvolgente, come HTML5 e CSS3.

A mio parere, HTML5 non è solo una nuova tecnologia calda, ma veramente ha molti vantaggi pratici: è facile, conveniente e ricco — e è supportato, più o meno, da tutti i browser moderni (tra cui il browser del dispositivo mobile).Inoltre, HTML5 e JavaScript sono sempre principali tecnologie per desktop di programmazione in Windows.

Così HTML5 merita sicuramente il suo posto di SharePoint per rendere portali molto più facile da utilizzare.E migliorare le interfacce di SharePoint può davvero aiutare gli utenti aziendali permettendo loro di lavorare meglio e più velocemente.

Purtroppo, SharePoint non ha alcuna bontà HTML5 incorporato, ma quello hanno è grande flessibilità.In questo articolo, ho intenzione di dimostrare quanto sia facile per aggiungere il supporto drag-and-drop di HTML5 in SharePoint — e liscia come può fare l'interfaccia standard, come mostrato nella Figura 1.

Figura 1 Drag and Drop in SharePoint

Per implementare questo, verrà utilizzato uno dei blocchi di costruzione SharePoint essenziali, che è anche uno degli strumenti preferiti SharePoint — il XsltListViewWebPart e le sue trasformazioni XSL (vedere la pagina di MSDN Library al bit.ly/wZVSFx per i dettagli).

Perché non una Custom Web Part?

Come sempre, quando si tratta di implementazione, SharePoint offre una vasta gamma di possibilità, e ha estremamente importanti per prendere quello che vi serviranno migliori.

Per la sfida di drag-and-drop di HTML5, considerando che trascinare e rilasciare è principalmente per la gestione dei dati, SharePoint molti sviluppatori preferirebbero probabilmente per costruire una Web Part personalizzate, che in questo caso si comporta proprio come un normale sito Web ASP.NET control: i dati sono memorizzati in un elenco di SharePoint standard, recuperati tramite il modello a oggetti o controllo SPDataSource e resi con l'aiuto di markup ASCX e ASP.NETTI controlli.

Pianura chiaro, semplice,...ma la scelta migliore?

Due anni fa che ho pensato così.Oggi, io preferirei personalizzare XsltListViewWebPart utilizzando le trasformazioni XSL.Perché ha fatto cambiare idea?

A partire da SharePoint 2010, quasi tutti i tipi di visualizzazioni elenco (con la sola eccezione dei calendari) sono visualizzati tramite questa Web Part molto.Provate a immaginare: tutti questi tipi di dati, tutti questi punti di vista differenti e stili e tipi di elenco, tutta questa grande varietà di dati viene eseguito il rendering utilizzando XsltListViewWebPart e le sue trasformazioni XSL.Esso è uno strumento flessibile e potente.

Se si decide di saltare dentro e costruire il proprio Web Part personalizzate per eseguire il rendering alcuni tag HTML5 per visualizzazione dati dei elenco, perderai tutte le funzionalità incorporate.E in base alla mia esperienza, che è una perdita enorme.A proposito, non ho visto una sola parte Web personalizzato ancora che non ha, alla fine meno, per attuare la metà delle funzionalità out-of-the-box XsltListViewWebPart.

Così, il mio piano è quello di riutilizzare le funzionalità esistenti, piuttosto che creare una simile Web Part personalizzate che probabilmente sarebbe molto peggio in termini di flessibilità e potenza.

In realtà, XsltListViewWebPart include un sacco di funzioni utili.Esso è integrato in SharePoint Designer, esso supporta tutte le possibili connessioni Web Part e visualizza correttamente tutti i tipi di dati di SharePoint.Esso supporta il raggruppamento, subtotali, paginazione, elemento di menu, modifica in linea, elemento selezioni, indicatori di presenza e più.Ha un'interfaccia Ribbon contestuale, fornisce un'interfaccia utente per l'ordinamento e filtraggio, offre alcuni stili di visualizzazione di base e molto altro ancora.In somma, XsltListViewWebPart ha un grande molte funzioni utili che sarebbero molto difficili da implementare nuovamente utilizzando l'approccio Web Part personalizzata.

XsltListViewWebPart

XsltListViewWebPart fornisce molti punti di integrazione per gli sviluppatori: un'interfaccia a livello di codice, un'interfaccia CAML e, naturalmente, le trasformazioni XSL in collaborazione con le associazioni di parametro.E non dimenticate, tutti questi oggetti e proprietà hanno anche loro rappresentazioni nel modello a oggetti Client, così si può accedere a vostro XsltListViewWebPart anche da JavaScript o Silverlight.

Quindi, XsltListViewWebPart è davvero un potente strumento.Vero, tutto questo XML specifici di SharePoint (o XSLT) sembra un po ' paura a colpo d'occhio iniziale, ma ci sono alcuni "life hacks" intenzione di mostrare che vi aiuteranno a puzzle esso.

Lo Scenario

Prima tuffarsi i dettagli di implementazione, permettetemi di descrivere lo scenario globale.

Che cosa ho intenzione di fare è iniettare HTML5 trascinare e rilasciare in visualizzazioni elenco SharePoint per consentire agli utenti di trascinare le cellule da una sola lista a un altro elenco.Il mio esempio utilizzerà un elenco delle attività e una lista di esecutori, così il Project Manager può facilmente assegnare e riassegnare attività, trascinando esecutori di celle di elenco di compiti corrispondenti.

Come sapete, HTML5 introduce diversi nuovi attributi per il trascinamento della selezione, la più importante delle quali è l'attributo "trascinabile".Ci sono anche una serie di eventi per la gestione delle varie fasi del processo di drag-and-drop.Funzioni del gestore per questi eventi possono essere collegate tramite attributi corrispondenti, ad esempio "ondragstart," "ondragend" e così via.(Per ulteriori informazioni, leggere la bozza di specifica di World Wide Web Consortium [W3C] HTML5, capitolo 7.6, a bit.ly/lNL0FO.)

Per il mio esempio, questo significa che solo bisogno di utilizzare XSLT per aggiungere alcuni attributi di base a determinate celle della visualizzazione elenco e probabilmente alcuni attributi aggiuntivi personalizzati per fissare i valori dei dati (che saranno trasmesso mediante trascinamento).Alla fine, sarà necessario fornire il corrispondente codice JavaScript per le funzioni del gestore.

Primi passi

Bisogno di due elenchi.Riesco a creare un elenco delle attività dal template standard di compiti o appena posso creare un elenco personalizzato e aggiungere alcune colonne, tra cui una colonna obbligatoria "Assegnato A" sito.Creare un secondo elenco, esecutori testamentari, come un elenco personalizzato, aggiungendo "esecutore" come una colonna di tipo "Persona o gruppo," rendendo obbligatori, indicizzata e unico.

La lista di esecutori dovrebbe visualizzare solo i nomi utente; quindi in realtà non ha bisogno della colonna "Title" standard.Per nascondere questa colonna, io per visualizzare le impostazioni, abilitare la gestione dei tipi di contenuto e poi andare al tipo di contenuto "Item", fare clic sulla colonna "Title" e rendere la colonna nascosta, come mostrato nella Figura 2.

Nella figura 2, rendendo la colonna Title nascosta nelle impostazioni elenco di SharePoint

Ho riempito queste liste con dati di esempio e quindi creato una pagina Web Part per mio cruscotto, dove ho aggiunto queste liste-by-side (attività sulla sinistra ed esecutori sulla destra), come illustrato nel Figura 3.

Figura 3 aggiungendo gli elenchi al cruscotto di SharePoint

OK, ora ho le liste e ho i dati.Ora è il momento per l'effettiva implementazione della funzionalità di drag-and-drop.

SharePoint Designer

Microsoft SharePoint Designer è uno strumento completamente gratuito per lo sviluppo rapido di applicazioni di SharePoint.SharePoint 2010 è notevolmente migliorata rispetto a SharePoint 2007 e ora è estremamente utile, anche per gli sviluppatori.L'idea è che è possibile utilizzare la GUI di SharePoint Designer per generare alcuni davvero complesso codice XSLT e poi basta copiare e incollare il codice generato nel vostro progetto di Visual Studio, invece di scrivere a mano il soggetto a errore di battitura e non sempre ben documentati XML/XSLT.Io uso spesso questo trucco in progetti reali e, vi prometto, che fa risparmiare un sacco di tempo.

Apro SharePoint Designer e passare alla pagina dashboard creato in precedenza.Io selezionare una cella nella colonna Assigned To (pulsante destro del mouse e scegliere Seleziona | Cella).Ora, la magia: nella barra di stato, vedo il percorso per il modello XSL (e il corrispondente tag HTML all'interno di questo modello) che è responsabile per la visualizzazione di questa particolare cella (vedere Figura 4).

Figura 4 il percorso per il modello XSL corrente in SharePoint Designer

Questa informazione può essere molto utile per determinare quale modello XSL per eseguire l'override per modificare il markup della cella.Potete trovare il codice originale per i modelli nella cartella 14/TEMPLATE/layout/XSL e utilizzarlo nei propri file XSLT o in <Xsl> Tag della XsltListViewWebPart.

Ma non ho bisogno di affrontare questi file XSLT enormi e complicati per raggiungere il mio obiettivo.Invece, è possibile utilizzare la funzionalità formattazione condizionale SharePoint Designer, che è stata progettata per evidenziare alcune righe o celle con formattazione speciale, in base alle condizioni particolari.Non hai bisogno di alcune abilità speciali per utilizzare questa funzionalità; la GUI rende facile.Ma dietro le quinte, si è tutti implementato con XSLT.Così, SharePoint Designer include un tipo di generatore di XSLT grafici pronti all'uso e ho intenzione di usarlo ora per le mie esigenze.

I selezionare una cella, fare clic sul pulsante formattazione condizionale sulla barra multifunzione e quindi selezionare il formato di colonna, come mostrato nella Figura 5.

Figura 5 l'impostazione SharePoint Designer la formattazione condizionale

Successivamente, creare una condizione improbabile, ID uguale a zero, come mostrato nella Figura 6.

Nella figura 6 la finestra di dialogo Formattazione condizionale in SharePoint Designer

Poi clicca sul pulsante Set stile e selezionare alcuni stile casuale (come ad esempio "text-decoration: sottolineatura").Premo OK e passare alla scheda visualizzazione codice, dove individuare il codice generato; è, naturalmente, all'interno di <Xsl> Tag del controllo XsltListViewWebPart.

Trasformazioni XSL

Ora sono pronto per modificare il markup delle cellule "Assegnato A".La colonna "Assegnato A" è "accettore di dati" dove potrai trascinare esecutori testamentari, quindi ho bisogno di fornire "ondragover", "ondragenter," attributi "ondragleave" e "ondrop", che punteranno alle corrispondenti funzioni del gestore eventi JavaScript.

Il codice generato da SharePoint Designer nel precedente paragrafo contiene il modello XSL con la firma seguente:

<xsl:template name="FieldRef_printTableCell_EcbAllowed.AssignedTo"
  match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed"
  ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">

Come sapete, modelli di XSL possono chiamare vicenda, dal nome o dalla condizione. Il primo tipo di chiamata viene eseguito utilizzando il "xsl: Call-modello" elemento e di molto simile a una chiamata di funzione — come quello che sarebbe utilizzare in c#, ad esempio.

La seconda opzione è preferibile e molto più flessibile: utilizzando il "xsl: apply-templates" elemento, è possibile specificare la modalità e il parametro (che è selezionato usando XPath, quindi in realtà esso può contenere molti elementi), senza specificare alcun nome di modello particolare. Per ogni elemento del parametro, il modello corrispondente sarà abbinato utilizzando l'attributo di "incontro". Si può pensare di questo approccio come qualcosa di simile a overload in c#.

Come può vedere nel codice precedente, questo modello corrisponderà elementi "FieldRef", dove l'attributo Name è uguale a "AssegnatoA". Inoltre, l'attributo "modalità" di xsl corrispondente: chiamata applica modello deve essere uguale a "printTableCellEcbAllowed". Quindi, questo modello è essenzialmente un sovraccarico per la funzione standard che visualizza i valori dei campi. E questo overload corrisponderanno solo i valori "Assegnato A" dei campi.

Ora diamo un'occhiata a ciò che è all'interno del modello, come mostrato nella Figura 7 (parte del codice è stato rimosso per chiarezza).

Figura 7 all'interno del modello XSL

<xsl:template match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed" ...>
  <xsl:param name="thisNode" select="."/>
  <xsl:param name="class" />
  <td>
    <xsl:attribute name="style">
      <!-- ...
-->
    </xsl:attribute>
    <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
      <xsl:attribute name="height">100%</xsl:attribute>
      <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
    </xsl:if>
    <xsl:attribute name="class">
      <!-- ...
-->
    </xsl:attribute>
    <xsl:apply-templates select="." mode="PrintFieldWithECB">
      <xsl:with-param name="thisNode" select="$thisNode"/>
    </xsl:apply-templates>
  </td>
</xsl:template>

Come potete vedere, il modello contiene due elementi xsl: param, uno <td> elemento, diversi elementi xsl: attribute e un xsl: elemento apply-templates, che farà sì che alcuni modelli di livello più basso da applicare.

Per raggiungere il mio obiettivo di drag-and-drop, basta aggiungere gli attributi di drag-and-drop per la <td> elemento, in questo modo:

    <td ondragover="return UserDragOver(event, this)" ondragenter=
      "return UserDragOver(event, this)" ondragleave=
      "UserDragLeave(event, this)" ondrop="UserDrop(event, this)">

Abbastanza semplice, non è vero?

In alternativa, se avete distribuito nell'ambiente SharePoint jQuery, si potrebbe considerare associare i gestori eventi JavaScript utilizzando il metodo .on di jQuery.

Il markup per la colonna assegnato a è pronto (I'll scrivere i gestori un po' più tardi). Ora è il momento di personalizzare la lista di esecutori.

I tornare alla scheda visualizzazione progettazione, selezionare una cella nella colonna esecutori e ripetere il trucco di formattazione condizionale per la generazione del codice XSLT. Aggiungete l'attributo onstartdrag per assicurare che il trascinamento della selezione può iniziare correttamente (non ho bisogno dell'attributo trascinabile qui, perché i valori dei campi "Persona o gruppo" vengono visualizzate come collegamenti e, secondo la specifica, collegamenti hanno il trascinabile attributo impostato su "true" per impostazione predefinita):

    <td ondragstart="UserDragStart(event, this)">

Bene. Ma come terrà traccia dei dati? Come determinare quale esecutore è trascinata? Ovviamente, bisogno il suo nome di login o, meglio, il suo ID. L'analisi dell'ID all'interno dell'elemento TD è irragionevolmente complicata, a mio parere.

Qui il punto è che in XSLT, per ogni campo di tipo persona o gruppo, l'ID utente è disponibile e può essere facilmente recuperato con una semplice query XPath.

In questa query, è necessario scegliere i valori dell'elemento corrente. L'elemento corrente è solitamente riferimento come parametro $thisNode in tutti i modelli standard di XsltListViewWebPart. Per recuperare l'ID dell'utente, si punta all'attributo del parametro $thisNode, con il nome uguale al nome della persona o gruppo colonna, con ".id" concatenato alla sua fine.

Quindi, ecco la mia domanda:

    <td ondragstart="UserDragStart(event, {$thisNode/Executor.id}, this)">

Le parentesi graffe sono utilizzate per aver compreso il diritto di espressione XPath nel valore dell'attributo.

Il markup è pronto e in realtà può essere utilizzato fin da subito, ma sarebbe probabilmente una buona idea per un po' più di lavoro con questo codice per renderlo più riutilizzabile.

Rendendo i modelli riutilizzabili

Forse avete notato che i modelli sono strettamente legati ai nomi di colonna specifici e che questi modelli sono destinati solo per gli elenchi di particolari. Ma è in realtà molto semplice modificare questi modelli così possibile riutilizzarli per altre liste con altri nomi di colonna.

Per iniziare, se si esamina la firma del modello che ho presentato all'inizio, vedrete il seguente attributo:

match="FieldRef[@Name='AssignedTo']"

Ovviamente, in questo modo il modello di colonna Assigned To. Per rendere questo modello un po' più ampia base, è possibile sostituire il nome di associazione con un'associazione di tipo, così che corrisponderà a qualsiasi persona o gruppo di colonna. Così sia! Ecco il codice:

match="FieldRef[@Type='User']"

La stessa modifica dovrebbe essere applicata per il secondo modello, dove l'elemento FieldRef è compensata nome interno del campo "Esecutore".

Ora, perché io posso avere qualsiasi colonna di tipo persona o gruppo e ogni lista, ho bisogno di passare alcune informazioni aggiuntive ai miei gestori di JavaScript. Quando trascina e discesa viene eseguito, è necessario aggiornare il valore della colonna Assigned To nell'elenco attività, quindi ho bisogno di sapere il nome della colonna e GUID dell'elenco.

Come accennato in precedenza, XSLT SharePoint ha alcuni parametri standard che sono disponibili a livello globale. Un tale parametro è $lista, che memorizza GUID dell'elenco corrente. E il nome del campo interno può essere facilmente recuperato dall'elemento FieldRef abbinata.

Così, ho intenzione di passare l'elenco nome GUID e la colonna interna al gestore UserDrop come segue (sto l'omissione di "ondragenter," attributi "ondragover" e "ondragleave" per chiarezza):

    <td ...
    ondrop="UserDrop(event, this, '{$List}', '{./@Name}'">

Il "." punta all'attuale elemento FieldRef (che è stata compensata in precedenza dal modello).

Successivamente, è necessario sbarazzarsi della stringa "Esecutore" nel parametro id nell'elenco esecutori XSLT utilizzando il seguente codice:

    <td ondragstart="UserDragStart(event, {$thisNode/@*[name()=
      concat(current()/@Name, '.id')]}, this)">

I modelli sono ora pronti e riutilizzabili, e ora ho intenzione di scrivere il corrispondente codice JavaScript per implementare i gestori.

Gestori di scrittura JavaScript

Anche se ci sono quattro diversi gestori di scrivere, la maggior parte di loro sono primitiva e sono tutti piuttosto evidente.

Di solito raccomandare mettendo questo codice in un file JavaScript separato. E in generale sarebbe una buona idea utilizzare Visual Studio per creare, come si potrebbe ottenere il beneficio di IntelliSense. Tuttavia, in alcune circostanze, è ragionevole per inserire questo codice all'interno di XSLT, si esegue l'override del modello di radice (partita = "/") per questo scopo. Questo consente di utilizzare alcuni parametri all'interno di codice JavaScript e XSLT variabili e significa anche non dovete essere preoccupato per la distribuzione di file JavaScript.

Quindi cerchiamo di guardare il codice per i gestori — DragStart, DragEnter, DragOver, DragLeave- and -Drop.

Nel gestore UserDragStart, è necessario inizializzare il trasferimento dei dati. Questo significa che è necessario archiviare dati trascinati in un oggetto HTML5 DataTransfer speciale, come questo:

function UserDragStart(e, id, element) {
  e.dataTransfer.effectAllowed = 'copy';
  e.dataTransfer.setData('Text', id + '|' + element.innerHTML);
}

Si noti che l'ID dell'utente non è l'unica parte dei dati trasferiti. Ho anche aggiunto l'HTML interno del <td> elemento, per evitare di dover aggiornare la pagina dopo aver abbandonato i dati (vedi il codice del gestore UserDrop in Figura 8 per i dettagli).

Figura 8 il gestore dell'evento Drop

function UserDrop(e, toElement, listGuid, columnName) {
  // Terminate the event processing
  if (e.stopPropagation)
      e.stopPropagation();
  // Prevent default browser action
  if (e.preventDefault)
      e.preventDefault();
  // Remove styles from the placeholder
  toElement.style.backgroundColor = '';
  //toElement.className = '';
  // iid attribute is attached to tr element by SharePoint
  // and contains ID of the current element
  var elementId = toElement.parentNode.getAttribute('iid').split(',')[1];
  // Transferred data
  var data = e.dataTransfer.getData('Text');
  var userId = data.split('|')[0];
  var userLinkHtml = data.split('|')[1];
  // Setting value of the field using SharePoint
  // EcmaScript Client Object Model
  var ctx = new SP.ClientContext.get_current();
  var list = ctx.get_web().get_lists().getById(listGuid);
  var item = list.getItemById(elementId);
  item.set_item(columnName, userId);
  item.update();
  // Asynchronous call
  ctx.executeQueryAsync(
    function () { toElement.innerHTML = userLinkHtml; },
    function (sender, args) { alert('Drag-and-drop failed.
Message: ' + args.get_message()) }
    );
  return false;
}

Per gli eventi DragEnter e DragOver in questo caso, i gestori sono identici così sto usando una singola funzione per loro. Questi eventi si dovrebbe indicare che l'utente può cadere i suoi dati qui. Secondo la specifica, per questo scopo deve chiamare il metodo event.preventDefault (se disponibile) e quindi restituire false.

Il gestore DragEnter/DragOver è il luogo perfetto per applicare gli stili personalizzati al segnaposto del drag-and-drop per notificare all'utente che ha in realtà può cadere i suoi dati trascinati. Per semplificare l'esempio, io uso gli stili CSS in linea, ma in un progetto reale vorrei raccomandare utilizzando le classi CSS (vedere le linee commentate mostrate in Figura 9).

Nella figura 9 il DragOver e gestori di evento DragLeave

function UserDragOver(e, toElement) {
  // Highlight the placeholder
  toElement.style.backgroundColor = '#efe';
  // toElement.className = 'userDragOver';
  // Denote the ability to drop
  if (e.preventDefault)
      e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
  return false;
}
function UserDragLeave(e, toElement) {
  // Remove styles
  toElement.style.backgroundColor = '';
  // toElement.className = '';

Ovviamente, in DragLeave bisogno di rimuovere gli stili applicati in precedenza, come mostrato nella Figura 9.

Durante l'evento Drop in Figura 8, due importanti azioni necessario effettuare:

1. Applicare le modifiche. Utilizzando il modello a oggetti SharePoint Client EcmaScript, impostare il valore del campo all'ID utente trasferiti.
2. Sostituire il codice HTML interno nella cella corrente (TD) con codice da quello trasferito per apportare le modifiche appaiono senza aggiornare la pagina.

Ora tutti i gestori sono implementati e può distribuire Java­Script. In realtà, è possibile farlo in molti modi diversi: personalizzare la pagina master, utilizzare il delegato controllo, creare un'azione personalizzata con percorso impostato su "ScriptLink" o, come accennato in precedenza, includono il diritto di JavaScript in XSLT.

Qui il modo più semplice è quello di personalizzare il file pagina master utilizzando SharePoint Designer, in quanto non necessita alcuna abilità speciali. Ma perché sei uno sviluppatore, le probabilità sono preferite radunare tutte queste personalizzazioni JavaScript e XSLT e creare una soluzione distribuibile. OK, Let's do it!

Creazione di una soluzione distribuibile

Per creare una soluzione pronto all'uso, che è possibile inviare ai vostri clienti, è necessario eseguire alcuni passaggi molto semplici:

1. Aprire Visual Studio e creare un progetto SharePoint vuoto. Quindi selezionare "distribuire come una soluzione di fattoria" nella finestra di dialogo Impostazioni progetto.
2. Aggiungere una cartella mappata di SharePoint "Layout" al progetto e aggiungere tre nuovi file ad esso: UserDragHandlers.js, UserDragProvider.xsl e UserDragConsumer.xsl.
3. Incollare il codice JavaScript creato in precedenza e il codice XSLT (generato in SharePoint Designer) in file corrispondenti.
4. Aggiungere un elemento di progetto elemento vuoto, aprire Elements. xml e incollare il codice seguente ci:
   < CustomAction ScriptSrc="/_layouts/SPDragAndDrop/UserDragHandlers.js" Posizione = "ScriptLink" Sequenza = "10" / >
   Questo distribuirà il link al tuo file JavaScript a tutte le pagine del sito.
5. Infine, aggiungere un ricevente di eventi a Feature1 (che è stato creato automaticamente quando è stato aggiunto l'elemento elemento vuoto del progetto), rimuovere il metodo FeatureActivated e incollare il codice seguente in esso:

var web = properties.Feature.Parent as SPWeb;
        SPList list;
        SPView view;
        list = web.Lists["Tasks"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragConsumer.xsl";
        view.Update();
        list = web.Lists["Executors"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragProvider.xsl";
        view.Update();

E, sì, questo è tutto — hai finito! Abbastanza semplice, non è vero? Ora se costruire e distribuire la soluzione con i compiti ed esecutori elenchi creato in precedenza e quindi creare un dashboard contenenti visualizzazioni predefinite di ciascuno di essi, dashboard sportiva una comoda funzione di drag-and-drop.

Supporto per il browser

Ormai, quasi tutti i principali browser tranne Opera supporto HTML5 trascinare e rilasciare. Ho testato Internet Explorer 9.0.8112.16421, Chrome 16.0.912.75 e Firefox 3.6.12, e sono completamente compatibili con la soluzione descritta. Mi aspetto che funzionerà anche alcune versioni meno recenti di questi browser. In realtà, dovrebbe funzionare anche Safari, ma la stesura di questo documento, ha alcuni bug strano nella sua implementazione di drag-and-drop di HTML5 che impediscono la soluzione di lavoro come previsto.

Quali sono le prospettive?

Nella mia soluzione, né i modelli XSLT né il JavaScript contengono qualsiasi codice specifico elenco — no GUID hardcoded, nomi, titoli o qualcosa di simile. Così, queste trasformazioni potenzialmente potrebbero essere applicate a qualsiasi elenchi o raccolte di documenti, e si potrebbe aggiungere il supporto drag-and-drop a qualsiasi colonna di persona o gruppo. Non è che cool?

Ovviamente, altri tipi di colonne possono essere fatte trascinabile allo stesso modo, così si potrebbe, infatti, fare una soluzione in cui tutte le cellule in tutti gli elenchi di SharePoint sono trascinabili e gli utenti di pagine cruscotto quindi sarebbe in grado di trascinare le cellule tra liste, che è anche a portata di mano.

Una sfida molto interessante potrebbe attuare per riga trascinare e rilasciare. L'idea è essenzialmente lo stesso, ma per ottenere il modello corretto, è necessario utilizzare la riga di formattazione condizionale. Questo potrebbe essere usato per collegare gli elenchi di elementi o, ad esempio, per cambiare il loro ordine. Si potrebbe, per esempio, creare un link "Cestino" dal menu di avvio rapido lavoro come un accettore di drag-and-drop e usarlo come un modo per eliminare gli elementi dall'elenco.

C'è così tanto che si può fare. Basti pensare, sperimentare e provare — SharePoint portal diventerà un posto molto più amichevole.

Andrey Markeev è un MVP di SharePoint Server che lavora come sviluppatore SharePoint al gruppo Softline in Russia. Markeev è uno dei primi 10 esperti su SharePoint StackExchange (bit.ly/w9e4NP), il creatore di diversi progetti open source su CodePlex, un blogger attivo e un altoparlante. Può seguirlo su Twitter a twitter.com/amarkeev.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Michael Nemtsev e Brandon Satrom