Partilhar via

Instruções passo a passo: criando um aplicativo para SharePoint usando LightSwitch

  • Artigo

Usando o LightSwitch, você pode criar um aplicativo para SharePoint em que os usuários móveis podem exibir, adicionar e atualizar dados do SharePoint de locais remotos usando dispositivos modernos e orientados a toque, como telefones e tablets. Nesta instrução passo a passo, você criará um aplicativo no qual representantes de vendas de um distribuidor fictício de alimentos, Contoso Foods, podem inserir dados de pesquisa sobre como lojas parceiras armazenam seus produtos.

Esses representantes visitam frequentemente cada local para fornecer produtos e conduzir pesquisas de qualidade que medem a presença que cada produto tem dentro da loja. Durante a pesquisa, os representantes normalmente coletam os seguintes tipos de dados:

  • Limpeza da exibição (que varia de "muito ruim" para "excelente").

  • Iluminação do produto (também varia de "muito ruim" até "excelente").

  • Local de corredor do produto (meio do corredor, fim do corredor ou extremidade final do corredor).

  • Altura de prateleira do produto (prateleira superior, prateleira ao nível dos olhos ou prateleira inferior).

Os representantes também fotografam as exibições do produto para dar suporte a avaliações gerais.

Pré-requisitos

Essa explicação passo a passo exige o Visual Studio 2013.

Você também precisará dos arquivos de exemplo no download Survey App Tutorial: Developing a SharePoint Application Using LightSwitch (Tutorial do aplicativo de pesquisa: desenvolvendo um aplicativo do SharePoint usando o LightSwitch).

Para hospedar o aplicativo, você também precisa ter um site Desenvolvedores do SharePoint no Office 365, que você pode obter na Developer Center for Apps for Office and SharePoint (Central de desenvolvimento de aplicativos para Office e SharePoint).

Criar um aplicativo LightSwitch em HTML

Para desenvolver um aplicativo do LightSwitch para o SharePoint, primeiro você cria um projeto de cliente no Silverlight ou em HTML. Para esta explicação passo a passo, você usará o HTML de forma que seja possível otimizar as telas para dispositivos móveis.

Para criar o projeto

  1. Na barra de menus, escolha Arquivo, Novo, Projeto.

    A Caixa de diálogo Novo Projeto é exibida.

  2. Na lista de modelos, expanda o nó Visual Basic ou Visual C#, escolha o nó LightSwitch e Aplicativo HTML do LightSwitch (Visual Basic) ou Aplicativo HTML do LightSwitch (Visual C#).

  3. Na caixa de texto Nome, insira SurveyApp e escolha o botão OK.

Adicionar suporte para exibir dados de pesquisa

À medida que os representantes inserem dados, eles devem verificar o que inseriram e recuperar os dados posteriormente. Para adicionar essa funcionalidade, comece pela adição de uma entidade Pesquisa no banco de dados intrínseco que armazenará dados de pesquisa e adicione uma tela inicial para exibir os dados. A tela inicial aparece quando um representante inicia o aplicativo.

Para adicionar a entidade Pesquisa

  1. Em Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server e escolha Adicionar Tabela.

    O Entity Designer aparece.

  2. Na janela Propriedades, na caixa de texto da propriedade Nome, insira Pesquisa.

  3. No Entity Designer, insira os seguintes valores:

    Nome

    Tipo

    Obrigatório

    SalesRepName

    Cadeia de caracteres

    Não

    Limpeza

    Inteiro

    Sim

    Iluminação

    Inteiro

    Sim

    ShelfPlacement

    Inteiro

    Sim

    AislePlacement

    Inteiro

    Sim

  4. Escolha o campo Limpeza e, em seguida, na janela Propriedades, escolha o hiperlink Lista de Opções.

  5. Na caixa de diálogo Lista de Opções, digite os seguintes valores e escolha o botão OK.

    Valor

    Nome para exibição

    0

    Muito ruim

    1

    Ruim

    2

    Razoável

    3

    Bom

    4

    Excelente

  6. Escolha o campo Iluminação e, em seguida, na janela Propriedades, escolha o hiperlink Lista de Opções.

  7. Na caixa de diálogo Lista de Opções, digite os seguintes valores e escolha o botão OK.

    Valor

    Nome para exibição

    0

    Muito ruim

    1

    Ruim

    2

    Razoável

    3

    Bom

    4

    Excelente

  8. Escolha o campo ShelfPlacement e, em seguida, na janela Propriedades, escolha o hiperlink Lista de Opções.

  9. Na caixa de diálogo Lista de Opções, digite os seguintes valores e escolha o botão OK.

    Valor

    Nome para exibição

    0

    Prateleira superior

    1

    Prateleira ao nível dos olhos

    2

    Prateleira inferior

  10. Escolha o campo AislePlacement e, em seguida, na janela Propriedades, escolha o hiperlink Lista de Opções.

  11. Na caixa de diálogo Lista de Opções, digite os seguintes valores e escolha o botão OK.

    Valor

    Nome para exibição

    0

    Meio do corredor

    1

    Final do corredor

    2

    Extremidade final do corredor

Para criar uma tela inicial

  1. Em Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.HTML Client e escolha Adicionar Tela.

    A caixa de diálogo Adicionar Nova Tela é exibida.

  2. Na lista Selecionar um modelo de tela, escolha Tela Procurar Dados.

  3. Na caixa de texto Nome da Tela, insira SurveysHome.

  4. Na lista Dados da Tela, escolha Pesquisas e clique no botão OK.

  5. No Designer de Tela, escolha o nó Tela | SurveysHome.

    A tela | Nó pesquisas Home

  6. Na janela Propriedades, escolha a caixa de texto Nome para Exibição e insira Pesquisas de Produto Contoso.

Para testar o aplicativo em um navegador

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

    O aplicativo aparece no navegador da Web e é semelhante à ilustração a seguir.

    A tela do aplicativo de pesquisa em um navegador local

    Nenhum item de pesquisa aparece, porque você ainda não digitou nenhum dado. Posteriormente, você adicionará uma tela para criar e editar dados de pesquisa.

  2. Feche a janela do navegador para parar a execução do aplicativo.

Habilitar hospedagem do SharePoint

Para criar um aplicativo que os representantes possam iniciar em um site do SharePoint, você deve habilitar a hospedagem no SharePoint modificando as configurações do projeto de cliente HTML.

Dica

Para hospedar o aplicativo, você precisa de um site Desenvolvedores do SharePoint no Office 365, que você pode obter na Developer Center for Apps for Office and SharePoint (Central de desenvolvimento de aplicativos para Office e SharePoint).

Para habilitar a hospedagem do SharePoint

  1. No Gerenciador de Soluções, escolha o nó SurveyApp.

  2. Na barra de menus, escolha Projeto, Habilitar SharePoint.

  3. No assistente Habilitando o SharePoint, insira a URL do seu site do Office 365 Developer e escolha o botão Finalizar.

    A URL deve utilizar o formato https:// MySite.sharepoint.com/sites/Developer/.

    Referências a vários assemblies do SharePoint são adicionadas ao projeto do LightSwitch, e um projeto para um aplicativo Web do SharePoint é adicionado à solução.

Para testar o aplicativo hospedado

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

    Na primeira vez em que você executar um aplicativo do SharePoint no seu computador, será solicitado que você instale um certificado Localhost porque os aplicativos do LightSwitch que estão habilitados para a hospedagem do SharePoint sempre usam SSL (Secure Sockets Layer). Se você aceitar esse certificado, um aviso de segurança não aparecerá sempre que você iniciar o aplicativo. Como o certificado se aplica somente ao Localhost, seu sistema não enfrenta nenhuma ameaça.

  2. Na caixa de diálogo Alerta de Segurança, escolha o botão Sim.

  3. Se uma caixa de diálogo Aviso de Segurança aparecer, escolha o botão Sim.

    Seu navegador da Web aparece.

  4. Na página entrar, escolha o botão Entrar.

  5. Insira sua senha e escolha o botão Entrar.

  6. Se solicitado, escolha o botão Confiar.

    O aplicativo aparece no navegador e é semelhante à ilustração a seguir.

    O aplicativo com o SharePoint chrome

    Uma barra aparece na parte superior da tela, de modo que o usuário possa navegar de volta para o site do SharePoint. Esta barra cromada do SharePoint aparece em todos os aplicativos para o SharePoint.

  7. Feche a janela do navegador para parar a execução do aplicativo.

Adicionar suporte para criar e editar dados de pesquisa

Agora que incorporou o SharePoint em seu aplicativo, você pode voltar e adicionar a funcionalidade para que os usuários possam criar e editar dados de pesquisa. Nesta seção, você irá adicionar algumas entidades anexando-as às listas do SharePoint, adicionar relacionamentos entre as entidades, modificar a tela inicial, criar uma tela de entrada de dados e associar a navegação da nova tela.

Para adicionar entidades

  1. Em um navegador da Web, localize o site Desenvolvedores do SharePoint usando a mesma URL que você inseriu no procedimento anterior para habilitar o SharePoint.

  2. Na barra de menus do Office 365, escolha o ícone Configurações e o item de menu Configurações de Site.

  3. Na lista Galerias de Web Designer, escolha Modelos de Lista.

  4. Na página Galeria do Web Designer, na barra de menus, escolha Arquivos, Carregar Documento.

  5. Na caixa de diálogo Adicionar um Modelo, escolha procurar, localize o arquivo de modelo contoso_customers_template.stp que foi incluído no download de exemplo e escolha o botão OK.

  6. Na caixa de diálogo Galeria de Modelos de Lista, escolha o botão Salvar.

  7. Na barra de menus, escolha Arquivos, Carregar Documento.

  8. Na caixa de diálogo Adicionar um Modelo, escolha procurar, localize o arquivo de modelo contoso_products_template.stp que foi incluído no download do exemplo e escolha o botão OK.

  9. Na caixa de diálogo Galeria de Modelos de Lista, escolha o botão Salvar.

  10. Na barra de menus Desenvolvedor, escolha Conteúdo do Site, o link adicionar um aplicativo e Modelo de Clientes Contoso.

  11. Na caixa de diálogo Adicionando Lista Personalizada, nomeie a lista Clientes e escolha o botão Criar.

  12. Na página Conteúdo do Site, escolha o link adicionar um aplicativo e escolha Modelo de Produtos Contoso.

  13. Na caixa de diálogo Adicionando Lista Personalizada, nomeie a lista Produtos e escolha o botão Criar.

  14. No Visual Studio, no Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server e escolha Adicionar Fonte de Dados.

  15. No Assistente para Anexar Fonte de Dados, escolha o ícone SharePoint e o botão Próximo.

  16. Na caixa de texto Especificar o endereço do SharePoint, digite a URL do site Desenvolvedores do SharePoint e escolha o botão Próximo.

  17. Na lista Selecione as entidades para usar em seu aplicativo, expanda o nó Lista, marque as caixas de seleção Cliente e Produtos e escolha o botão Finalizar.

    As entidades Customers, Products e UserInformationList são adicionadas ao aplicativo.

Para criar relações entre entidades

  1. No Gerenciador de Soluções, expanda o nó Fontes de Dados, abra o menu de atalho do nó Surveys.lsml e escolha Abrir.

  2. No Entity Designer, na barra de ferramentas, escolha o link Relação.

    A caixa de diálogo Adicionar Nova Relação aparece.

  3. Na coluna Para, na lista Nome, escolha Cliente e o botão OK.

  4. No Entity Designer, escolha o link Relação.

  5. Na caixa de diálogo Adicionar Nova Relação, na coluna Para, na lista Nome, escolha Produto e, em seguida, escolha o botão OK.

Para modificar a tela inicial

  1. No Gerenciador de Soluções, abra o menu de atalho do nó SurveysHome.lsml e, em seguida, escolha Abrir.

  2. No painel central do Designer de Tela, expanda a lista do nó Pesquisa e escolha Layout das Linhas.

  3. Escolha os nós Nome do Representante de Vendas, Limpeza, Iluminação, Posicionamento da Prateleira e Posicionamento do Corredor e exclua-os.

  4. Na lista Adicionar, escolha Cliente.

  5. Na lista Adicionar, escolha Produto.

Para adicionar uma tela para a criação e a edição de pesquisas

  1. No Designer da Tela, expanda o nó Barra de Comandos e escolha Adicionar.

  2. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Escolha um método existente.

  3. Na lista showTab, escolha addAndEditNew.

  4. Na lista Navegar até, escolha Nova Tela e escolha o botão OK.

    A caixa de diálogo Adicionar Nova Tela é aberta.

  5. Na caixa de diálogo Adicionar Nova Tela, aceite os valores padrão e escolha o botão OK.

  6. No Designer de Tela, mova os nós Cliente e Produto de modo que eles apareçam embaixo do nó Nome do Representante de Vendas.

  7. Exclua o nó Layout das Linhas | À Direita.

Para adicionar navegação de tela

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Surveys Home.lsml e, em seguida, escolha Abrir.

  2. No Designer de Tela, escolha o nó Lista | Minhas Pesquisas de Produto.

  3. Na janela Propriedades, escolha o hiperlink Toque em Item: Nenhum.

    A caixa de diálogo Editar Ação de Toque em Item é aberta.

  4. Na lista showTab, escolha editSelected.

  5. Na lista Navegar até, escolha Adicionar/Editar Pesquisa e escolha o botão OK.

Para testar as alterações

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

  2. Na tela inicial, escolha o botão Adicionar Pesquisa.

    A tela Adicionar/Editar Pesquisa aparece.

  3. Expanda a lista Cliente para exibir dados de exemplo do cliente.

  4. Expanda a lista Produto para exibir dados de exemplo do produto.

  5. Expanda cada uma das listas restantes para exibir as opções que você inseriu anteriormente nesta instrução passo a passo.

  6. Feche a janela do navegador para parar a execução do aplicativo.

Adicionar lógica para nome do representante de vendas

Os representantes de vendas não precisam inserir sempre seus nomes ao criarem uma pesquisa. Em seguida, você adicionará lógica para popular o campo Nome do representante de vendas automaticamente com o nome do usuário atual autenticado e para mostrar apenas as pesquisas criadas por representante.

Para definir um valor padrão

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Surveys.lsml e, em seguida, escolha Abrir.

    O Entity Designer abre.

  2. Na lista Gravar Código, escolha Surveys_Inserting.

  3. No Editor de Códigos, adicione o seguinte código ao método Surveys_Inserting:

    entity.SalesRepName = Application.User.Name

    entity.SalesRepName = this.Application.User.Name;

    Esse método é executado no pipeline de gravação do servidor sempre que uma entidade Pesquisa é inserida. Quando o aplicativo recuperar as informações do usuário, ele corresponderá ao usuário que se conectou ao SharePoint.

  4. No Gerenciador de Soluções, abra o menu de atalho do nó AddEditSurvey.lsml e, em seguida, escolha Abrir.

    O Designer de Tela é aberto.

  5. No painel central, exclua o nó Nome do Representante de Vendas.

Para adicionar lógica de filtragem

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Surveys.lsml e, em seguida, escolha Abrir.

    O Entity Designer abre.

  2. Na lista Gravar Código, escolha Surveys_Filter.

  3. No Editor de Códigos, adicione o seguinte código ao método Surveys_Filter:

    filter = Function(e) e.SalesRepName = Application.User.Name

    filter = f => f.SalesRepName == this.Application.User.Name;

    Esse método é executado no servidor sempre que a entidade Pesquisa é consultada.

Para testar as alterações

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

  2. Na tela inicial, escolha o botão Adicionar Pesquisa.

  3. Na lista Cliente, escolha um cliente.

  4. Na lista Produto, escolha um produto.

  5. Em cada uma das listas restantes, escolha um valor e escolha o botão Salvar.

  6. Verifique se a lista de pesquisas contém a pesquisa que você acabou de criar.

  7. Feche a janela do navegador para parar a execução do aplicativo.

Adicionar lógica para a data de pesquisa mais recente

Em seguida, você adicionará código para refletir a data na qual a pesquisa foi realizada pela última vez no site de cada cliente.

Para atualizar a data da pesquisa mais recente

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Surveys.lsml e, em seguida, escolha Abrir.

  2. Na lista Gravar Código, escolha Surveys_Inserted.

  3. No Editor de Códigos, adicione o seguinte código ao método 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 If

    Customer c = this.DataWorkspace.DeveloperData.Customers.Where(f =>
 f.CompanyName == entity.Customer.CompanyName).FirstOrDefault();

            if (c != null)
            {
                c.LastSurveyDate = DateTime.Today;
                this.DataWorkspace.DeveloperData.SaveChanges();
            }

Para testar as alterações

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

  2. Na tela inicial, escolha o botão Adicionar Pesquisa.

  3. Na lista Cliente, escolha um cliente.

  4. Na lista Produto, escolha um produto.

  5. Em cada uma das listas restantes, escolha um valor e escolha o botão Salvar.

  6. Verifique se a lista de pesquisas contém a pesquisa que você acabou de criar.

  7. Na barra de menus, escolha Voltar ao Site.

    O site Desenvolvedores do SharePoint aparece. Na lista Clientes, LastSurveyDate foi atualizado para o cliente que você acabou de pesquisar.

  8. Feche a janela do navegador para parar a execução do aplicativo.

Atualizar a tela inicial e a barra de título

Em seguida você irá atualizar a tela inicial que aparece enquanto o aplicativo está sendo iniciado, para exibir o nome do aplicativo em vez do nome do projeto. Você também modificará o nome que aparece na barra de título ou na guia do navegador.

Para atualizar as cadeias de caracteres de exibição

  1. No Gerenciador de Soluções, expanda o nó SurveyApp.HTMLClient, abra o menu de atalho do arquivo default.htm e escolha Abrir.

  2. No Editor de Códigos, localize o elemento <div> e substitua SurveyApp por Contoso Product Surveys.

    Essa cadeia de caracteres aparecerá na tela inicial.

  3. No elemento <título>, substitua SurveyApp por Contoso Product Surveys.

Para testar as alterações

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

    Observe que Pesquisas de Produto Contoso aparece na tela inicial e na barra de título.

  2. Feche a janela do navegador para parar a execução do aplicativo.

Adicionar suporte para carregar e exibir fotos

Em seguida, você adicionará suporte para carregar fotos em uma Biblioteca de Imagens do SharePoint. Quando um representante de vendas carregar uma fotografia, o SharePoint criará automaticamente uma miniatura da fotografia e uma versão que é otimizada para a Web. Essas imagens adicionais ajudarão representantes de vendas a procurar e gerenciar imagens com mais rapidez e mais facilidade no SharePoint do que no banco de dados SQL do LightSwitch.

Os aplicativos para SharePoint podem incluir uma variedade de recursos, como listas, módulos, tipos de conteúdo e recipientes de propriedades que residem no aplicativo Web e que são instalados e removidos como parte do aplicativo.

Para adicionar uma entidade Foto

  1. Em Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server e escolha Adicionar Tabela.

  2. Na janela Propriedades, na caixa de texto Nome, insira Foto.

  3. No Entity Designer, insira os seguintes valores:

    Nome

    Tipo

    Obrigatório

    FullImageUrl

    Endereço Web

    Sim

    ThumbnailUrl

    Endereço Web

    Sim

    OptimizedUrl

    Endereço Web

    Sim

    NameWithExt

    Cadeia de caracteres

    Sim

    CreatedDate

    Date Time

    Sim

Para adicionar uma relação

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Surveys.lsml e, em seguida, escolha Abrir.

  2. No Entity Designer, na barra de ferramentas, escolha o link Relação.

  3. Na caixa de diálogo Adicionar Nova Relação, na linha Nome e na coluna Para, escolha Foto na lista.

  4. Na linha Multiplicidade e na coluna De, escolha Um na lista.

  5. Na linha Multiplicidade e na coluna Para, escolha Muitos na lista.

  6. Na linha Comportamento de Exclusão e na coluna De, escolha Exclusão em cascata na lista e clique no botão OK.

Para adicionar uma biblioteca de imagens do SharePoint

  1. No Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.SharePoint, escolha Adicionar e, em seguida, escolha Novo Item.

  2. Na caixa de diálogo Adicionar Novo Item, escolha Lista.

  3. Na caixa de texto Nome, insira Fotos e escolha o botão Adicionar.

  4. Em Assistente de Personalização do SharePoint, escolha o botão de opção Criar uma lista com base em um modelo de lista existente.

  5. Na lista Anúncios, escolha Biblioteca de Imagens e o botão Finalizar.

Para adicionar uma classe de utilitário

  1. No Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server, escolha Adicionar e Item Existente.

    A caixa de diálogo Adicionar Item Existente é aberta.

  2. Localize o arquivo PhotoListHelper.vb ou PhotoListHelper.cs que você baixou como parte do exemplo e escolha o botão Adicionar.

  3. No Editor de Códigos, no método AddPhoto, localize a linha siteContext.ExecuteQuery() e adicione o seguinte código:

    siteContext.Load(siteContext.Web)
siteContext.ExecuteQuery()

    siteContext.Load(siteContext.Web);
siteContext.ExecuteQuery();

    Dica

    Esse código adicional é necessário no Visual Studio 2013 para evitar uma exceção em chamadas subsequentes à URL.

  4. Na barra de menus, escolha Compilação, Compilar Solução para garantir que o código seja compilado corretamente.

Para adicionar um controlador WebAPI

  1. No Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server, escolha Adicionar e Novo Item.

  2. Na caixa de diálogo Adicionar Novo Item, escolha o nó Web e o modelo Classe Controller de API Web.

  3. Na caixa de texto Nome, insira PhotosController e escolha o botão Adicionar.

  4. No Editor de Códigos, substitua o conteúdo pelo seguinte código:

    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 Class

    using 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;
        }
}

    Observe que esse código recupera o objeto de host SharePoint usando a API do servidor para LightSwitch: appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(). O objeto de host SharePoint dá acesso a várias propriedades e métodos úteis usados para interagir com o site do SharePoint. Em particular, o método GetAppWebClientContext fornece um ponto de entrada para interagir com ativos que pertencem ao aplicativo Web. Quando o aplicativo Web ClientContext é recuperado, o token de contexto adequado é usado para a comunicação com o SharePoint.

Para adicionar uma rota HTTP ao controlador

  1. No Gerenciador de Soluções, abra o menu de atalho do nó SurveyApp.Server, escolha Adicionar e Novo Item.

  2. Na caixa de diálogo Adicionar Novo Item, escolha o nó Web e o modelo Classe de Aplicativo Global.

  3. Na caixa de texto Nome, insira Global.asax e escolha o botão Adicionar.

  4. No Editor de Códigos, insira as seguintes instruções Imports ou Using:

    Imports System.Web.Routing
Imports System.Web.Http

    using System.Web.Routing;
using System.Web.Http;

    Adicione o seguinte código ao método Application_Start:

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

    A rota HTTP permite que o controlador seja invocado no cliente.

  5. Na barra de menus, escolha Compilação, Compilar Solução para garantir que o código seja compilado corretamente.

Autenticar o aplicativo para interagir com a biblioteca de imagens de fotos

O aplicativo Web, que contém a biblioteca de imagens Fotos, reside em um domínio isolado. Por padrão, como seu aplicativo não é autenticado para interagir com o aplicativo Web, você deve adicionar um script simples para executar essa autenticação.

Para adicionar autenticação

  1. No Gerenciador de Soluções, expanda o nó SurveyApp.HTMLClient, abra o menu de atalho do nó Scripts, escolha Adicionar e Item Existente.

  2. Na caixa de diálogo Adicionar Item Existente, localize o arquivo sharepointauthhelper.js que você baixou como parte do exemplo e escolha o botão Adicionar.

  3. No Editor de Códigos, substitua o conteúdo pelo seguinte código:

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

    Dica

    Em Visual Studio 2013, a autenticação para aplicativos do SharePoint usa uma cadeia de caracteres de consulta em vez de um cookie para passar a URL.

  4. No Gerenciador de Soluções, abra o menu de atalho do arquivo default.htm e escolha Abrir.

  5. No arquivo default.htm, adicione a referência a seguir:

    <script type="text/javascript" src="Scripts/sharepointauthhelper.js"></script

  6. Na barra de menus, escolha Compilação, Compilar Solução para garantir que o código seja compilado corretamente.

Adicionar um controle personalizado para carregar fotos

Em seguida, você criará um controle personalizado que solicitará que os representantes de vendas carreguem fotos de cada exibição de produto.

Para criar o controle personalizado

  1. No Gerenciador de Soluções, expanda o nó SurveyApp.HTMLClient, abra o menu de atalho do nó Scripts, escolha Adicionar e Item Existente.

  2. Na caixa de diálogo Adicionar Item Existente, localize o arquivo photohelper.js que você baixou como parte do exemplo e escolha o botão Adicionar.

  3. No Gerenciador de Soluções, abra o menu de atalho do arquivo default.htm e escolha Abrir.

  4. No Editor de Códigos, adicione a seguinte referência:

    <script type="text/javascript" src="Scripts/photohelper.js"></script>

  5. No Gerenciador de Soluções, na barra de ferramentas, escolha Modo de Exibição Lógico na lista.

  6. Abra o menu de atalho do nó de tela AddEditSurvey.lsml e escolha Abrir.

  7. No Designer de Tela, abra o menu de atalho do nó Pop-ups e escolha Adicionar Pop-up.

  8. Na janela Propriedades, na caixa de texto Nome, insira UploadPhotos.

  9. No Designer de Tela, no nó Layout das Linhas | Carregar Fotos, expanda o nó Adicionar e selecione Novo Controle Personalizado.

    A caixa de diálogo Adicionar Controle Personalizado é exibida.

  10. Escolha o botão OK para aceitar o valor padrão de Tela e feche a caixa de diálogo.

  11. Na janela Propriedades, na caixa de texto Nome, insira UploadControl e escolha o hiperlink Editar Código de Renderização.

  12. Em Editor de Códigos, insira a seguinte linha de código acima do método myapp.AddEditSurvey.UploadControl_render:

    var $uploadControlElement, uploadControlContentItem;

    Adicione o seguinte código ao corpo do método:

    $uploadControlElement = $(element);
    uploadControlContentItem = contentItem;

    Quando um representante de vendas carregar uma fotografia, esse código criará uma entidade Foto no banco de dados intrínseco com referências de propriedade para as URLs de imagem de miniatura de tamanho máximo e otimizado na Biblioteca ed Imagens. Essa entidade será usada em uma etapa posterior para exibir as imagens no aplicativo de pesquisa.

  13. No Gerenciador de Soluções, abra o menu de atalho do nó da tela AddEditSurvey.lsml e escolha Abrir.

  14. No Designer de Tela, abra o menu de atalho do nó Layout das Linhas | Carregar Fotos e escolha Adicionar Botão.

  15. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Escrever meu próprio método.

  16. Nomeie o método UploadPhoto e escolha o botão OK.

  17. No Designer de Tela, abra o menu de atalho do nó Carregar Foto e escolha Editar Código de Execução.

  18. No Editor de Códigos, adicione o seguinte código ao método Upload:

    if ($("#fileInput").val() != "") {
        $.mobile.loading('show');
        $("#uploadForm").submit();
    }

    Esse código é executado quando o usuário toca no botão Carregar Foto no UploadControl.

  19. No Designer de Tela, abra o menu de atalho do nó Guias e escolha Adicionar Guia.

  20. Na janela Propriedades, nomeie a guia Fotos.

  21. Abaixo do nó Layout das Linhas | Fotos, abra o menu de atalho do nó Barra de Comandos e escolha Adicionar Botão.

  22. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Gravar meu próprio método, nomeie o método UploadPhotos e escolha o botão OK.

  23. Na janela Propriedades, insira Carregar Fotos como o nome para exibição.

  24. Na lista Ícone, escolha Adicionar Imagem.

  25. No Designer de Tela, abra o menu de atalho do nó Carregar Fotos e escolha Editar Código de Execução.

  26. No Editor de Códigos, adicione o seguinte código:

    showUploadPopup(screen);

    Esse código exibe informações Pop-up quando o usuário toca no botão Carregar Fotos.

  27. Na barra de menus, escolha Compilação, Compilar Solução para garantir que o código seja compilado corretamente.

Adicionar suporte de tela para exibir fotos

Em seguida, você adicionará suporte para a exibição de fotos na tela AddEditSurvey. Uma imagem de miniatura será exibida para cada fotografia e, em seguida, quando um representante de vendas escolher a miniatura, a imagem maior e otimizada para Web será exibida em uma caixa de diálogo. Além disso, você adicionará suporte para excluir fotos quando um representante de vendas excluir registros dessas fotos.

Para exibir uma imagem em miniatura

  1. No Gerenciador de Soluções, abra o menu de atalho do nó da tela AddEditSurvey.lsml e escolha Abrir.

  2. No painel à esquerda do Designer de Tela, escolha o hiperlink Adicionar Fotos.

    A consulta Fotos é adicionada à tela.

  3. No painel central do Designer de Tela, na lista Adicionar do nó Layout das Linhas | Fotos, escolha Fotos.

  4. Na lista Lista, escolha Lista Lado a Lado.

  5. Exclua os nós URL de Imagem Completa, URL Otimizada, Nome com Ext, Data de criação e Pesquisa.

    Somente o nó URL da Miniatura deve permanecer.

  6. Na lista do nó URL da Miniatura, escolha Imagem.

  7. Na janela Propriedades, em Largura, na caixa de texto Pixels, insira 60.

  8. Em Altura, na caixa de texto Pixels, digite 60.

Para adicionar um pop-up

  1. No Designer de Tela, escolha o nó Pop-ups e Adicionar Pop-up.

  2. Na janela Propriedades, na caixa de texto Nome, insira ViewPhotoDetails.

  3. No painel à esquerda do Designer de Tela, mova o nó Nome com Ext de modo que ele apareça sob o nó Layout das Linhas | Exibir Detalhes da Foto.

  4. Na lista do nó Nome com Ext, escolha Texto.

  5. Mova o nó Data de criação de modo que ele apareça embaixo do nó Nome com Ext.

  6. Na lista do nó Data de criação, escolha Texto.

  7. Mova o nó URL Otimizada de modo que ele apareça embaixo do nó Data de criação.

  8. Na lista do nó URL Otimizada, escolha Imagem.

  9. Na janela Propriedades, na lista Largura, escolha Ajustar ao Conteúdo.

  10. Na lista Altura, escolha Ajustar ao Conteúdo.

  11. Na lista Posição do Rótulo, escolha Nenhum.

  12. No Designer de Tela, escolha o nó Lista Lado a Lado | Fotos.

  13. Na janela Propriedades, escolha o hiperlink Toque em Item.

    A caixa de diálogo Editar Ação de Toque em Item aparece.

  14. Na lista Pop-up, escolha Exibir Detalhes da Foto e o botão OK.

Para adicionar suporte para a exclusão de fotos

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Photos.lsml e, em seguida, escolha Abrir.

    O Entity Designer abre.

  2. Na lista Gravar Código, escolha Photos_Deleted.

  3. No Editor de Códigos, adicione o seguinte código ao método Photos_Deleted:

    Try
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext())
            Catch ex As Exception
            End Try

    try
            {
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext());
            }
            catch (Exception) { }

    A relação entre as entidades Fotos e Pesquisas foi definida como Exclusão em Cascata, de forma que o método Photos_Deleted seja chamado quando um registro de pesquisa é excluído. Esse código chama o método DeletePhoto da classe PhotoListHelper para excluir as fotos da lista do SharePoint.

  4. No Gerenciador de Soluções, abra o menu de atalho do nó AddEditSurvey.lsml e, em seguida, escolha Abrir.

  5. No Designer de Tela, abra o menu de atalho do nó Layout das Linhas | Exibir Detalhes da Foto e escolha Adicionar Botão.

  6. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Escrever meu próprio método.

  7. Na caixa de texto Método, insira DeletePhoto e escolha o botão OK.

  8. Abra o menu de atalho do nó Excluir Foto e escolha Editar Código de Execução.

  9. No Editor de Códigos, adicione o seguinte código ao método DeletePhoto_Execute:

    deleteCurrentPhoto(screen);

    Como você adicionou esse código JavaScript, os representantes de vendas podem excluir fotos sem excluir a pesquisa associada.

Para testar as alterações

  1. Na barra de menus, escolha Depurar, Iniciar Depuração.

  2. Na tela inicial, escolha o botão Adicionar.

  3. Na lista Cliente, escolha um cliente.

  4. Na lista Produto, escolha um produto.

  5. Em cada uma das listas restantes, escolha um valor e escolha o botão Salvar.

  6. Na lista de pesquisas, verifique se a pesquisa que você acabou de criar aparece.

  7. Na guia Fotos, escolha o botão Carregar Fotos.

  8. Na caixa de diálogo Carregar Fotos, escolha o botão Procurar, navegue até uma foto em seu computador local e clique no botão Abrir.

  9. Escolha o botão Carregar Foto e a imagem de miniatura que aparece.

    A caixa de diálogo Exibir Imagem de Foto aparece e mostra a imagem com tamanho máximo.

  10. Escolha o botão Excluir Foto e verifique se a miniatura foi removida.

  11. Feche a janela do navegador para parar a execução do aplicativo.

Publicar o aplicativo concluído no SharePoint

Até agora você executou somente o aplicativo em modo de depuração, que usa o SharePoint para fornecer autenticação e o redireciona para a instância do computador local do IIS Express. Agora seu aplicativo está completo e você pode publicá-lo no site SharePoint local, para o Microsoft Azure ou para um site de hospedagem de terceiros. Depois que você publica seu aplicativo, outras pessoas podem executá-lo do SharePoint em seus computadores e dispositivos móveis. Consulte How to: Publish a cloud business app to SharePoint (Como publicar um aplicativo de negócios na nuvem no SharePoint).

Consulte também

Outros recursos

Aplicativos do LightSwitch para SharePoint