Aprovisionando las «Modern Pages»

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.

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 gestionar el ciclo de vida de estas nuevas soluciones, sin tener  que hacerlo todo en base a clicks y directamente en el tenant de producción.

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» a las cuales el equipo de producto ha añadido una funcionalidad para aplicar 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 para este tipo de páginas, y añadiríamos una serie de propiedades a dicha página.

El código quedaría de la siguiente forma:

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, para que todas estas novedades se puedan aplicar a los desarrollos, éstos deben poder hacerse de forma más elegante. En este sentido, Microsoft, dentro del RoadMap que hay en SPFX,  tiene claro que todas estos nuevos artefactos han de tener un ALM como toca. Por varios motivos. El principal, 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, y así trabajar 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, ya que 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ómoda que la técnica «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 un tanto peculiar, tanto en la versión Online como en la versión 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 no ha querido cometer 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 la plataforma. Ahora, gracias a iniciativas como PnP o a nuestro querido ENMARCHA se está facilitando la adopción de la plataforma a las empresas.