Compartir a través de

Tutorial: Crear una aplicación para SharePoint utilizando LightSwitch

  • Artículo

LightSwitch le permite crear una aplicación para SharePoint en la que los usuarios móviles puedan ver, agregar y actualizar datos de SharePoint de ubicaciones remotas mediante modernos dispositivos con pantalla táctil, como teléfonos o tabletas. En este tutorial, creará una aplicación en la que los representantes de ventas de un distribuidor ficticio de comida, Contoso Foods, puedan escribir los datos de una encuesta sobre cómo exponen sus productos las tiendas asociadas.

Los representantes visitan con frecuencia estos establecimientos para entregar productos y realizar encuestas de calidad que evalúan la presencia de cada producto dentro del almacén. Durante la encuesta, los representantes suelen recopilar los siguientes tipos de datos:

  • Limpieza de la presentación (que va de “muy deficiente” a “excelente").

  • Iluminación del producto (también va de “muy deficiente” a “excelente").

  • Ubicación del producto en el pasillo (mitad del pasillo, final del pasillo o extremo final del pasillo).

  • Alto de estante del producto (estante superior, estante al nivel de los ojos o estante inferior).

Los representantes también toman fotografías de las presentaciones del producto a fin de contar con un apoyo para las evaluaciones generales.

Requisitos previos

Para este tutorial se requiere Visual Studio 2013.

También necesitará los archivos de ejemplo, que puede descargar en Tutorial de una aplicación de encuestas: Desarrollo de una aplicación de SharePoint con LightSwitch.

Para hospedar la aplicación, también debe disponer de un sitio para desarrolladores de SharePoint en Office 365, que puede obtener en la página Registrarse en un sitio para desarrolladores de Office 365.

Crear una aplicación LightSwitch en HTML

Para desarrollar una aplicación LightSwitch para SharePoint, primero debe crear un proyecto de cliente en Silverlight o en HTML. En este tutorial, utilizará HTML para optimizar las pantallas para dispositivos móviles.

Para crear el proyecto

  1. En la barra de menús, elija Archivo, Nuevo, Proyecto.

    Aparece el cuadro de diálogo Nuevo proyecto.

  2. En la lista de plantillas, expanda el nodo de Visual Basic o de Visual C# y, a continuación, elija el nodo LightSwitch y Aplicación HTML de LightSwitch (Visual Basic) o Aplicación HTML de LightSwitch (Visual C#).

  3. En el cuadro de texto Nombre, escriba SurveyApp y elija el botón Aceptar.

Agregar compatibilidad para mostrar datos de encuestas

A medida que los representantes especifican datos, deben comprobar lo que han escrito y recuperar los datos más adelante. Para agregar esta funcionalidad, comience agregando una entidad Encuesta a la base de datos intrínseca que almacene los datos de la encuesta y, después, agregue una pantalla principal para mostrar los datos. La pantalla principal aparece cuando un representante inicia la aplicación.

Para agregar la entidad Survey

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server y, a continuación, elija Agregar tabla.

    Aparece el Diseñador de entidades.

  2. En la ventana Propiedades, en el cuadro de texto de la propiedad Nombre, escriba Encuesta.

  3. En el Diseñador de entidades, especifique los siguientes valores:

    Nombre

    Tipo

    Obligatorio

    NombreRepVentas

    String

    No

    Limpieza

    Integer

    Sí

    Iluminación

    Integer

    Sí

    PosiciónEstante

    Integer

    Sí

    PosiciónPasillo

    Integer

    Sí

  4. Elija el campo Limpieza y, a continuación, en la ventana Propiedades, elija el hipervínculo Lista de opciones.

  5. En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, elija el botón Aceptar.

    Valor

    Nombre para mostrar

    0

    Muy deficiente

    1

    Insuficiente

    2

    Aceptable

    3

    Bueno

    4

    Excelente

  6. Elija el campo Iluminación y, a continuación, en la ventana Propiedades, elija el hipervínculo Lista de opciones.

  7. En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, elija el botón Aceptar.

    Valor

    Nombre para mostrar

    0

    Muy deficiente

    1

    Insuficiente

    2

    Aceptable

    3

    Bueno

    4

    Excelente

  8. Elija el campo PosiciónEstante y, a continuación, en la ventana Propiedades, elija el hipervínculo Lista de opciones.

  9. En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, elija el botón Aceptar.

    Valor

    Nombre para mostrar

    0

    Estante superior

    1

    Estante a la altura de los ojos

    2

    Estante inferior

  10. Elija el campo PosiciónPasillo y, a continuación, en la ventana Propiedades, elija el hipervínculo Lista de opciones.

  11. En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, elija el botón Aceptar.

    Valor

    Nombre para mostrar

    0

    Centro del pasillo

    1

    Final del pasillo

    2

    Extremo final del pasillo

Para crear una pantalla principal

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.HTML Client y, a continuación, elija Agregar pantalla.

    Aparecerá el cuadro de diálogo Agregar nueva pantalla.

  2. En la lista Seleccione una plantilla de pantalla, elija Pantalla Examinar datos.

  3. En el cuadro de texto Nombre de pantalla, escriba InicioEncuestas.

  4. En la lista Datos de pantalla, elija Encuestas y elija el botón Aceptar.

  5. En el Diseñador de pantallas, elija el nodo Pantalla | InicioEncuestas.

    Nodo Pantalla | Página principal de encuestas

  6. En la ventana Propiedades, elija el cuadro de texto Nombre para mostrar y escriba Encuestas de productos de Contoso.

Para probar la aplicación en un explorador

  1. En la barra de menús, elija Depurar, Iniciar depuración.

    La aplicación aparece en el explorador web y se asemeja a la siguiente ilustración.

    Pantalla de aplicación de encuesta en un explorador local

    No aparece ningún elemento de la encuesta porque todavía no ha especificado ningún dato. Después, agregará una pantalla para crear y editar los datos de la encuesta.

  2. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Habilitar el hospedaje en SharePoint

Para crear una aplicación que los representantes puedan iniciar desde un sitio de SharePoint, debe habilitar el hospedaje en SharePoint modificando los valores del proyecto del cliente HTML.

Nota

Para hospedar la aplicación, necesita un sitio para desarrolladores de SharePoint en Office 365, que puede obtener en la página Registrarse en un sitio para desarrolladores de Office 365.

Para habilitar el hospedaje de SharePoint

  1. En el Explorador de soluciones, elija el nodo SurveyApp.

  2. En la barra de menús, elija Proyecto, Habilitar SharePoint.

  3. En el asistente para Habilitar SharePoint, escriba la dirección URL del sitio para desarrolladores de Office 365 y, a continuación, elija el botón Finalizar.

    La dirección URL debe tener el formato https:// MiSitio.sharepoint.com/sites/Developer/.

    Al proyecto de LightSwitch se agregan referencias a varios ensamblados de SharePoint y a la solución se agrega un proyecto para una aplicación web de SharePoint.

Para probar la aplicación hospedada

  1. En la barra de menús, elija Depurar, Iniciar depuración.

    La primera vez que se ejecuta una aplicación de SharePoint en el equipo, se le solicita que instale un certificado Localhost porque las aplicaciones LightSwitch que están habilitadas para el hospedaje de SharePoint utilizan siempre SSL (Capa de sockets seguros). Si acepta este certificado, no aparecerá una advertencia de seguridad cada vez que se inicia la aplicación. Debido a que el certificado se aplica únicamente a Localhost, el sistema no se enfrenta a ninguna amenaza.

  2. En el cuadro de diálogo Alerta de seguridad, elija el botón Sí.

  3. Si aparece un cuadro de diálogo de Advertencia de seguridad, elija el botón Sí.

    Aparece el explorador web.

  4. En la página de inicio de sesión, elija el botón de Iniciar sesión.

  5. Escriba la contraseña y, a continuación, elija el botón Iniciar sesión.

  6. Si se le solicita, elija el botón Confiar.

    La aplicación aparece en el explorador y se asemeja a la siguiente ilustración.

    Aplicación con cromo de SharePoint

    Aparece una barra en la parte superior de la pantalla, de modo que el usuario pueda navegar de nuevo al sitio de SharePoint. Esta barra de SharePoint que permite volver al sitio aparece en todas las aplicaciones de SharePoint.

  7. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Agregar compatibilidad para crear y editar datos de encuestas

Ahora que ha incorporado SharePoint a la aplicación, puede volver a agregar funcionalidades de modo que los usuarios puedan crear y editar los datos de la encuesta. En esta sección, agregará un par de entidades más mediante la asociación con listas de SharePoint y, además, agregará relaciones entre entidades, modificará la pantalla principal, creará una pantalla de entrada de datos y enlazará la navegación a la nueva pantalla.

Para agregar entidades

  1. En un explorador web, busque el sitio para desarrolladores de SharePoint con la misma dirección URL que escribió en el procedimiento anterior para habilitar SharePoint.

  2. En la barra de menús de Office 365, elija el icono Configuración y, después, elija el elemento de menú Configuración del sitio.

  3. En la lista Galerías del diseñador web, elija Plantillas de lista.

  4. En la página Galería del diseñador web, en la barra de menús, elija Archivos, Cargar documento.

  5. En el cuadro de diálogo Agregar una plantilla, elija Examinar, busque el archivo de plantilla contoso_customers_template.stp que se incluye en el ejemplo de la descarga y, después, elija el botón Aceptar.

  6. En el cuadro de diálogo Galería de plantillas de listas, elija el botón Guardar.

  7. En la barra de menús, elija Archivos, Cargar documento.

  8. En el cuadro de diálogo Agregar una plantilla, elija Examinar, busque el archivo de plantilla contoso_products_template.stp que se incluye en el ejemplo de la descarga y, después, elija el botón Aceptar.

  9. En el cuadro de diálogo Galería de plantillas de listas, elija el botón Guardar.

  10. En la barra de menús Desarrollador, elija Contenidos del sitio, elija el vínculo Agregar una aplicación y, después, elija la plantilla de clientes de Contoso.

  11. En el cuadro de diálogo Agregar lista personalizada, asigne el nombre Clientes a la lista y elija el botón Crear.

  12. En la página Contenidos del sitio, elija el vínculo Agregar una aplicación y elija la plantilla de productos de Contoso.

  13. En el cuadro de diálogo Agregar lista personalizada, asigne el nombre Productos a la lista y elija el botón Crear.

  14. En Visual Studio, en el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server y, a continuación, elija Agregar origen de datos.

  15. En el Asistente para adjuntar origen de datos, elija el icono SharePoint y, después, elija el botón Siguiente.

  16. En el cuadro de texto Especificar la dirección del sitio de SharePoint, escriba la dirección URL para el sitio para desarrolladores de SharePoint y elija el botón Siguiente.

  17. En la lista Seleccione las entidades que va a usar en la aplicación, expanda el nodo Lista, active las casillas Cliente y Productos y, después, elija el botón Finalizar.

    Se agregan las entidades Clientes, Productos y ListaInformaciónUsuarios a la aplicación.

Para crear relaciones entre entidades

  1. En el Explorador de soluciones, expanda el nodo Orígenes de datos, abra el menú contextual para el nodo Encuestas.lsml y, a continuación, elija Abrir.

  2. En el Diseñador de entidades, en la barra de herramientas, elija el vínculo Relación.

    Aparecerá el cuadro de diálogo Agregar nueva relación.

  3. En la columna Para de la lista Nombre, elija Cliente y, después, elija el botón Aceptar.

  4. En el Diseñador de entidades, elija el vínculo Relación.

  5. En el cuadro de diálogo Agregar nueva relación, en la columna Para, en la lista Nombre, elija Producto y, después, elija el botón Aceptar.

Para modificar la pantalla principal

  1. En el Explorador de soluciones, abra el menú contextual para el nodo InicioEncuestas.lsml y, a continuación, elija Abrir.

  2. En el panel central del Diseñador de pantallas, expanda la lista para el nodo Encuesta y, a continuación, elija Diseño de filas.

  3. Elija los nodos Nombre del representante de ventas, Limpieza, Iluminación, Posición en estante y Posición en pasillo y, a continuación, elimínelos.

  4. En la lista Agregar, elija Cliente.

  5. En la lista Agregar, elija Producto.

Para agregar una pantalla para crear y editar encuestas

  1. En el diseñador de pantallas, expanda el nodo de Barra de comandos y, a continuación, elija Agregar.

  2. En el cuadro de diálogo Agregar botón, elija el botón de opción Elegir un método existente.

  3. En la lista showTab, elija addAndEditNew.

  4. En la lista Navegar a, elija Nueva pantalla y, después, elija el botón Aceptar.

    Se abre el cuadro de diálogo Agregar nueva pantalla.

  5. En el cuadro de diálogo Agregar nueva pantalla, acepte los valores predeterminados y elija el botón Aceptar.

  6. En el Diseñador de pantallas, mueva los nodos Cliente y Producto de modo que aparezcan debajo del nodo Nombre del representante de ventas.

  7. Elimine el nodo Diseño de filas | Derecha.

Para agregar navegación de pantalla

  1. En el Explorador de soluciones, abra el menú contextual para el nodo InicioEncuestas.lsml y, a continuación, elija Abrir.

  2. En el Diseñador de pantallas, elija el nodo Lista | Mis encuestas de producto.

  3. En la ventana Propiedades, elija el hipervínculo Puntear elemento: Ninguno.

    Se abre el cuadro de diálogo Editar acción ItemTap.

  4. En la lista showTab, elija editSelected.

  5. En la lista Navegar a, elija la opción para Agregar o editar Encuesta y, después, elija el botón Aceptar.

Para probar los cambios

  1. En la barra de menús, elija Depurar, Iniciar depuración.

  2. En la pantalla principal, elija el botón Agregar Encuesta.

    A abre la pantalla Agregar o editar Encuesta.

  3. Expanda la lista Cliente para mostrar los datos del cliente de ejemplo.

  4. Expanda la lista Producto para mostrar los datos del producto de ejemplo.

  5. Expanda las listas restantes para mostrar las opciones que especificó anteriormente en este tutorial.

  6. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Agregar lógica para el nombre del representante de ventas

Los representantes de ventas no deberían tener que escribir sus nombres cada vez que creen una encuesta. A continuación, agregará una lógica para rellenar el campo Nombre del representante de ventas automáticamente con el nombre del usuario autenticado actualmente y mostrar solo las encuestas que haya creado cada representante.

Para definir un valor predeterminado

  1. En el Explorador de soluciones, abra el menú contextual para el nodo Encuestas.lsml y, a continuación, elija Abrir.

    Se abre el Diseñador de entidades.

  2. En la lista Escribir código, elija Surveys_Inserting.

  3. En el Editor de código, agregue el siguiente código al método Surveys_Inserting:

    entity.SalesRepName = Application.User.Name

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

    Este método se ejecuta dentro de la canalización de almacenamiento del servidor siempre que se inserta una entidad Encuesta. Cuando la aplicación recupera la información de usuario, esta información pertenece al usuario que ha iniciado sesión en SharePoint.

  4. En el Explorador de soluciones, abra el menú contextual para el nodo AgregarEditarEncuesta.lsml y, a continuación, elija Abrir.

    Se abre el Diseñador de pantallas.

  5. En el panel central, elimine el nodo Nombre del representante de ventas.

Para agregar lógica de filtrado

  1. En el Explorador de soluciones, abra el menú contextual para el nodo Encuestas.lsml y, a continuación, elija Abrir.

    Se abre el Diseñador de entidades.

  2. En la lista Escribir código, elija Surveys_Filter.

  3. En el Editor de código, agregue el siguiente código al método Surveys_Filter:

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

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

    Este método se ejecuta en el servidor cada vez que se consulte la entidad Encuesta.

Para probar los cambios

  1. En la barra de menús, elija Depurar, Iniciar depuración.

  2. En la pantalla principal, elija el botón Agregar Encuesta.

  3. En la lista Cliente, elija un cliente.

  4. En la lista Producto, elija un producto.

  5. En cada una de las listas restantes, elija un valor y, después, elija el botón Guardar.

  6. Compruebe que la lista de encuestas contiene la encuesta que acaba de crear.

  7. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Agregar lógica para la fecha de la última encuesta

A continuación, agregará código para reflejar la fecha en la que se realizó la última encuesta en el sitio de cada cliente.

Para actualizar la fecha de la encuesta más reciente

  1. En el Explorador de soluciones, abra el menú contextual para el nodo Encuestas.lsml y, a continuación, elija Abrir.

  2. En la lista Escribir código, elija Surveys_Inserted.

  3. En el Editor de código, agregue el siguiente código al 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 probar los cambios

  1. En la barra de menús, elija Depurar, Iniciar depuración.

  2. En la pantalla principal, elija el botón Agregar Encuesta.

  3. En la lista Cliente, elija un cliente.

  4. En la lista Producto, elija un producto.

  5. En cada una de las listas restantes, elija un valor y, después, elija el botón Guardar.

  6. Compruebe que la lista de encuestas contiene la encuesta que acaba de crear.

  7. En la barra de menús, elija Volver al sitio.

    Se abre el sitio para desarrolladores de SharePoint. En la lista Clientes, se ha actualizado el valor de FechaÚltimaEncuesta del cliente que acaba de evaluar.

  8. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Actualizar la pantalla de presentación y la barra de título

A continuación, actualizará la pantalla de presentación, que aparece mientras se inicia la aplicación, para mostrar el nombre de la aplicación en lugar del nombre de proyecto. También modificará el nombre que aparece en la barra de título o en la pestaña del explorador.

Para actualizar las cadenas de la pantalla de presentación

  1. En el Explorador de soluciones, expanda el nodo SurveyApp.HTMLClient, abra el menú contextual para el archivo default.htm y, a continuación, elija Abrir.

  2. En el Editor de código, busque el elemento <div> y reemplace SurveyApp por Contoso Product Surveys.

    Esta cadena aparecerá en la pantalla de presentación.

  3. En el elemento <title>, reemplace SurveyApp por Contoso Product Surveys.

Para probar los cambios

  1. En la barra de menús, elija Depurar, Iniciar depuración.

    Observe que Contoso Product Surveys aparece en la pantalla de presentación y en la barra de título.

  2. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Agregar compatibilidad para cargar y mostrar fotografías

A continuación, agregará compatibilidad para cargar fotografías a una Biblioteca de imágenes de SharePoint. Cuando un representante de ventas carga una foto, SharePoint crea automáticamente una miniatura de esa foto y una versión optimizada para la Web. Estas imágenes adicionales permiten que los representantes de ventas puedan examinar y administrar imágenes más deprisa y con mayor facilidad en SharePoint que en la base de datos SQL para LightSwitch.

Las aplicaciones para SharePoint pueden incluir diversos activos como listas, módulos, tipos de contenido y contenedores de propiedades que residan en la web de la aplicación y que estén instalados y se quiten como parte de la aplicación.

Para agregar una entidad de fotografías

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server y, a continuación, elija Agregar tabla.

  2. En la ventana Propiedades, en el cuadro de texto Nombre, escriba Foto.

  3. En el Diseñador de entidades, especifique los siguientes valores:

    Nombre

    Tipo

    Obligatorio

    UrlImagenCompleta

    Web Address

    Sí

    UrlMiniatura

    Web Address

    Sí

    UrlOptimizada

    Web Address

    Sí

    NombreConExt

    String

    Sí

    FechaCreación

    Fecha Hora

    Sí

Para agregar una relación

  1. En el Explorador de soluciones, abra el menú contextual para el nodo Encuestas.lsml y, a continuación, elija Abrir.

  2. En el Diseñador de entidades, en la barra de herramientas, elija el vínculo Relación.

  3. En el cuadro de diálogo Agregar nueva relación, en la fila Nombre y en la columna Para, elija Foto en la lista.

  4. En la fila Multiplicidad y en la columna De, elija Uno en la lista.

  5. En la fila Multiplicidad y en la columna Para, elija Muchos en la lista.

  6. En la fila Comportamiento al eliminar y en la columna De, elija Eliminación en cascada en la lista y, después, elija el botón Aceptar.

Para agregar una biblioteca de imágenes de SharePoint

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.SharePoint, elija Agregar y luego Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, elija Lista.

  3. En el cuadro de texto Nombre, escriba Fotos y, después, elija el botón Agregar.

  4. En el Asistente para la personalización de SharePoint, elija el botón de opción Crear una instancia de lista basada en una plantilla de la lista existente.

  5. En la lista Anuncios, elija Biblioteca de imágenes y, después, elija el botón Finalizar.

Para agregar una clase de utilidad

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server, elija Agregar y luego Elemento existente.

    Se abrirá el cuadro de diálogo Agregar elemento existente.

  2. Busque el archivo PhotoListHelper.vb o PhotoListHelper.cs que descargó como parte del ejemplo y, a continuación, elija el botón Agregar.

  3. En el Editor de código, en el método AddPhoto, busque la línea siteContext.ExecuteQuery() y agregue el código siguiente:

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

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

    Nota

    Este código adicional es necesario en Visual Studio 2013 para evitar una excepción en llamadas posteriores a la dirección URL.

  4. En la barra de menús, elija Compilar, Compilar solución para garantizar que el código se compila correctamente.

Para agregar un controlador de WebAPI

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server, elija Agregar y luego Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, elija el nodo Web y, después, elija la plantilla de clase Controller de API Web.

  3. En el cuadro de texto Nombre, escriba PhotosController y elija el botón Agregar.

  4. En el Editor de código, reemplace el contenido por el código siguiente:

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

    Este código recupera el objeto host de SharePoint mediante la API de servidor para LightSwitch: appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(). El objeto host de SharePoint proporciona acceso a varias propiedades útiles y a los métodos que se utilizan para interactuar con el sitio de SharePoint. En concreto, el método GetAppWebClientContext proporciona un punto de entrada para interactuar con los activos que pertenecen a la web de la aplicación. Cuando se recupera el valor ClientContext de la web de la aplicación, se utiliza el token de contexto adecuado para volver a comunicarse en SharePoint.

Para agregar una ruta HTTP al controlador

  1. En el Explorador de soluciones, abra el menú contextual para el nodo SurveyApp.Server, elija Agregar y luego Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, elija el nodo Web y elija la plantilla Clase de aplicación global.

  3. En el cuadro de texto Nombre, escriba Global.asax y elija el botón Agregar.

  4. En el Editor de código, especifique las siguientes instrucciones Imports o Using:

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

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

    Agregue el código siguiente al 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 }
                           );
    }

    La ruta HTTP habilita el controlador para que se pueda invocar desde el cliente.

  5. En la barra de menús, elija Compilar, Compilar solución para garantizar que el código se compila correctamente.

Autenticar la aplicación para interactuar con la biblioteca de imágenes de fotografías

La web de la aplicación, que contiene la biblioteca de imágenes de fotos, reside en un dominio aislado. De forma predeterminada, la aplicación no se autentica para interactuar con el sitio web de la aplicación, por lo que debe agregar un script simple para realizar dicha autenticación.

Para agregar la autenticación

  1. En el Explorador de soluciones, expanda el nodo SurveyApp.HTMLClient, abra el menú contextual para el nodo Scripts, elija Agregar y, a continuación, elija Elemento existente.

  2. En el cuadro de diálogo Agregar elemento existente, busque el archivo sharepointauthhelper.js que descargó como parte del ejemplo y elija el botón Agregar.

  3. En el Editor de código, reemplace el contenido por el código siguiente:

    $(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

    En Visual Studio 2013, la autenticación para aplicaciones de SharePoint utiliza una cadena de consulta en lugar de una cookie para pasar la dirección URL.

  4. En el Explorador de soluciones, abra el menú contextual para el archivo default.htm y, a continuación, elija Abrir.

  5. En el archivo default.htm, agregue la siguiente referencia:

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

  6. En la barra de menús, elija Compilar, Compilar solución para garantizar que el código se compila correctamente.

Agregar un control personalizado para cargar fotografías

A continuación, creará un control personalizado que solicite a los representantes de ventas que carguen las fotos de cada presentación del producto.

Para crear el control personalizado

  1. En el Explorador de soluciones, expanda el nodo SurveyApp.HTMLClient, abra el menú contextual para el nodo Scripts, elija Agregar y, a continuación, elija Elemento existente.

  2. En el cuadro de diálogo Agregar elemento existente, busque el archivo photohelper.js que descargó como parte del ejemplo y elija el botón Agregar.

  3. En el Explorador de soluciones, abra el menú contextual para el archivo default.htm y, a continuación, elija Abrir.

  4. En el editor de código, agregue la siguiente referencia:

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

  5. En el Explorador de soluciones, en la barra de herramientas, elija Vista lógica en la lista.

  6. Abra el menú contextual para el nodo de pantalla AgregarEditarEncuesta.lsml y, a continuación, elija Abrir.

  7. En el Diseñador de pantallas, abra el menú contextual del nodo Emergentes y, a continuación, elija Agregar emergente.

  8. En la ventana Propiedades, en el cuadro de texto Nombre, escriba CargarFotos.

  9. En el Diseñador de pantallas, bajo el nodo Diseño de filas | Cargar fotos, expanda el nodo Agregar y, a continuación, elija Nuevo control personalizado.

    Aparece el cuadro de diálogo Agregar control personalizado.

  10. Elija el botón Aceptar para aceptar el valor predeterminado de Pantalla y cierre el cuadro de diálogo.

  11. En la ventana Propiedades, en el cuadro de texto Nombre, escriba ControlCarga y elija el hipervínculo de Editar código de representación.

  12. En el Editor de código, escriba la siguiente línea de código encima del método myapp.AddEditSurvey.UploadControl_render:

    var $uploadControlElement, uploadControlContentItem;

    Agregue el siguiente código al cuerpo del método:

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

    Cuando un representante de ventas cargue una fotografía, este código creará una entidad Foto en la base de datos intrínseca que incluya referencias de propiedad a las direcciones URL de las imágenes en miniatura, optimizadas y a tamaño completo de la Biblioteca de imágenes. Esta entidad se utilizará en un paso posterior para mostrar imágenes en la aplicación de la encuesta.

  13. En el Explorador de soluciones, abra el menú contextual para el nodo de pantalla AgregarEditarEncuesta.lsml y, a continuación, elija Abrir.

  14. En el Diseñador de pantallas, abra el menú contextual para el nodo Diseño de filas | Cargar fotos y, a continuación, elija Agregar botón.

  15. En el cuadro de diálogo Agregar botón, elija el botón de opción Escribir mi propio método.

  16. Asigne el nombre CargarFoto al método y, a continuación, elija el botón Aceptar.

  17. En el Diseñador de pantallas, abra el menú contextual para el nodo Cargar foto y, a continuación, elija Editar código de ejecución.

  18. En el Editor de código, agregue el siguiente código al método Upload:

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

    Este código se ejecuta cuando el usuario puntea el botón Cargar foto en ControlCarga.

  19. En el Diseñador de pantallas, abra el menú contextual para el nodo Pestañas y, a continuación, elija Agregar pestaña.

  20. En la ventana Propiedades, asigne el nombre Fotos a la pestaña.

  21. Bajo el nodo Diseño de filas | Fotos, abra el menú contextual para el nodo Barra de comandos y, a continuación elija Agregar botón.

  22. En el cuadro de diálogo Agregar botón, elija el botón de opción Escribir mi propio método, llame al método CargarFotos y elija el botón Aceptar.

  23. En la ventana Propiedades, escriba Cargar fotos como nombre para mostrar.

  24. En la lista Icono, elija Agregar imagen.

  25. En el Diseñador de pantallas, abra el menú contextual para el nodo Cargar fotos y, a continuación, elija Editar código de ejecución.

  26. En el Editor de códigos, agregue el siguiente código:

    showUploadPopup(screen);

    Este código muestra información emergente cuando el usuario puntea en el botón Cargar fotos.

  27. En la barra de menús, elija Compilar, Compilar solución para garantizar que el código se compila correctamente.

Agregar compatibilidad con pantalla para mostrar fotografías

A continuación, agregará compatibilidad para mostrar las fotos en la pantalla AgregarEditarEncuesta. Se muestra una imagen en miniatura para cada foto y, a continuación, cuando un representante de ventas elige la miniatura, aparece la imagen más grande optimizada para web en un cuadro de diálogo. Además, agregará la compatibilidad para eliminar las fotos cuando un representante de ventas elimine los registros de la encuesta de esas fotos.

Para mostrar una imagen en miniatura

  1. En el Explorador de soluciones, abra el menú contextual para el nodo de pantalla AgregarEditarEncuesta.lsml y, a continuación, elija Abrir.

  2. En el panel izquierdo del Diseñador de pantallas, elija el hipervínculo Agregar fotos.

    La consulta Fotos se agrega a la pantalla.

  3. En el panel central del Diseñador de pantallas, en la lista Agregar del nodo Diseño de filas | Fotos, elija Fotos.

  4. En la lista Lista, elija Lista de mosaicos.

  5. Elimine los nodos de URL de imagen completa, URL optimizada, Nombre con extensión, Fecha de creación y Encuesta.

    Solo debe dejar el nodo URL de miniaturas.

  6. En la lista del nodo de URL de miniaturas, elija Imagen.

  7. En la ventana Propiedades, en Ancho, en el cuadro de texto Píxeles, escriba 60.

  8. En Alto, en el cuadro de texto Píxeles, escriba 60.

Para agregar un elemento emergente

  1. En el Diseñador de la pantallas, elija el nodo Emergentes y, después, elija Agregar emergente.

  2. En la ventana Propiedades, en el cuadro de texto Nombre, escriba VerDetallesFoto.

  3. En el panel izquierdo del Diseñador de pantallas, mueva el nodo Nombre con extensión para que aparezca debajo del nodo Diseño de filas | Ver detalles de la foto.

  4. En la lista del nodo Nombre con extensión, elija Texto.

  5. Mueva el nodo Fecha de creación para que aparezca debajo del nodo Nombre con extensión.

  6. En la lista del nodo Fecha de creación, elija Texto.

  7. Mueva el nodo URL optimizada para que aparezca debajo del nodo Fecha de creación.

  8. En la lista del nodo URL optimizada, elija Imagen.

  9. En la ventana Propiedades, en la lista Ancho, elija Ajustar al contenido.

  10. En la lista Alto, elija Ajustar al contenido.

  11. En la lista Posición de etiqueta, elija Ninguno.

  12. En el Diseñador de pantallas, elija el nodo Lista de mosaico | Fotos.

  13. En la ventana Propiedades, elija el hipervínculo Puntear elemento.

    Aparece el cuadro de diálogo Editar acción ItemTap.

  14. En la lista Elemento emergente, elija Ver detalles de la foto y, después, elija el botón Aceptar.

Para agregar compatibilidad para eliminar fotografías

  1. En el Explorador de soluciones, abra el menú contextual para el nodo Fotos.lsml y, a continuación, elija Abrir.

    Se abre el Diseñador de entidades.

  2. En la lista Escribir código, elija Photos_Deleted.

  3. En el Editor de código, agregue el siguiente código al 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) { }

    La relación entre las entidades Fotos y Encuestas se estableció en Eliminación en cascada, por lo que se llama al método Photos_Deleted cuando se elimina un registro de encuesta. Este código llama al método DeletePhoto de la clase PhotoListHelper para eliminar las fotos de lista de SharePoint.

  4. En el Explorador de soluciones, abra el menú contextual para el nodo AgregarEditarEncuesta.lsml y, a continuación, elija Abrir.

  5. En el Diseñador de pantallas, abra el menú contextual para el nodo Diseño de filas | Ver detalles de la foto y, a continuación, elija Agregar botón.

  6. En el cuadro de diálogo Agregar botón, elija el botón de opción Escribir mi propio método.

  7. En el cuadro de texto Método, escriba DeletePhotoy, a continuación, elija el botón Aceptar.

  8. Abra el menú contextual para el nodo Eliminar foto y, a continuación, elija Editar código de ejecución.

  9. En el Editor de código, agregue el siguiente código al método DeletePhoto_Execute:

    deleteCurrentPhoto(screen);

    Como agregó este código JavaScript, los representantes de ventas pueden ahora eliminar fotos sin tener que eliminar la encuesta asociada.

Para probar los cambios

  1. En la barra de menús, elija Depurar, Iniciar depuración.

  2. En la pantalla principal, elija el botón Agregar.

  3. En la lista Cliente, elija un cliente.

  4. En la lista Producto, elija un producto.

  5. En cada una de las listas restantes, elija un valor y, después, elija el botón Guardar.

  6. En la lista de encuestas, compruebe que aparece la encuesta que acaba de crear.

  7. En la pestaña Fotos, elija el botón Cargar fotos.

  8. En el cuadro de diálogo Cargar fotos, elija el botón Examinar, busque una foto en el equipo local y, después, elija el botón Abrir.

  9. Elija el botón Cargar fotos y, a continuación, elija la imagen en miniatura que aparece.

    Aparece el cuadro de diálogo Ver imagen de la foto y muestra la imagen del mismo tamaño.

  10. Elija el botón Eliminar foto y compruebe que la miniatura se ha eliminado.

  11. Cierre la ventana del explorador para evitar que la aplicación se ejecute.

Publicar la aplicación finalizada en SharePoint

Hasta ahora, solo ha ejecutado la aplicación en modo de depuración, donde se utiliza SharePoint para proporcionar la autenticación y se redirige a la instancia del equipo local de IIS Express. La aplicación ya está completa y puede publicarla en un sitio de SharePoint local, en Microsoft Azure o en un sitio de hospedaje de terceros. Después de publicar la aplicación, otros podrán ejecutarla desde SharePoint en equipos y dispositivos móviles. Consulte Procedimiento para publicar una aplicación empresarial de nube en SharePoint.

Vea también

Otros recursos

Aplicaciones LightSwitch para SharePoint