Bueno, después de la lista de Post técnicos que nos han
permitido analizar y entender cómo se comportan las Apps en Sharepoint 2013, creo que ha llegado ya el momento de
lanzarnos a desarrollar nuestra primera App.
Si hemos seguido los pasos de los Post Anteriores,
deberíamos disponer de un entorno en el cual dispusiésemos de un Servidor con
Sharepoint 2013 instalado. Un Dominio aislado para desplegar las Apps que
desarrollemos y un Site de desarrollo para probar nuestras Apps.
Además de esto, deberíamos disponer de Visual Studio 2012
configurado para desarrollar Apps de Sharepoint 2013. En caso de no ser así, os
recomiendo que reviséis los post Anteriores para disponer del entorno necesario
para iniciar nuestro desarrollo.
Creando el Proyecto
Arrancamos el Visual Studio 2012 como Administrador.
Procedemos a Crear un nuevo proyecto de tipo “App for
Sharepoint 2013”.
Asignamos el nombre “MiPrimerApp” (que original) y pulsamos “OK”.
Ahora nos aparecerá la pantalla de configuración de la App a
desarrollar. En esta pantalla deberemos especificar el “Site de Desarrollo”
donde vamos a desplegar la App así como el tipo de App que vamos a desarrollar
(Sharepoint-hosted).
Una vez configurado pulsamos “Finish”.
Tras esta configuración ya se nos creará el proyecto vacío de nuestra App sobre el que vamos a trabajar.
Ahora vamos a agregar a nuestro proyecto un ClientWebPart para que nuestra App se muestre en una ventana dentro de una página de Sharepoint.
Para ello hacemos con el botón derecho sobre el proyecto “MiPrimerApp”
à
Add à
New Item
Nos abrirá la ventana de selección del Item a Agregar.
Seleccionamos un “ClientWebPart
(Host Web)” y le asignamos el nombre “MiClientAppPart”. Pulsamos “Add” para que
se agregue al proyecto.
Vemos como nos ha agregado al proyecto el elemento “MiPrimerClientAppPart” con su respectivo fichero “Elements.xml” donde se configura este ClientWebPart.
El fichero “Elments.xm” tendrá un código parecido a este:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ClientWebPart Name="MiPrimerClientAppPart" Title="MiPrimerClientAppPart Title" Description="MiPrimerClientAppPart
Description" DefaultWidth="300" DefaultHeight="200">
<!-- Content element identifies the
location of the page that will render inside the client web part
Properties are referenced on the
query string using the pattern _propertyName_
Example:
Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->
<Content Type="html" Src="" />
<!-- Define properties in the
Properties element
Remember to put Property Name on
the Src attribute of the Content element above
<Properties>
<Property Name="property1"
Type="string" WebBrowsable="true"
WebDisplayName="First Property" WebDescription="Description
1" WebCategory="Custom Properties" DefaultValue="String
Property" RequiresDesignerPermission="true" />
</Properties> -->
</ClientWebPart>
</Elements>
|
Como podemos ver aquí configuraremos ciertos aspectos del comportamiento del ClientWebPart, tales como título, descripción, dimensiones, etc… Y sobre todo la página de inicio a ejecutar (que por defecto viene vacía).
Ahora procederemos a modificar la siguiente línea:
<Content Type="html" Src="" />
|
Especificaremos la página que se ejecutara:
<Content Type="html" Src="~appWebUrl/Pages/MiClientWebPart.aspx" />
|
Hemos definido que al arrancar la aplicación se ejecutará la página “MiClientWebPart.aspx”, pero esta página aun no la tenemos en el proyecto, así que vamos a proceder a agregarla al proyecto.
Pulsamos el botón derecho sobre la carpeta “Pages” del
proyecto à
Add à
New Item.
Seleccionamos un elemento “Page” y le asignamos el nombre “”
que se corresponde con el nombre de página que hemos definido en la
configuración del ClientWebPart.
Pulsamos “Add” para que agregara la página al proyecto.
La página que nos ha creado tendrá un código parecido a este:
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />
</asp:Content>
|
Si ahora tratásemos de desplegar la App e insertarla dentro de una página comprobaríamos que nos da un Error en la ejecución de la página, el cual básicamente nos viene a decir que la página no está configurada para ejecutarse dentro de un iframe.
Para que esto no suceda, vamos a cambiar el código de la
página por el siguiente código.
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />
<div>Hola Sharepoint
Fans!!!! I'm Alive.</div>
|
Hemos dicho a la página que permita su ejecución dentro de un iframe a través del código “<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />” y hemos personalizado el mensaje a mostrar.
Bueno, ahora sí que ya deberíamos tener lista nuestra aplicación para desplegarla y probar nuestra App.
Botono derecho sobre la solución
y seleccionamos “Deploy Solution”. Empezara el proceso de publicación de la Aplicación.
Probando la App
Si no nos da error nos debería mostrar un mensaje como este.
Vamos a ver si realmente
nuestra aplicación se ha desplegado tal y como nos dice el VisualStudio.
Accedemos al Site de
Desarrollo donde hemos desplegado la aplicación y en el menú de la izquierda
accedemos a “Recent” para que nos muestre la lista de Aplicaciones del Site. Aquí
debería mostrarse nuestra aplicación.
Bueno, parece que está instalada correctamente.
Vamos a agregarla a una
página para ver si realmente se ejecuta correctamente.
Nos vamos ahora a la “Home”
del Site y editamos la página.
Pulsamos sobre la
pestaña “Insert” de la Ribon y seleccionamos el icono para insertar un “App Part”.
Automáticamente se nos
mostrará la lista de “AppParts” que podemos insertar en la Página.
En esta lista debería aparecer
el nombre del ClientWebPart que hemos creado en nuestro proyecto.
Lo seleccionamos y
pulsamos el botón “Add” para agregarlo a nuestra página.
Al agregar el AppPart a
la página esta iniciará su ejecución aunque estemos editando la página.
Al ejecutarse esta App ,
dado que internamente las Apps hace uso de OAuth, se nos pedirá que nos
Autentiquemos en la App.
Una Vez Autenticados la
página debería mostrar ya el resultado de la ejecución de la App dentro de la
página que hemos Editado, mostrando un aspecto similar a este:
Ya solo nos falta
guardar los cambios sobre la página y comprobar que esta App continua ejecutándose
correctamente.
Bueno, hasta aquí este
primer ejemplo de App sobre sharepoint.
Os paso el enlace del
código del proyecto que hemos desarrollado:
Espero que os sea útil.
