En la entrada de la semana anterior vimos como se podía aprovisionar los Displays Templates en un SharePoint OnPremise. A raíz de varias preguntas que me han realizado, creo que es la hora de abordar el tratamiento del aprovisionamiento de los sitios alojados en SharePoint Online. En este primer post vamos a ver como podemos aprovisionar los aspectos relativos al branding dentro de SharePoint Online.
Introducción
La personalización es uno de los aspectos que más requerimientos tienen los clientes a la hora de adoptar la plataforma, quieren que su Site Collection tenga por lo menos su identidad corporativa (logo, tamaño/fuente de letra, colores,etc…) Todo esto es posible con SharePoint Online, aunque hay que tener ciertos aspectos a la hora de realizar esta customización (todos estos aspectos los podemos aprender aprender y conocer dentro del proyecto GitHub Patterns and Practices ) Aunque la idea inicial y recomendada por Microsoft es limitar la customización de la site collection a la minima expresión y realizar esta customización en la APP correspondiente, vamos a ver como poder aplicar un poco de diseño a nuestro SharePoint Online.
Como opinión personal, creo que estos dos aspectos son distintos: por un lado aplicar estilo a un SharePoint Online debe de ser posible y por otro lado la customización excesiva y vinculada a la versión, es más un desarrollo a medida y por lo tanto nuestra forma de enfocar este proyecto debería de ser utilizando el modelo APP.
Manos a la obra
El primer paso que es definir que artefactos vamos a desplegar:
- Hojas de estilo, ficheros Javascript, imagenes
- Master Page
- PageLayouts
Despliegue de Ficheros
En soluciones OnPremise el despliegue de ficheros era de una forma muy sencilla haciendo uso de Modulos desde Visual Studio, indicarle la ruta y activar la feature. Para realizar esto en SharePoint Online, en primer lugar tendríamos que utilizar soluciones SandBox que están deprecated. El que estén deprecated no significa que no se puedan utilizar, pero si que es conveniente no utilizarlas por un motivo principal: no sabemos si en futuras versiones tendremos compatibilidad.
Descartada la opción Sandbox, nos quedaría utilizar PowerShell o bien utilizar el modelo de objetos de Cliente (CSOM). Si estuviéramos en un entorno OnPremises no tendríamos ninguna duda con PowerShell tenemos una API muy rica, junto con toda la potencia del lenguaje pero desgraciadamente en SharePoint Online los cmdlets de PowerShell están bastante limitados. La diferencia entre los Cmdlets que hay en Online en OnPremise es 700/30. Por lo que la única opción que disponemos es de utilizar CSOM. Una practica muy habitual es crear los propios Cmdlet haciendo uso de CSOM y de esta forma disponer de un gran número de comandos PowerShell para facilitar la vida en el desarrollo en SharePoint Online.
Para subir un fichero, lo que vamos a realizar es por un lado comprobar si la ruta donde vamos a alojar el fichero existe, comprobar que si el fichero existe no esta desprotegido, subir el fichero y posteriormente publicarlo y aprobarlo. Para ello utilizaremos un función como la siguiente:
public static void UploadFile(ClientContext clientContext, string name, string folder, string path)
{
var web = clientContext.Web;
var filePath = web.ServerRelativeUrl.TrimEnd(Program.trimChars) + "/" + path + "/";
Console.WriteLine("Uploading file {0} to {1}{2}", name, filePath, folder);
EnsureFolder(web, filePath, folder);
CheckOutFile(web, name, filePath, folder);
var uploadFile = AddFile(web.Url, web, "Branding\\Files\\", name, filePath, folder);
CheckInPublishAndApproveFile(uploadFile);
}
La definición de la función EnsureFolder es la siguiente
private static void EnsureFolder(Web web, string filePath, string fileFolder)
{
if (string.IsNullOrEmpty(fileFolder))
{
return;
}
var lists = web.Lists;
web.Context.Load(web);
web.Context.Load(lists, l => l.Include(ll => ll.DefaultViewUrl));
web.Context.ExecuteQuery();
ExceptionHandlingScope scope = new ExceptionHandlingScope(web.Context);
using (scope.StartScope())
{
using (scope.StartTry())
{
var folder = web.GetFolderByServerRelativeUrl(string.Concat(filePath, fileFolder));
web.Context.Load(folder);
}
using (scope.StartCatch())
{
var list = lists.Where(l => l.DefaultViewUrl.IndexOf(filePath, StringComparison.CurrentCultureIgnoreCase) >= 0).FirstOrDefault();
ListItemCreationInformation newFolder = new ListItemCreationInformation();
newFolder.UnderlyingObjectType = FileSystemObjectType.Folder;
newFolder.FolderUrl = filePath.TrimEnd(Program.trimChars);
newFolder.LeafName = fileFolder;
ListItem item = list.AddItem(newFolder);
web.Context.Load(item);
item.Update();
}
using (scope.StartFinally())
{
var folder = web.GetFolderByServerRelativeUrl(string.Concat(filePath, fileFolder));
web.Context.Load(folder);
}
}
web.Context.ExecuteQuery();
}
La función CheckOutFile tendría la siguiente definición:
private static void CheckOutFile(Web web, string fileName, string filePath, string fileFolder)
{
var fileUrl = string.Concat(filePath, fileFolder, (string.IsNullOrEmpty(fileFolder) ? string.Empty : "/"), fileName);
var temp = web.GetFileByServerRelativeUrl(fileUrl);
web.Context.Load(temp, f => f.Exists);
web.Context.ExecuteQuery();
if (temp.Exists)
{
web.Context.Load(temp, f => f.CheckOutType);
web.Context.ExecuteQuery();
if (temp.CheckOutType != CheckOutType.None)
{
temp.UndoCheckOut();
}
temp.CheckOut();
web.Context.ExecuteQuery();
}
}
La función de Añadir el fichero:
private static File AddFile(Web web, string filePath, string fileName, string serverPath, string serverFolder)
{
var fileUrl = string.Concat(serverPath, serverFolder, (string.IsNullOrEmpty(serverFolder) ? string.Empty : "/"), fileName);
var folder = web.GetFolderByServerRelativeUrl(string.Concat(serverPath, serverFolder));
FileCreationInformation spFile = new FileCreationInformation()
{
Content = System.IO.File.ReadAllBytes(filePath + fileName),
Url = fileUrl,
Overwrite = true
};
var uploadFile = folder.Files.Add(spFile);
web.Context.Load(uploadFile, f => f.CheckOutType, f => f.Level);
web.Context.ExecuteQuery();
return uploadFile;
}
La definición de CheckIn PublishAndApproveFile:
private static void CheckInPublishAndApproveFile(File uploadFile)
{
if (uploadFile.CheckOutType != CheckOutType.None)
{
uploadFile.CheckIn("Updating branding", CheckinType.MajorCheckIn);
}
if (uploadFile.Level == FileLevel.Draft)
{
uploadFile.Publish("Updating branding");
}
uploadFile.Context.Load(uploadFile, f => f.ListItemAllFields);
uploadFile.Context.ExecuteQuery();
if (uploadFile.ListItemAllFields["_ModerationStatus"].ToString() == "2") // SPModerationStatusType.Pending
{
uploadFile.Approve("Updating branding");
uploadFile.Context.ExecuteQuery();
}
Despliegue de MasterPage
Para desplegar las masterPage que hemos diseñado en primer lugar subiremos la master dentro de la carpeta de MasterPage. A continuación protegemos y publicamos el fichero y por último establecemos esta MasterPage como página maestra del sitio. Para ello (y utilizando gran parte de las funciones anteriores) utilizamos un código similar al siguiente:
public static void UploadMasterPage(ClientContext clientContext, string name, string folder)
{
var web = clientContext.Web;
var lists = web.Lists;
var gallery = web.GetCatalog(116);
clientContext.Load(lists, l => l.Include(ll => ll.DefaultViewUrl));
clientContext.Load(gallery, g => g.RootFolder.ServerRelativeUrl);
clientContext.ExecuteQuery();
Console.WriteLine("Uploading and applying {0} to {1}", name, web.ServerRelativeUrl);
var masterPath = gallery.RootFolder.ServerRelativeUrl.TrimEnd(new char[] { '/' }) + "/";
EnsureFolder(web, masterPath, folder);
CheckOutFile(web, name, masterPath, folder);
var uploadFile = AddFile(web.Url, web, "Branding\\MasterPages\\", name, masterPath, folder);
SetMasterPageMetadata(web, uploadFile);
CheckInPublishAndApproveFile(uploadFile);
//store the currently used master pages so we can switch back upon deactivation
var allWebProperties = web.AllProperties;
allWebProperties["OriginalMasterUrl"] = web.MasterUrl;
allWebProperties["CustomMasterUrl"] = web.CustomMasterUrl;
var masterUrl = string.Concat(masterPath, folder, (string.IsNullOrEmpty(folder) ? string.Empty : "/"), name);
web.MasterUrl = masterUrl;
web.CustomMasterUrl = masterUrl;
web.Update();
clientContext.ExecuteQuery();
}
La función «SetMasterPageMetadata tiene la siguiente definición:
private static void SetMasterPageMetadata(Web web, File uploadFile)
{
var parentContentTypeId = "0x010105"; // Master Page
var gallery = web.GetCatalog(116);
web.Context.Load(gallery, g => g.ContentTypes);
web.Context.ExecuteQuery();
var contentTypeId = gallery.ContentTypes.FirstOrDefault(ct => ct.StringId.StartsWith(parentContentTypeId)).StringId;
var item = uploadFile.ListItemAllFields;
web.Context.Load(item);
item["ContentTypeId"] = contentTypeId;
item["UIVersion"] = Convert.ToString(15);
item["MasterPageDescription"] = "Violin master page";
item.Update();
web.Context.ExecuteQuery();
}
Desplegando los PageLayouts
Para desplegar los pageLayouts, realizaremos una función similar al despliegue de las Master pero modificando los valores del PageLayout.
public static void UploadPageLayout(ClientContext clientContext, string name, string folder, string title, string publishingAssociatedContentType)
{
var web = clientContext.Web;
var lists = web.Lists;
var gallery = web.GetCatalog(116);
clientContext.Load(lists, l => l.Include(ll => ll.DefaultViewUrl));
clientContext.Load(gallery, g => g.RootFolder.ServerRelativeUrl);
clientContext.ExecuteQuery();
Console.WriteLine("Uploading page layout {0} to {1}", name, clientContext.Web.ServerRelativeUrl);
var masterPath = gallery.RootFolder.ServerRelativeUrl.TrimEnd(Program.trimChars) + "/";
EnsureFolder(web, masterPath, folder);
CheckOutFile(web, name, masterPath, folder);
var uploadFile = AddFile(web.Url, web, "Branding\\PageLayouts\\", name, masterPath, folder);
SetPageLayoutMetadata(web, uploadFile, title, publishingAssociatedContentType);
CheckInPublishAndApproveFile(uploadFile);
}
La función «SetPageLayoutMetadata» tiene la siguiente definición:
private static void SetPageLayoutMetadata(Web web, File uploadFile, string title, string publishingAssociatedContentType)
{
var parentContentTypeId = "0x01010007FF3E057FA8AB4AA42FCB67B453FFC100E214EEE741181F4E9F7ACC43278EE811"; //Page Layout
var gallery = web.GetCatalog(116);
web.Context.Load(gallery, g => g.ContentTypes);
web.Context.ExecuteQuery();
var contentTypeId = gallery.ContentTypes.FirstOrDefault(ct => ct.StringId.StartsWith(parentContentTypeId)).StringId;
var item = uploadFile.ListItemAllFields;
web.Context.Load(item);
item["ContentTypeId"] = contentTypeId;
item["Title"] = title;
item["PublishingAssociatedContentType"] = publishingAssociatedContentType;
item.Update();
web.Context.ExecuteQuery();
}
Conclusión
Poco a poco tenemos que ir viendo todas las posibilidades que hay en Office 365 para poder realizar los desarrollos y requerimientos de los clientes. Office 365 es la evolución natural de nuestro SharePoint tradicional, cada vez tenemos más herramientas y utilidades para que las diferencias entre Online y OnPremise se acorten. Está claro que en la nube NUNCA vamos a tener las FARM Solutions pero esto desde mi punto de vista no es algo que limite a la plataforma sino más bien al contrario, la enriquece y hace utilizar cada herramienta en lo que realmente es su fuerte.
En este post hemos visto como podemos aplicar branding a nuestros desarrollos de una forma relativamente simple. En futuros post veremos como podemos aprovisionar el resto de artefactos en Office 365.
Referencias
¡Suscríbete a nuestras RRSS!
