SharePoint 2013: Creación de una Cloud Business App paso a paso (I)!

Como sabéis, y más después de las novedades en la última SharePoint Conference en Las Vegas, uno de los tipos de aplicaciones que podemos crear para SharePoint 2013 (OnPremise y Online) son las Cloud Business App que hacen uso de la filosofía de creación de aplicaciones que conocemos de LightSwitch. En este post vamos a ver como crear una Cloud Business App paso a paso haciendo uso del Update de marzo de las Office Developer Tools para Visual Studio:

  • Iniciamos Visual Studio 2012 / 2013 y creamos un proyecto de tipo Cloud Business App.
  • A continuación especificamos la Url del sitio de Office 365 en el que vamos a desplegar la Aplicación. Una vez concluye el proceso de creación de los proyectos relativos a la aplicación de tipo Cloud Business App, podremos comprobar que se crean un total de 4 proyectos.
image image
  • Además, se muestra la superficie de diseño de los contenedores de datos para la App que nos permite indicar como fuente de datos una Tabla creada desde cero o bien elegir un origen de datos externo.

  • En nuestro caso vamos a elegir la primera de las opciones, aunque podemos revisar los tipos de fuentes de datos externas que se soportan en aplicaciones de este tipo.

image image
  • La opción “Create new table” nos permite crear una tabla desde cero. En nuestro caso vamos a crear una tabla Clientes con los tipos de datos que se muestran en la correspondiente ventana del asistente.

  • Una vez que la tabla está creada, nos vamos a la carpeta “Screens” del proyecto que contiene en su nombre “HTMLClient”. Seleccionamos dicha carpeta y hacemos clic en la opción “Add screen…” disponible en el menú contextual.

image image
  • En la ventana que se abre podemos optar por crear todas las ventanas necesarias para interactuar con la tabla que hemos creado (opción “Common Screent Set”) o bien crear una ventana específica. En nuestro caso, vamos a crear todas las ventanas que necesitamos para interactuar con la fuente de datos subyacente:

    • Especificamos Clientes como nombre del conjunto de ventanas.
    • En el combo “Screen Data”, seleccionamos la tabla ClientesItems creada previamente.
  • Una vez que hemos pulsado “OK”, veremos que suceden dos cosas:
    • Por una parte, se crean las pantallas que forman parte del set (un total de 3).
    • Por otra parte, se muestra la superficie de diseño de la pantalla de “Browse”.
image image
  • En esta superficie de diseño de la pantalla “Browse”, seleccionamos el elemento “Title List – Clientes Item” y desplegamos las opciones disponibles en el menú contextual.
  • Hacemos clic en el botón “Add Button…”. En la ventana que se abre, elegimos como método para el botón uno de los proporcionados: ClientesItems.addAndEditNew. Como opción “Navigate To”, especificamos Clientes.
image image
  • Siguiendo el mismo procedimiento añadimos dos nuevos botones que nos permitan editar y visualizar un registro existente. La superficie de diseño de la pantalla debería quedar como se muestra en la imagen de más abajo.
  • Lo siguiente que tenemos que hacer es definir cuál va a ser la pantalla principal para la aplicación. Para ello, seleccionamos la pantalla deseada y a través de las opciones del menú contextual hacemos clic en la opción “Set as Home Screen”.
image image
  • Compilamos la solución completa. Llegados a este punto, ya estamos listos para desplegar y probar la aplicación sin más que hacer clic en F5. Como siempre, una vez desplegada la App en primer lugar tendremos que confirmar que confiamos en la misma.
  • A continuación se muestra la página principal de la aplicación con la que ya podemos empezar a interactuar. Por ejemplo, procedemos a añadir un nuevo registro en la misma
image image
  • A continuación se muestra un popup en el que podemos añadir datos.
  • Y este es el resultado de añadir un nuevo dato.
image image

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s