Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

Aprovisionando las “Modern Pages”

De cara al equipo técnico,  los cambios que se están produciendo en SharePoint Online para poder  personalizar, tienen dos consecuencias inmediatas

  1. Utilizar otro stack de herramientas, más orientado al Front-End que al Back-End (cosa que ya hemos hablado en artículos anteriores).
  2. Ver cómo vamos a poder llevar el ciclo de vida de estas nuevas soluciones y que no tengamos que hacerlo todo en base a clicks y directamente en el tenant de producción.

En este artículo vamos a ver cómo aprovisionar estas nuevas páginas y cómo agregar los nuevos WebParts implementados utilizando el SharePoint FrameWork.
En primer lugar, antes de ver cómo hacer el provisionamiento de estas páginas, vamos a analizar cuáles son los artefactos que tenemos que desplegar.

¿Las nuevas “modern pages”, qué son?

En la práctica no son más que páginas “clásicas” al que el equipo de producto le ha añadido una funcionalidad para aplicar los nuevos cambios. Todo esto lo podemos hacer de la misma forma que se aprovisionan las páginas de siempre, es decir, buscaríamos cuál es el identificador del ContentType de este tipo de páginas y añadimos una serie de propiedades a dicha página. El código quedaría como el siguiente:

ListItem item = pagesLibrary.RootFolder.Files.AddTemplateFile(serverRelativePageName, TemplateFileType.ClientSidePage).ListItemAllFields;
item["ContentTypeId"] = "0x0101009D1CB255DA76424F860D91F20E6C4118";
item["Title"] = System.IO.Path.GetFileNameWithoutExtension("mypage.aspx");
item["ClientSideApplicationId"] = "b6917cb1-93a0-4b97-a84d-7cf49975d4ec";
item["PageLayoutType"] = "Article";
item["PromotedState"] = "0";
item["CanvasContent1"] = "";
item["BannerImageUrl"] = "/_layouts/15/images/sitepagethumbnail.png";
item.Update();
clientContext.Load(item);
clientContext.ExecuteQuery();

Ahora bien, está claro que para que todas estas novedades se puedan aplicar a los desarrollos, éstos se deben de poder hacer de una forma más elegante. En este sentido, Microsoft, dentro del RoadMap que hay en SPFX,  tiene claro que todas estos nuevos artefactos tienen que tener un ALM como toca. Por varios motivos, el principal es para la aceptación de los cambios.

Por esta razón se está apoyando en el proyecto Open Source PnP, para que todos los miembros del mismo vayan incorporando pautas y protocolos para hacer esto de una manera más profesional y elegante. Por tanto, si utilizamos este “framework”, disponemos de características que nos facilitan mucho más la vida.

Vamos a hacer una recopilación.

Para empezar a utilizar este framework es suficiente con instalar el paquete Nuget:

Install-Package SharePointPnPCoreOnline

Este paquete tiene unas dependencias con otras librerías que también se descargarán (como en cualquier paquete de Nuget). Dentro de éstas, es importante  la librería de CSOM (ahora mismo hay una versión de dicha librería más actual que la que se descarga este paquete).

Es conveniente actualizar la versión de CSOM a la última versión disponible porque en ella están los últimos cambios incorporados (dicha actualización al menos en esta versión no afecta a PnP).
PnP  nos proporciona una serie de métodos extensores que extienden al funcionamiento de CSOM original. De esta forma,  para crear una nueva “Modern Pages” es suficiente con poner la siguiente línea (bastante más cómodo que la forma “artesana”):

cc.Web.AddClientSidePage("encamina.aspx", true);

Esta parte parece fácil, ahora bien, ¿cómo vamos a agregar un nuevo WebPart? Este punto siempre ha sido algo un tanto peculiar tanto en la versión Online como en OnPremise y es uno de los puntos en los que muchas organizaciones fallan en cuanto a su proceso de ALM.

Para las nuevas ModerPages, PnP ha creado un objeto en el que nos indican qué artefactos podemos añadir a la página. En base a estos artefactos, podremos añadirlos a la página en la posición que le indiquemos. Para esto utilizaremos el siguiente código:

ClientSidePage page = new ClientSidePage(cc);
var components = page.AvailableClientSideComponents();

// Find our custom "ENCAMINA" web part
var myWebPart = components.Where(s => s.ComponentType == 1 && s.Name == "ENCAMINA").FirstOrDefault();
if (myWebPart != null)
{
    ClientSideWebPart encaminaWp = new ClientSideWebPart(myWebPart) { Order = 10 };
    page.AddControl(encaminaWp);
}
page.Save("encamina.aspx");

Dentro de PnP también disponemos de métodos para actualizar las propiedades de la página o inclusive eliminarla. Con estas extensiones del FrameWork es relativamente simple establecer un ciclo de vida del desarrollo siguiendo las buenas prácticas y ahorrándonos tiempo en lo que hacemos mejor: Desarrollar.

Resumen

El equipo de producto de SharePoint, en esta ocasión no quiere cometer dos veces el mismo error que cometió con las primeras versiones de SharePoint y es consciente de que no puede descuidar la forma en la que se desplegan los desarrollos dentro de su plataforma. Ahora, gracias a iniciativas como PnP o a nuestro querido ENMARCHA se está facilitando la adopción de la plataforma a las empresas.

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.

Esta entrada ha sido publicada en spfx y etiquetada como , . Enlace permanente .
ENCAMINA, piensa en colores