Modos de utilización de una App en un sitio de SharePoint


Hola a todos de nuevo,

Esta semana he tenido la oportunidad de asistir a un evento sobre Apps para SharePoint y Office 365 organizado por MadPoint, la comunidad de SharePoint de Madrid, donde he podido aprender algunas cosas interesantes, que espero poder ir contando en los próximos días.

Por lo que quiero empezar hoy, es por algo muy sencillo que vi en este evento, pero que a su vez es muy útil. Tiene que ver, con las diferentes formas de posicionamiento o approach para la experiencia de usuario de las aplicaciones de SharePoint cuando las instalamos en un sitio.

Para empezar, vamos a ir a la MSDN, a un artículo en el que se presentan las apps de SharePoint y donde habla de este aspecto.

https://msdn.microsoft.com/en-us/library/office/fp179930%28v=office.15%29.aspx

apppositioning

Básicamente en la figura que podemos ver justo previamente, se observa que hay tres formas de posicionar nuestras apps dentro de los sitios de SharePoint:

  • Immersive Full Page: En este caso la aplicación ocupa toda la página de nuestro sitio
  • Part: Seleccionando esta opción, tendremos la oportunidad de insertar la aplicación de SharePoint como un WebPart dentro de una página de nuestro sitio
  • UI Custom Action: Por último podemos crear una custom action en la Ribbon o Menú de un Elemento de una lista para acceder a una página de la aplicación.

Lo que mostraré a continuación, es cómo tenemos que hacer para usar, cuando desarrollamos nuestra aplicación, cada una de las opciones que he comentado anteriormente.

Immersive Full Page

Este modo es el que nos encontramos por defecto cuando creamos una aplicación para SharePoint y la instalamos en uno de nuestros sitios. Accederemos a ella a través de Contenido del Sitio y obviamente, creando un enlace a través de las opciones de navegación y ocupa, como hemos comentado anteriormente toda la página. En el siguiente enlace se muestra un ejemplo de cómo podemos crear una aplicación y usarla de este modo.

Creando una app para SharePoint OnLine

Captura de pantalla 2015-02-07 a las 16.34.28

Captura de pantalla 2015-02-07 a las 16.34.51

En las figuras que se ven previamente, podemos ver el resultado de usar una aplicación en el modo Immersive Full Page

Web Part

Para poder usar una aplicación de SharePoint como un WebPart dentro de nuestro sitio tendremos que trabajar sobre nuestra solución en Visual Studio. Para poder usar este modo de visualización de nuestra aplicación, vamos a tener que añadir dentro de la solución un elemento de tipo Client Web Part. Para ello seguimos los pasos que se indican a continuación:

Captura de pantalla 2015-02-07 a las 16.44.42

Captura de pantalla 2015-02-07 a las 16.45.08

Una vez que lo hemos añadido nos vamos al fichero Element.xml, que tendrá un aspecto como el que vemos a continuación, y sobre el que destacaremos algunos aspectos que pueden ser importantes.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientWebPart Name="ExampleWebPart1" Title="Example Web Part" Description="Description of Example WebPart" DefaultWidth="300" DefaultHeight="200">

    <!-- El elemento Content identifica la ubicación de la página que se presentará dentro del elemento web cliente
         Se hace referencia a las propiedades en la cadena de consulta mediante el patrón _propertyName_
         Ejemplo: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->
    <Content Type="html" Src="~appWebUrl/Pages/example.aspx?{StandardTokens}&amp;property1=_property1_&amp;property2=_property2_" />

    <!-- Defina las propiedades en el elemento Properties.
         Recuerde incluir el nombre de propiedad en el atributo Src del elemento Content anterior. -->
    <Properties>
      <Property Name="property1" Type="string" WebBrowsable="true" WebDisplayName="Property1" WebDescription="Description to Property 1" WebCategory="Category Properties" DefaultValue="Example" RequiresDesignerPermission="true" />
      <Property Name="property2" Type="string" WebBrowsable="true" WebDisplayName="Property2" WebDescription="Description to Property 2" WebCategory="Category Properties" DefaultValue="Example2" RequiresDesignerPermission="true" />
    </Properties>
  </ClientWebPart>
</Elements>

El primer aspecto importante que vamos a destacar, se encuentra al inicio del fichero xml, donde definimos el ClientWebPart y donde podemos indicar el nombre, descripción y título que tendrá el WebPart en nuestro sitio.

El siguiente punto importante, lo encontramos en la etiqueta Content. En ella a través del atributo Src, indicaremos la página de la app que queremos que nos muestre el WebPart. En esta Url ~appWebUrl es una palabra reservada que por defecto indica la ruta de la aplicación y seguidamente, añadimos la página de nuestra app que corresponda.

Como en cualquier WebPart, podemos añadir propiedades que podrán ser configuradas cuando insertemos el mismo en alguna de nuestras páginas. Para ello tenemos la etiqueta Properties, donde podremos definir cada una de las propiedades que queremos poder indicar a nuestro WebPart. La definición de una propiedad sigue la forma:

<Property Name="property1" Type="string" WebBrowsable="true" WebDisplayName="Property1" WebDescription="Description to Property 1" WebCategory="Category Properties" DefaultValue="Example" RequiresDesignerPermission="true" />

Como se puede ver, se puede indicar: nombre, tipo, nombre a mostrar, descripción, categoría y valor por defecto, entre otros aspectos para nuestra propiedad.

El siguiente paso es ver cómo le indicaremos a nuestra aplicación estas propiedades, esto lo haremos por medio de la QueryString que le indicamos en el Content por medio del atributo Src

    <Content Type="html" Src="~appWebUrl/Pages/example.aspx?{StandardTokens}&amp;property1=_property1_&amp;property2=_property2_" />

Las propiedades se indican como se ve en este código, añadiendo a la QueryString el patrón nombredelapropiedad=_nombredelapropiedad_ por cada una de las que hayamos definido.

Una vez configurado el mismo, cuando instalemos nuestra app, podremos añadir el WebPart que hemos creado a cualquiera de las páginas de nuestro sitio.

Captura de pantalla 2015-02-08 a las 22.29.16

Captura de pantalla 2015-02-08 a las 22.29.46

UI Custom Action

La última opción que tenemos para utilizar nuestra app, es añadiéndola como una acción o bien de la Ribbon o bien del Menú de Elemento de lista, para proporcionar alguna funcionalidad que deseemos a cualquier de ellos. Para ello, tenemos que añadir sobre la solución de nuestra app o bien una Ribbon Custom Action o una Menu Item Custom Action

Captura de pantalla 2015-02-08 a las 22.48.33

Captura de pantalla 2015-02-08 a las 22.50.07

Captura de pantalla 2015-02-08 a las 22.50.32

 

Como se puede ver, a la hora de crear el elemento, podremos configurar aspectos como: si queremos que afecte a la web del host o de la aplicación, la pestaña y la lista donde queremos que aparezca esta nueva opción, también indicar a qué página de la aplicación queremos que nos lleve, etc. Una vez finalizada la configuración, se crea un archivo xml con toda la información de la acción que podremos modificar si deseamos.

Cuando instalamos la app, veremos que nuestra Ribbon tiene una nueva opción que nos llevará a la página de nuestra aplicación, tal y como indicamos anteriormente.

Captura de pantalla 2015-02-08 a las 23.06.27

Y esto es todo por hoy, espero que os haya resultado interesante y útil la información y podáis usarla en vuestros desarrollos, como siempre, cualquier sugerencia es bienvenida.

Saludos

Anuncios

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 )

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 )

Google+ photo

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

Conectando a %s