Procedura dettagliata: creazione di un'applicazione per SharePoint tramite LightSwitch
Utilizzando LightSwitch, è possibile creare un'applicazione per SharePoint in cui gli utenti mobili possono visualizzare, aggiungere e aggiornare i dati di SharePoint da posizioni remote utilizzando dispositivi moderni e orientati al tocco come telefoni e tablet. In questa procedura dettagliata verrà creata un'applicazione in cui i venditori di un distributore fittizio di alimenti, Contoso Foods, possono immettere i dati del sondaggio sulla modalità di visualizzazione dei prodotti negli archivi del partner.
Questi venditori visitano di frequente ciascuna sede per consegnare i prodotti e condurre sondaggi sulla qualità con cui viene misurata la presenza di ogni prodotto nel punto vendita. Durante il sondaggio, i venditori raccolgono in genere i tipi di dati seguenti:
Pulizia del display (da "molto scadente" a "eccellente").
Illuminazione del prodotto (ancora da "molto scadente" a "eccellente").
Posizione del prodotto nella corsia (al centro della corsia, fine della corsia o estremità della corsia).
Altezza dello scaffale del prodotto (scaffale superiore, scaffale ad altezza uomo o scaffale inferiore).
Per supportare le valutazioni complessive, i venditori fotografano anche le visualizzazioni del prodotto.
Prerequisiti
Questa procedura dettagliata richiede Visual Studio 2013.
Inoltre, saranno necessari i file di esempio disponibili nel download relativo all'esercitazione di un'applicazione per sondaggi per sviluppare un'applicazione SharePoint con LightSwitch.
Per ospitare l'applicazione, è necessario disporre anche di un sito per sviluppatori di SharePoint in Office 365, che è possibile ottenere dal centro per sviluppatori di applicazioni per Office e SharePoint.
Creare un'applicazione LightSwitch in HTML
Per sviluppare un'applicazione LightSwitch per SharePoint, creare innanzitutto un progetto client in Silverlight o in HTML. Per questa procedura dettagliata, verrà utilizzato il codice HTML in modo da poter ottimizzare le schermate per i dispositivi mobili.
Per creare il progetto
Nella barra dei menu scegliere File, Nuovo, Progetto.
Verrà visualizzata la finestra di dialogo Nuovo progetto.
Nell'elenco di modelli espandere il nodo Visual Basic o il nodo Visual C#, scegliere il nodo LightSwitch, quindi scegliere Applicazione HTML LightSwitch (Visual Basic) o Applicazione HTML LightSwitch (Visual C#).
Nella casella di testo Nome immettere SurveyApp, quindi scegliere il pulsante OK.
Aggiungere il supporto per visualizzare i dati dei sondaggi
I venditori, che inseriscono i dati, devono verificare quanto immesso e recuperare i dati in un secondo momento. Per aggiungere questa funzionalità, inserire innanzitutto un'entità Survey nel database intrinseco in cui verranno memorizzati i dati dei sondaggi, quindi aggiungere una schermata principale per visualizzare i dati. La schermata principale viene visualizzata quando un venditore avvia l'applicazione.
Per aggiungere l'entità sondaggio
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.Server, quindi scegliere Aggiungi tabella.
Verrà visualizzato Entity Designer.
Nella casella di testo per la proprietà Nome della finestra Proprietà immettere Survey.
In Entity Designer immettere i valori seguenti:
Nome
Tipo
Obbligatorio
SalesRepName
String
No
Cleanliness
Integer
Sì
Lighting
Integer
Sì
ShelfPlacement
Integer
Sì
AislePlacement
Integer
Sì
Selezionare il campo Cleanliness, quindi nella finestra Proprietà scegliere il collegamento ipertestuale Elenco di scelte.
Nella finestra di dialogo Elenco di scelte immettere i valori seguenti, quindi fare clic su OK.
Valore
Nome visualizzato
0
Very Poor
1
Poor
2
Fair
3
Good
4
Excellent
Selezionare il campo Lighting, quindi nella finestra Proprietà scegliere il collegamento ipertestuale Elenco di scelte.
Nella finestra di dialogo Elenco di scelte immettere i valori seguenti, quindi fare clic su OK.
Valore
Nome visualizzato
0
Very Poor
1
Poor
2
Fair
3
Good
4
Excellent
Selezionare il campo ShelfPlacement, quindi nella finestra Proprietà scegliere il collegamento ipertestuale Elenco di scelte.
Nella finestra di dialogo Elenco di scelte immettere i valori seguenti, quindi fare clic su OK.
Valore
Nome visualizzato
0
Top Shelf
1
Eye-Level Shelf
2
Bottom Shelf
Selezionare il campo AislePlacement, quindi nella finestra Proprietà scegliere il collegamento ipertestuale Elenco di scelte.
Nella finestra di dialogo Elenco di scelte immettere i valori seguenti, quindi fare clic su OK.
Valore
Nome visualizzato
0
Middle of Aisle
1
End of Aisle
2
Aisle End-Cap
Per creare una schermata iniziale
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.HTML Client, quindi scegliere Aggiungi schermata.
Verrà visualizzata la finestra di dialogo Aggiungi nuova schermata.
Nell'elenco Selezionare un modello di schermata scegliere Schermata sfoglia dati.
Nella casella di testo Nome schermata immettere SurveysHome.
Nell'elenco Dati della schermata selezionare Surveys, quindi scegliere il pulsante OK.
In Progettazione schermata scegliere il nodo Schermata | SurveysHome.
.png "Schermata | Nodo Surveys Home")
Nella finestra Proprietà scegliere la casella di testo Nome visualizzato, quindi immettere Contoso Product Surveys.
Per eseguire il test dell'applicazione in un browser
Nella barra dei menu scegliere Debug, Avvia debug.
L'applicazione verrà visualizzata nel Web browser e sarà simile alla figura seguente.
.png "Schermata dell'app di sondaggio in un browser locale")
Non verranno visualizzati elementi di sondaggio poiché non è stato ancora immesso alcun dato. Successivamente, verrà aggiunta una schermata per la creazione e la modifica dei dati dei sondaggi.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Abilitare l'hosting di SharePoint
Per creare un'applicazione che i venditori possano avviare da un sito di SharePoint, è necessario abilitare l'hosting in SharePoint modificando le impostazioni del progetto client HTML.
Nota
Per ospitare l'app, è necessario disporre anche di un sito per sviluppatori di SharePoint in Office 365, che è possibile ottenere dal centro per sviluppatori di app per Office e SharePoint.
Per abilitare l'hosting di SharePoint
In Esplora soluzioni scegliere il nodo SurveyApp.
Nella barra dei menu, scegliere Progetto, Abilita SharePoint.
Nella procedura guidata Abilitazione di SharePoint immettere l'URL per il sito dello sviluppatore di Office 365, quindi scegliere il pulsante Fine.
Il formato dell'URL deve essere https:// SitoPersonale.sharepoint.com/sites/Developer/.
Vengono aggiunti riferimenti a diversi assembly di SharePoint al progetto LightSwitch e viene aggiunto un progetto per un'app Web di SharePoint alla soluzione.
Per eseguire il test dell'applicazione ospitata
Nella barra dei menu scegliere Debug, Avvia debug.
La prima volta che si esegue l'applicazione SharePoint nel computer, viene richiesto di installare un certificato Localhost perché nelle applicazioni LightSwitch abilitate per l'hosting di SharePoint viene utilizzato sempre SSL (Secure Sockets Layer). Se si accetta questo certificato, non verrà visualizzato un messaggio di sicurezza ogni volta che si avvia l'applicazione. Poiché il certificato si applica solo a Localhost, il sistema non è esposto ad alcuna minaccia.
Nella finestra di dialogo Avviso di sicurezza scegliere il pulsante Sì.
Se viene visualizzata una finestra di dialogo Avviso di sicurezza, scegliere il pulsante Sì.
Verrà visualizzato il Web browser in uso.
Nella pagina di accesso scegliere il pulsante Accedi.
Immettere la password, quindi scegliere il pulsante Accedi.
Se richiesto, scegliere il pulsante Attendibile.
L'applicazione verrà visualizzata nel browser e sarà simile alla figura seguente.
.png "Applicazione con riquadro di SharePoint")
Nella parte superiore della schermata viene visualizzata una barra in modo che l'utente può usare per tornare indietro al sito di SharePoint. Questa barra colorata di SharePoint viene visualizzata in tutte le applicazioni per SharePoint.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Aggiungere il supporto per creare e modificare i dati dei sondaggi
Dopo aver incorporato SharePoint nell'applicazione, è possibile tornare all'aggiunta di funzionalità in modo che gli utenti possano creare e modificare i dati dei sondaggi. In questa sezione verranno aggiunte un paio di ulteriori entità eseguendo l'associazione agli elenchi di SharePoint, verranno aggiunte relazioni tra le entità, verrà modificata la schermata principale, verrà creata una schermata di immissione dati e verrà associata la navigazione per la nuova schermata.
Per aggiungere entità
In un Web browser individuare il sito per sviluppatori di SharePoint utilizzando lo stesso URL immesso nella procedura precedente per l'abilitazione di SharePoint.
Nella barra dei menu di Office 365 scegliere l'icona Impostazioni, quindi scegliere il menu Impostazioni sito.
Nell'elenco Raccolte Designer Web scegliere Modelli di elenco.
Nella barra dei menu della pagina Raccolta Designer Web scegliere File, Carica documento.
Nella finestra di dialogo Aggiungi modello selezionare sfoglia, individuare il file modello contoso_customers_template.stp incluso nel download di esempio, quindi scegliere il pulsante OK.
Nella finestra di dialogo Raccolta modelli elenco scegliere il pulsante Salva.
Nella barra dei menu scegliere File, Carica documento.
Nella finestra di dialogo Aggiungi modello selezionare sfoglia, individuare il file modello contoso_products_template.stp incluso nel download di esempio, quindi scegliere il pulsante OK.
Nella finestra di dialogo Raccolta modelli elenco scegliere il pulsante Salva.
Nella barra dei menu Sviluppatore scegliere Contenuto del sito, selezionare il collegamento aggiungi un'app, quindi scegliere Contoso Customers Template.
Nella finestra di dialogo Aggiunta elenco personalizzato assegnare all'elenco il nome Customers, quindi scegliere il pulsante Crea.
Nella pagina Contenuto del sito selezionare il collegamento aggiungi un'app, quindi scegliere Contoso Products Template.
Nella finestra di dialogo Aggiunta elenco personalizzato assegnare all'elenco il nome Products, quindi scegliere il pulsante Crea.
In Esplora soluzioni in Visual Studio aprire il menu di scelta rapida del nodo SurveyApp.Server, quindi scegliere Aggiungi origine dati.
Nell'Associazione guidata origine dati scegliere l'icona SharePoint, quindi il pulsante Avanti.
Nella casella di testo Specificare l'indirizzo del sito di SharePoint immettere l'URL per il sito dello sviluppatore di SharePoint, quindi scegliere il pulsante Avanti.
Nell'elenco Selezionare le entità da utilizzare nell'applicazione espandere il nodo Elenco, selezionare le caselle di testo Customer e Products, quindi scegliere il pulsante Fine.
Le entità Customers, Products e UserInformationList vengono aggiunte all'applicazione.
Per creare relazioni tra entità
In Esplora soluzioni espandere il nodo Origini dati, aprire il menu di scelta rapida del nodo Surveys.lsml, quindi scegliere Apri.
Nella barra degli strumenti di Entity Designer scegliere il collegamento Relazione.
Verrà visualizzata la finestra di dialogo Aggiungi nuova relazione.
Nella colonna A dell'elenco Nome scegliere Customer, quindi il pulsante OK.
In Entity Designer scegliere il collegamento Relazione.
Nella colonna A dell'elenco Nome nella finestra di dialogo Aggiungi nuova relazione selezionare Product, quindi scegliere il pulsante OK.
Per modificare la schermata iniziale
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveysHome.lsml, quindi scegliere Apri.
Nel riquadro centrale di Progettazione schermata espandere l'elenco del nodo Sondaggio, quindi scegliere Layout righe.
Selezionare i nodi Sales Rep Name, Cleanliness, Lighting, Shelf Placement e Aisle Placement, quindi eliminarli.
Nell'elenco Aggiungi scegliere Customer.
Nell'elenco Aggiungi scegliere Product.
Per aggiungere una schermata per creare e modificare i sondaggi
In Progettazione schermata espandere il nodo Barra dei comandi, quindi scegliere Aggiungi.
Nella finestra di dialogo Aggiungi pulsante scegliere il pulsante di opzione Scegli metodo esistente.
Nell'elenco showTab scegliere addAndEditNew.
Nell'elenco Passa a scegliere Nuova schermata, quindi il pulsante OK.
Verrà aperta la finestra di dialogo Aggiungi nuova schermata.
Nella finestra di dialogo Aggiungi nuova schermata accettare i valori predefiniti, quindi fare clic su OK.
In Progettazione schermata spostare i nodi Customer e Product in modo che vengano visualizzati nel nodo Sales Rep Name.
Eliminare il nodo Layout righe | Right.
Per aggiungere la navigazione schermata
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Surveys Home.lsml, quindi scegliere Apri.
In Progettazione schermata scegliere il nodo Elenco | My Product Surveys.
Nella finestra Proprietà scegliere il collegamento ipertestuale Tocco elemento: nessuno.
Verrà aperta la finestra di dialogo Modifica azione ItemTap.
Nell'elenco showTab scegliere editSelected.
Nell'elenco Passa a selezionare Aggiungi modifica sondaggio, quindi scegliere il pulsante OK.
Per testare le modifiche
Nella barra dei menu scegliere Debug, Avvia debug.
Nella schermata principale scegliere il pulsante Aggiungi sondaggio.
Verrà visualizzata la schermata Aggiungi modifica sondaggio.
Espandere l'elenco Customer per visualizzare i dati del cliente di esempio.
Espandere l'elenco Product per visualizzare i dati del prodotto di esempio.
Espandere ognuno degli elenchi rimanenti per visualizzare le scelte immesse precedentemente in questa procedura dettagliata.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Aggiungere la logica per il nome del venditore
I venditori non dovrebbero immettere i propri nomi ogni volta che creano un sondaggio. Successivamente, verrà aggiunta la logica per popolare automaticamente il campo Sales Rep Name con il nome dell'utente autenticato corrente e per visualizzare solo i sondaggi creati da ogni venditore.
Per impostare un valore predefinito
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Surveys.lsml, quindi scegliere Apri.
Verrà aperto Entity Designer.
Nell'elenco Scrivi codice scegliere Surveys_Inserting.
Nell'Editor di codice aggiungere il seguente codice al metodo Surveys_Inserting:
entity.SalesRepName = Application.User.Nameentity.SalesRepName = this.Application.User.Name;Questo metodo viene eseguito all'interno della pipeline di salvataggio del server ogni volta che viene inserita un'entità Survey. Quando tramite l'applicazione vengono recuperate le informazioni utente, esse corrispondono all'utente che ha eseguito l'accesso a SharePoint.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo AddEditSurvey.lsml, quindi scegliere Apri.
Verrà aperto Progettazione schermata.
Nel riquadro centrale eliminare il nodo Sales Rep Name.
Per aggiungere la logica di filtro
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Surveys.lsml, quindi scegliere Apri.
Verrà aperto Entity Designer.
Nell'elenco Scrivi codice scegliere Surveys_Filter.
Nell'Editor di codice aggiungere il seguente codice al metodo Surveys_Filter:
filter = Function(e) e.SalesRepName = Application.User.Namefilter = f => f.SalesRepName == this.Application.User.Name;Questo metodo viene eseguito nel server ogni volta che viene eseguita una query sull'entità Survey.
Per testare le modifiche
Nella barra dei menu scegliere Debug, Avvia debug.
Nella schermata principale scegliere il pulsante Aggiungi sondaggio.
Scegliere un cliente nell'elenco Customer.
Scegliere un prodotto nell'elenco Product.
In ognuno degli elenchi rimanenti selezionare un valore, quindi scegliere il pulsante Salva.
Verificare che nell'elenco dei sondaggi sia incluso il sondaggio appena creato.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Aggiungere la logica per la data del sondaggio più recente
Successivamente, verrà aggiunto il codice per riflettere la data più recente in cui è stato eseguito un sondaggio nel sito di ciascun cliente.
Per aggiornare la data del sondaggio più recente
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Surveys.lsml, quindi scegliere Apri.
Nell'elenco Scrivi codice scegliere Surveys_Inserted.
Nell'Editor di codice aggiungere il seguente codice al metodo Surveys_Inserted:
Dim c As Customer = Me.DataWorkspace.DeveloperData.Customers.Where( Function(f) f.CompanyName = entity.Customer.CompanyName).FirstOrDefault() If (Not c Is Nothing) Then c.LastSurveyDate = Date.Today Me.DataWorkspace.DeveloperData.SaveChanges() End IfCustomer c = this.DataWorkspace.DeveloperData.Customers.Where(f => f.CompanyName == entity.Customer.CompanyName).FirstOrDefault(); if (c != null) { c.LastSurveyDate = DateTime.Today; this.DataWorkspace.DeveloperData.SaveChanges(); }
Per testare le modifiche
Nella barra dei menu scegliere Debug, Avvia debug.
Nella schermata principale scegliere il pulsante Aggiungi sondaggio.
Scegliere un cliente nell'elenco Customer.
Scegliere un prodotto nell'elenco Product.
In ognuno degli elenchi rimanenti selezionare un valore, quindi scegliere il pulsante Salva.
Verificare che nell'elenco dei sondaggi sia incluso il sondaggio appena creato.
Nella barra dei menu scegliere Torna al sito.
Verrà visualizzato il sito per sviluppatori SharePoint. Nell'elenco Customers LastSurveyDate è stato aggiornato per il cliente appena esaminato.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Aggiornare la schermata iniziale e la barra del titolo
Successivamente, verrà aggiornata la schermata iniziale visualizzata mentre si avvia l'applicazione, per visualizzare il nome dell'applicazione anziché il nome del progetto. Inoltre, verrà modificato il nome visualizzato nella scheda Browser o nella barra del titolo.
Per aggiornare le stringhe visualizzate
In Esplora soluzioni espandere il nodo SurveyApp.HTMLClient, aprire il menu di scelta rapida del file default.htm, quindi scegliere Apri.
Nell'Editor di codice individuare l'elemento <div>, quindi sostituire SurveyApp con Contoso Product Surveys.
Questa stringa verrà visualizzata nella schermata iniziale.
Nell'elemento <title> sostituire SurveyApp con Contoso Product Surveys.
Per testare le modifiche
Nella barra dei menu scegliere Debug, Avvia debug.
Si noti che la stringa Contoso Product Surveys viene visualizzata nella schermata iniziale e nella barra del titolo.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Aggiungere il supporto per caricare e visualizzare le foto
Successivamente, verrà aggiunto il supporto per caricare foto in una raccolta immagini di SharePoint. Quando un venditore carica una foto, in SharePoint vengono automaticamente create un'anteprima della foto e una versione ottimizzata per il Web. Queste immagini aggiuntive aiuteranno i venditori a sfogliare e gestire le immagini più rapidamente e più agevolmente in SharePoint che nel database SQL per LightSwitch.
Nelle applicazioni per SharePoint possono essere incluse varie risorse, ad esempio elenchi, moduli, tipi di contenuto e contenitori di proprietà che risiedono nell'applicazione Web e che vengono installati e rimossi come parte dell'applicazione.
Per aggiungere un'entità foto
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.Server, quindi scegliere Aggiungi tabella.
Nella casella di testo Nome della finestra Proprietà immettere Photo.
In Entity Designer immettere i valori seguenti:
Nome
Tipo
Obbligatorio
FullImageUrl
Indirizzo Web
Sì
ThumbnailUrl
Indirizzo Web
Sì
OptimizedUrl
Indirizzo Web
Sì
NameWithExt
String
Sì
CreatedDate
Data/Ora
Sì
Per aggiungere una relazione
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Surveys.lsml, quindi scegliere Apri.
Nella barra degli strumenti di Entity Designer scegliere il collegamento Relazione.
Nella riga Nome e nella colonna A della finestra di dialogo Aggiungi nuova relazione scegliere Photo nell'elenco.
Nella riga Molteplicità e nella colonna Da scegliere Uno nell'elenco.
Nella riga Molteplicità e nella colonna A scegliere Molti nell'elenco.
Nella riga Comportamento in eliminazione e nella colonna Da scegliere Eliminazione a catena nell'elenco, quindi scegliere il pulsante OK.
Per aggiungere una libreria di immagini di SharePoint
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.SharePoint, scegliere Aggiungi, quindi Nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento scegliere Elenco.
Nella casella di testo Nome immettere Photos, quindi scegliere il pulsante Aggiungi.
In Personalizzazione guidata SharePoint scegliere il pulsante di opzione Crea un elenco in base a un modello elenco esistente.
Nell'elenco Annunci selezionare Raccolta immagini, quindi scegliere il pulsante Fine.
Per aggiungere una classe di utilità
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.Server, scegliere Aggiungi, quindi Elemento esistente.
Viene visualizzata la finestra di dialogo Aggiungi elemento esistente.
Individuare il file PhotoListHelper.vb o PhotoListHelper.cs scaricato come parte dell'esempio, quindi scegliere il pulsante Aggiungi.
Nel metodo AddPhoto dell'Editor di codice individuare la riga siteContext.ExecuteQuery(), quindi aggiungere il codice seguente:
siteContext.Load(siteContext.Web) siteContext.ExecuteQuery()siteContext.Load(siteContext.Web); siteContext.ExecuteQuery();Nota
Questo codice aggiuntivo è necessario in Visual Studio 2013 per evitare un'eccezione in chiamate successive all'URL.
Nella barra dei menu scegliere Compila, Compila soluzione per assicurarsi la compilazione corretta del codice.
Per aggiungere un controller WebAPI
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.Server, scegliere Aggiungi, quindi Nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare il nodo Web, quindi scegliere il modello Classe del controller WebAPI.
Nella casella di testo Nome immettere PhotosController, quindi scegliere il pulsante Aggiungi.
Nell'Editor di codice sostituire il contenuto con il codice seguente:
Imports System.Net Imports System.Web.Http Imports LightSwitchApplication Imports Microsoft.SharePoint.Client Imports System.IO Imports System.Net.Http Imports System.Net.Http.Headers Imports System.Text Imports System.Threading.Tasks Public Class PhotosController Inherits ApiController Private _appWebContext As ClientContext Private ReadOnly Property AppWebContext() As ClientContext Get If _appWebContext Is Nothing Then Using serverContext = LightSwitchApplication.ServerApplicationContext.CreateContext() _appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext() End Using End If Return _appWebContext End Get End Property Public Function PostFormData() As Task(Of HttpResponseMessage) If Not Request.Content.IsMimeMultipartContent() Then Throw New HttpResponseException(HttpStatusCode.UnsupportedMediaType) End If Dim memStream = New MultipartMemoryStreamProvider() Dim spCtx = AppWebContext Dim myTask = Request.Content.ReadAsMultipartAsync(memStream).ContinueWith( Function(t) If t.IsFaulted OrElse t.IsCanceled Then Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception) End If Dim fileList = New StringBuilder() For Each contentItem In memStream.Contents Dim sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("""", "")) Try Dim fileReadTask = contentItem.ReadAsByteArrayAsync().ContinueWith( Function(frt) Dim photoUrl = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, spCtx) Return photoUrl End Function ) fileReadTask.Wait() fileList.AppendLine(fileReadTask.Result) Catch ex As Exception fileList.AppendLine("FAILED::" + ex.Message) End Try Next Return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), New MediaTypeHeaderValue("application/xml")) End Function ) Return myTask End Function Public Function DeletePhoto(url As String) As Task(Of HttpResponseMessage) Dim spCtx = AppWebContext Dim deleteTask = New Task(Of HttpResponseMessage)( Function() Try PhotoListHelper.DeletePhoto(url, spCtx) Return Request.CreateResponse(HttpStatusCode.OK) Catch ex As Exception Return Request.CreateErrorResponse(HttpStatusCode.NotModified, ex) End Try End Function ) deleteTask.Start() Return deleteTask End Function End Classusing System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Diagnostics; using System.Net; using System.Web.Http; using LightSwitchApplication; using Microsoft.SharePoint.Client; using System.IO; using System.Net.Http; using System.Net.Http.Headers; using System.Text; using System.Threading.Tasks; public class PhotosController : ApiController { private ClientContext appWebContext; private ClientContext AppWebContext { get { if (appWebContext == null) { using (var serverContext = LightSwitchApplication. ServerApplicationContext.CreateContext()) { appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(); } } return appWebContext; } } public Task<HttpResponseMessage> PostFormData() { if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } // Since we're uploading the image to Sharepoint directly, we'll just read the Http content into memory var memoryStream = new MultipartMemoryStreamProvider(); // We need to get the appweb context before forking the new task; otherwise the LightSwitch runtime will // throw because there is no HttpContext available on the calling thread. var sharepointContext = this.AppWebContext; var task = Request.Content.ReadAsMultipartAsync(memoryStream). ContinueWith<HttpResponseMessage>(t => { if (t.IsFaulted || t.IsCanceled) { Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception); } // There can be multiple files in the POST, so we'll upload each attachment and attach its new // URL (in the SP Picture Library). StringBuilder fileList = new StringBuilder(); foreach (var contentItem in memoryStream.Contents) { var sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("\"", "")); try { // Read the contents of the file into memory and upload it to Sharepoint var fileReadTask = contentItem.ReadAsByteArrayAsync(). ContinueWith<string>(frt => { var photoURL = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, sharepointContext); return photoURL; }); fileReadTask.Wait(); fileList.AppendLine(fileReadTask.Result); } catch (Exception ex) { fileList.AppendLine(@"FAILED::" + ex.Message); } } return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), new MediaTypeHeaderValue("application/xml")); }); return task; } public Task<HttpResponseMessage> DeletePhoto(string url) { var sharepointContext = this.AppWebContext; var deleteTask = new Task<HttpResponseMessage>( () => { try { PhotoListHelper.DeletePhoto(url, sharepointContext); return Request.CreateResponse(HttpStatusCode.OK); } catch (Exception e) { return Request.CreateErrorResponse(HttpStatusCode.NotModified, e); } }); deleteTask.Start(); return deleteTask; } }Si noti che tramite questo codice viene recuperato l'oggetto host SharePoint utilizzando l'API del server per LightSwitch: appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(). L'oggetto host SharePoint fornisce l'accesso a molte proprietà e metodi utili che vengono utilizzati per interagire con il sito di SharePoint. In particolare, il metodo GetAppWebClientContext fornisce un punto di ingresso per interagire con le risorse appartenenti all'applicazione Web. Quando ClientContext dell'applicazione Web viene recuperato, il token di contesto appropriato viene utilizzato per comunicare con SharePoint.
Per aggiungere una route HTTP al controller
In Esplora soluzioni aprire il menu di scelta rapida per il nodo SurveyApp.Server, scegliere Aggiungi, quindi Nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare il nodo Web, quindi scegliere il modello Classe di applicazione globale.
Nella casella di testo Nome immettere Global.asax, quindi scegliere il pulsante Aggiungi.
Nell'Editor di codice immettere le seguenti istruzioni Imports o Using:
Imports System.Web.Routing Imports System.Web.Httpusing System.Web.Routing; using System.Web.Http;Aggiungere al metodo Application_Start il codice seguente:
RouteTable.Routes.MapHttpRoute( name := "DefaultApi", routeTemplate := "api/{controller}/{id}", defaults := New With { .id = System.Web.Http.RouteParameter.Optional } )RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = System.Web.Http.RouteParameter.Optional } ); }La route HTTP consente al controller di essere richiamato dal client.
Nella barra dei menu scegliere Compila, Compila soluzione per assicurarsi la compilazione corretta del codice.
Autenticare l'applicazione per interagire con la raccolta immagini Foto
L'applicazione Web, contenente la raccolta immagini Foto, si trova in un dominio isolato. Per impostazione predefinita, l'applicazione in uso non viene autenticata per interagire con l'applicazione Web, pertanto per eseguire l'autenticazione è necessario aggiungere uno script semplice.
Per aggiungere l'autenticazione
In Esplora soluzioni espandere il nodo SurveyApp.HTMLClient, aprire il menu di scelta rapida per il nodo Script, scegliere Aggiungi, quindi selezionare Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente individuare il file sharepointauthhelper.js scaricato come parte dell'esempio, quindi scegliere il pulsante Aggiungi.
Nell'Editor di codice sostituire il contenuto con il codice seguente:
$(document).ready(function () { var paramName = "SPAppWebUrl"; var match = RegExp('[?&]' + paramName + '=([^&]*)') .exec(window.location.search); var appWebUrl = match && decodeURIComponent(match[1].replace(/\+/g, ' ')); if (appWebUrl) { var authproxy = appWebUrl + "/_layouts/15/appwebproxy.aspx" var iframe = $("<iframe src='" + authproxy + "' style='width: 0px; height: 0px; border: 0px'/>"); $("body").append(iframe); } });Nota
In Visual Studio 2013, per l'autenticazione di applicazioni SharePoint viene utilizzata una stringa di query anziché un cookie per passare l'URL.
In Esplora soluzioni aprire il menu di scelta rapida per il file default.htm, quindi scegliere Apri.
Nel file default.htm aggiungere il riferimento seguente:
<script type="text/javascript" src="Scripts/sharepointauthhelper.js"></scriptNella barra dei menu scegliere Compila, Compila soluzione per assicurarsi la compilazione corretta del codice.
Aggiungere un controllo personalizzato per il caricamento delle foto
Successivamente, verrà creato un controllo personalizzato mediante il quale verrà richiesto ai venditori di caricare foto di ogni visualizzazione prodotto.
Per creare il controllo personalizzato
In Esplora soluzioni espandere il nodo SurveyApp.HTMLClient, aprire il menu di scelta rapida per il nodo Script, scegliere Aggiungi, quindi selezionare Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente individuare il file photohelper.js scaricato come parte dell'esempio, quindi scegliere il pulsante Aggiungi.
In Esplora soluzioni aprire il menu di scelta rapida per il file default.htm, quindi scegliere Apri.
Nell'Editor di codice aggiungere il riferimento seguente:
<script type="text/javascript" src="Scripts/photohelper.js"></script>Nella barra degli strumenti in Esplora soluzioni scegliere Visualizzazione logica nell'elenco.
Aprire il menu di scelta rapida per il nodo della schermata AddEditSurvey.lsml, quindi scegliere Apri.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Popup, quindi scegliere Aggiungi popup.
Nella casella di testo Nome della finestra Proprietà immettere UploadPhotos.
Nel nodo Layout righe | Upload Photos di Progettazione schermata espandere il nodo Aggiungi, quindi scegliere Nuovo controllo personalizzato.
Verrà visualizzata la finestra di dialogo Aggiungi controllo personalizzato.
Scegliere il pulsante OK per accettare il valore predefinito di Screen, quindi chiudere la finestra di dialogo.
Nella casella di testo Nome della finestra Proprietà immettere UploadControl, quindi scegliere il collegamento ipertestuale Modifica codice Render.
Nell'Editor di codice immettere la seguente riga di codice sopra il metodo myapp.AddEditSurvey.UploadControl_render:
var $uploadControlElement, uploadControlContentItem;Aggiungere il seguente codice al corpo del metodo:
$uploadControlElement = $(element); uploadControlContentItem = contentItem;Quando un venditore carica una foto, tramite questo codice verrà creata un'entità Photo nel database intrinseco contenente riferimenti di proprietà agli URL dell'immagine a dimensioni intere, ottimizzata e di anteprima nella raccolta immagini. Questa entità verrà utilizzata in un passaggio successivo per visualizzare le immagini nell'applicazione per sondaggi.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo della schermata AddEditSurvey.lsml, quindi scegliere Apri.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Layout righe | Upload Photos, quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante scegliere il pulsante di opzione Scrivi metodo personale.
Denominare il metodo UploadPhoto, quindi scegliere il pulsante OK.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Upload Photo, quindi scegliere Modifica codice Execute.
Nell'Editor di codice aggiungere il seguente codice al metodo Upload:
if ($("#fileInput").val() != "") { $.mobile.loading('show'); $("#uploadForm").submit(); }Questo codice viene eseguito quando l'utente tocca il pulsante Upload Photo in UploadControl.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Schede, quindi scegliere Aggiungi scheda.
Nella finestra Proprietà assegnare alla scheda il nome Photos.
Sotto il nodo Layout righe | Photos aprire il menu di scelta rapida per il nodo Barra dei comandi, quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante selezionare il pulsante di opzione Scrivi metodo personale, assegnare al metodo il nome UploadPhotos, quindi scegliere OK.
Nella finestra Proprietà immettere Upload Photos come nome visualizzato.
Nell'elenco Icona scegliere Aggiungi immagine.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Upload Photos, quindi scegliere Modifica codice Execute.
Nell'editor di codice aggiungere il seguente codice:
showUploadPopup(screen);Tramite questo codice vengono visualizzate le informazioni popup quando l'utente tocca il pulsante Upload Photos.
Nella barra dei menu scegliere Compila, Compila soluzione per assicurarsi la compilazione corretta del codice.
Aggiungere il supporto dello schermo per la visualizzazione delle foto
Successivamente, verrà aggiunto il supporto per visualizzare le foto nella schermata AddEditSurvey. Per ciascuna foto viene visualizzata un'immagine di anteprima quindi, quando un venditore sceglierà l'anteprima, l'immagine più grande, ottimizzata per il Web verrà visualizzata in una finestra di dialogo. Inoltre, verrà aggiunto il supporto per eliminare le foto quando un venditore elimina i record del sondaggio per le foto in questione.
Per visualizzare un'anteprima
In Esplora soluzioni aprire il menu di scelta rapida per il nodo della schermata AddEditSurvey.lsml, quindi scegliere Apri.
Nel riquadro sinistro di Progettazione schermata scegliere il collegamento ipertestuale Aggiungi foto.
La query Photos viene aggiunta alla schermata.
Nell'elenco Aggiungi per il nodo Layout righe | Photos del riquadro centrale di Progettazione schermata scegliere Photos.
In Elenco scegliere Elenco icone.
Eliminare i nodi Full Image Url, Optimized Url, Name With Ext, Created Date e Survey.
Dovrebbe rimanere solo il nodo Thumbnail Url.
Nell'elenco per il nodo Thumbnail Url scegliere Immagine.
In Larghezza nella casella di testo Pixel della finestra Proprietà immettere 60.
In Altezza nella casella di testo Pixel immettere 60.
Per aggiungere un popup
In Progettazione schermata scegliere il nodo Popup, quindi selezionare Aggiungi popup.
Nella casella di testo Nome della finestra Proprietà immettere ViewPhotoDetails.
Nel riquadro sinistro di Progettazione schermata spostare il nodo Name With Ext in modo che venga visualizzato sotto il nodo Layout righe | View Photo Details.
Nell'elenco per il nodo Name With Ext scegliere Testo.
Spostare il nodo Created Date in modo che venga visualizzato sotto il nodo Name With Ext.
Nell'elenco per il nodo Created Date scegliere Testo.
Spostare il nodo Optimized Url in modo che venga visualizzato sotto il nodo Created Date.
Nell'elenco per il nodo Optimized Url scegliere Immagine.
Nell'elenco Larghezza della finestra Proprietà scegliere Adatta al contenuto.
Nell'elenco Altezza scegliere Adatta al contenuto.
Nell'elenco Posizione etichetta scegliere Nessuno.
In Progettazione schermata scegliere il nodo Elenco icone | Photos.
Nella finestra Proprietà scegliere il collegamento ipertestuale Tocco elemento.
Verrà visualizzata la finestra di dialogo Modifica azione ItemTap.
Nell'elenco Popup selezionare View Photo Details, quindi scegliere il pulsante OK.
Per aggiungere supporto per l'eliminazione delle foto
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Photos.lsml, quindi scegliere Apri.
Verrà aperto Entity Designer.
Nell'elenco Scrivi codice scegliere Photos_Deleted.
Nell'Editor di codice aggiungere il seguente codice al metodo Photos_Deleted:
Try PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext()) Catch ex As Exception End Trytry { PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext()); } catch (Exception) { }La relazione tra le entità Photos e Surveys è stata impostata su Eliminazione a catena, pertanto il metodo Photos_Deleted viene chiamato quando un record del sondaggio viene eliminato. Tramite questo codice viene chiamato il metodo DeletePhoto della classe PhotoListHelper per eliminare le foto dall'elenco di SharePoint.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo AddEditSurvey.lsml, quindi scegliere Apri.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Layout righe | View Photo Details, quindi selezionare Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante scegliere il pulsante di opzione Scrivi metodo personale.
Nella casella di testo Metodo immettere DeletePhoto, quindi scegliere il pulsante OK.
Aprire il menu di scelta rapida del nodo Delete Photo, quindi scegliere Modifica codice Execute.
Nell'Editor di codice aggiungere il seguente codice al metodo DeletePhoto_Execute:
deleteCurrentPhoto(screen);Poiché è stato aggiunto questo codice JavaScript, i venditori possono eliminare foto senza eliminare il sondaggio associato.
Per testare le modifiche
Nella barra dei menu scegliere Debug, Avvia debug.
Nella schermata principale scegliere il pulsante Aggiungi.
Scegliere un cliente nell'elenco Customer.
Scegliere un prodotto nell'elenco Product.
In ognuno degli elenchi rimanenti selezionare un valore, quindi scegliere il pulsante Salva.
Nell'elenco di sondaggi verificare che venga visualizzato il sondaggio appena creato.
Nella scheda Photos scegliere il pulsante Upload Photos.
Nella finestra di dialogo Upload Photos scegliere il pulsante Sfoglia cercare una foto nel computer locale, quindi scegliere il pulsante Apri.
Selezionare il pulsante Upload Photo, quindi scegliere l'immagine di anteprima visualizzata.
Verrà visualizzata la finestra di dialogo View Photo Image nella quale viene mostrata l'immagine a dimensioni intere.
Selezionare il pulsante Elimina foto e verificare che l'anteprima sia stata rimossa.
Chiudere la finestra del browser per arrestare l'esecuzione dell'applicazione.
Pubblicare l'applicazione finita in SharePoint
Fino a questo momento l'applicazione è stata eseguita solo in modalità di debug che implica l'utilizzo di SharePoint per fornire l'autenticazione e il reindirizzamento all'istanza di IIS Express del computer locale. L'app è completa e può essere pubblicata in un sito di SharePoint locale, in Microsoft Azure o in un sito di hosting di terze parti. Dopo la pubblicazione dell'app, altri utenti possono eseguirla da SharePoint nei propri computer e dispositivi mobili. Vedere l'articolo relativo a come pubblicare un'app Cloud Business App in SharePoint.