Prácticas y herramientas de desarrollo y diseño de Sharepoint

Artículo
04/08/2023

En este artículo encontrará información sobre las distintas opciones de diseño y desarrollo disponibles en SharePoint. También dispone de información sobre cómo usar el patrón de aprovisionamiento remoto para usar activos de personalización de marca en un sitio de SharePoint.

Nota:

El código de este artículo se proporciona tal cual, sin garantía de ningún tipo, expresa o implícita, incluidas las garantías implícitas de aptitud para un propósito particular, comerciabilidad o ausencia de infracción.

Términos y conceptos

Tabla 1. Términos y conceptos clave de desarrollo y diseño de SharePoint

Término o concepto	Definición	Más información
Administrador de diseño	Característica activada en los sitios de grupo y los sitios de publicación de SharePoint que tengan la publicación habilitada; sirve para importar y administrar activos de personalización de marca de sitio y exportarlos a un paquete de diseño.	Use el Administrador de diseño para importar a SharePoint los activos de personalización de marca creados con otras herramientas, como Adobe PhotoShop o Adobe DreamWeaver. SharePoint Designer no está disponible para su uso con OneDrive para la Empresa o sitios de equipo de SharePoint donde no está habilitada la publicación.
Paquete de diseño	Pensado para usarse en sitios de publicación de SharePoint; contiene los activos de personalización de marca que están almacenados en el Administrador de diseño.	Manual de compuestos para SharePoint
Aprovisionamiento remoto	Modelo en el que se aprovisionan sitios con plantillas y código que se ejecuta fuera de SharePoint, en un complemento hospedado por el proveedor.	- Técnicas de aprovisionamiento de sitios y aprovisionamiento remoto en SharePoint 2013 - Aprovisionamiento de sitios sin intervención del administrador con aplicaciones de SharePoint 2013
Web raíz	Primera página web de una colección de sitios. También se conoce como raíz de la aplicación web.
Soluciones de espacio aislado	Archivos .wsp que contienen ensamblados, otros elementos no compilados y un archivo de manifiesto XML. Una solución de espacio aislado usa código de confianza parcial.	Soluciones de espacio aislado
SharePoint Designer	Herramienta de administración de activos de diseño y diseñador HTML que sirve para administrar los elementos de personalización de marca en SharePoint. SharePoint Designer admite principalmente flujos de trabajo personalizados.	- Novedades del desarrollo de sitio de SharePoint
Archivo .wsp	Un archivo de solución de SharePoint. Un .wsp es un archivo .cab que categoriza los activos del sitio y los organiza en un archivo manifest.xml.	Introducción a las soluciones

Opciones de desarrollo

Cuando se usa SharePoint como plataforma de desarrollo, es necesario crear un entorno en el que desarrollar, probar, crear e implementar el contenido. Para obtener información sobre las opciones para el desarrollo, consulte Modelo de objetos de flujo de trabajo de SharePoint y API de Administración del ciclo de vida de las aplicaciones (ALM).

Tabla 2. Opciones para el desarrollo, las pruebas y la aceptación de SharePoint

Opción	Consideraciones
Team Foundation Server	- Se encuentra en Visual Studio Team Services para facilitar el acceso. - Incluye un sistema centralizado de administración del ciclo de vida y códigos fuente.
Entornos de prueba y aceptación de la nube	- Use un inquilino aparte para las pruebas de aceptación. - Entorno de pruebas independiente para pruebas locales.
Entornos de prueba y aceptación locales	- Usar para las implementaciones de SharePoint local. - Hospedado localmente por el cliente o en Microsoft Azure.

En la mayoría de los casos, necesitará al menos los siguientes inquilinos, aunque esto puede variar en función de los requisitos:

Inquilino de desarrollador. Como procedimiento recomendado, aprovisione y use su propio sitio para desarrolladores. Así evitará mezclar los datos con el entorno de producción. Para suscribirse a y crear un sitio de desarrolladores, consulte Configurar un entorno de desarrollo para complementos de SharePoint en Office 365.
Inquilino de integración o pruebas. Use este sitio para garantizar que las nuevas aplicaciones y funcionalidades funcionen en más de una colección de sitios y con los servicios y datos del entorno de producción. Configure el entorno de forma que incluya las capacidades de vista previa. (Para ello, en la consola de administración de inquilinos, elija Configuración del servicio y, en la opción Actualizaciones, elija Primera versión.) Puede usar Visual Studio Team Services para realizar pruebas automatizadas y otras pruebas de integración continuas.
Inquilino de producción. Publique en este inquilino las aplicaciones que se hayan probado, aceptado y aprobado. Puede crear un sitio para desarrolladores en este inquilino con el fin de desarrollar y probar aplicaciones de pequeño alcance o que tengan un impacto muy acotado. En general, evite mezclar los entornos de producción y desarrollo.

Herramientas de diseño

Use herramientas estándar de diseño y desarrollo web (como HTML, imágenes, archivos CSS y archivos JavaScript) para crear activos de personalización de marca de sitio de SharePoint. Por ejemplo, puede usar Adobe DreamWeaver y Adobe PhotoShop para diseñar los archivos HTML, CSS, JavaScript y de imagen que va a usar para personalizar la marca de los sitios de SharePoint. Otra opción es usar SharePoint Designer para crear, administrar y personalizar activos de personalización de marca o crear soluciones personalizadas en Visual Studio.

Paquetes de diseño y archivos .wsp de SharePoint

Los paquetes de diseño son archivos .wsp creados por el Administrador de diseño que se rigen por reglas predecibles a la hora de empaquetar activos de diseño. Son, básicamente, soluciones de espacio aislado. Si usa otra herramienta para empaquetar activos de personalización de marca en un archivo .wsp, estos activos estarán en un estado menos fijo y predecible.

El paquete de diseño incluye todos los archivos que se han personalizado. Por ejemplo, si crea un diseño de página que usa un tipo de contenido personalizado, el paquete de diseño incluirá el diseño de página, el tipo de contenido personalizado que usa y todas las columnas de sitio personalizadas. El paquete de diseño engloba también los archivos correspondientes a las apariencias compuestas que se hayan aplicado en el sitio de SharePoint, incluidos los archivos cargados en las siguientes ubicaciones:

Biblioteca de activos de sitio
Biblioteca de estilos
Galería de páginas maestras

Si usa apariencias compuestas en un sitio antes de aplicar la personalización de marca, el paquete de diseño contendrá archivos con las extensiones .themedcss y .themedpng. Para aplicar los activos de personalización de marca de un paquete de diseño a un sitio de SharePoint, exporte el paquete de diseño y use el patrón de aprovisionamiento remoto para aplicar el contenido de dicho paquete de diseño.

SharePoint incluye las API que se pueden usar para trabajar con paquetes de diseño. Si usa SSOM, CSOM o JSOM, puede usar las clases DesignPackage o DesignPackageInfo .

Usar el paquete de diseño CSOM para aplicar el contenido de paquetes de diseño a un sitio de SharePoint

El siguiente ejemplo refleja cómo usar la API de paquetes de diseño en el patrón de aprovisionamiento remoto para aplicar el contenido de paquetes de diseño a un sitio de SharePoint.

Este código se diseñó para usarse con sitios de publicación. Aunque la API de paquetes de diseño se puede usar para aplicar la personalización de marca a sitios de grupo que tienen la característica de publicación habilitada, esto puede acarrear problemas de compatibilidad a largo plazo.

using Microsoft.SharePoint.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.Client.Publishing;
namespace ProviderSharePointAppWeb
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_PreInit(object sender, EventArgs e)
        {
            Uri redirectUrl;
            switch (SharePointContextProvider.CheckRedirectionStatus(Context, out redirectUrl))
            {
                case RedirectionStatus.Ok:
                    return;
                case RedirectionStatus.ShouldRedirect:
                    Response.Redirect(redirectUrl.AbsoluteUri, endResponse: true);
                    break;
                case RedirectionStatus.CanNotRedirect:
                    Response.Write("An error occurred while processing your request.");
                    Response.End();
                    break;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Use TokenHelper to get the client context and Title property.
            // To access other properties, the add-in might need to request permissions
            // on the host web.
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            
            // Publishing feature GUID to use the infrastructure for publishing. 
            Guid PublishingFeature = Guid.Parse("f6924d36-2fa8-4f0b-b16d-06b7250180fa");

            // The site-relative URL of the design package to install.
            // This sandbox design package should be uploaded to a document library.
            // For practical purposes, this can be a configuration setting in web.config.
            string fileRelativePath = @"/sites/devsite/brand/Dev.wsp";

            //string fileUrl = @"https://SPXXXXX.com/sites/devsite/brand/Dev.wsp";
            
        
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                // Load the site context explicitly or while installing the API, the path for
// the package will not be resolved.
                // If the package cannot be found, an exception is thrown. 
                var site = clientContext.Site;
                clientContext.Load(site);
                clientContext.ExecuteQuery();
              
                // Validate whether the Publishing feature is active. 
                if (IsSiteFeatureActivated(clientContext,PublishingFeature))
                {
                    DesignPackageInfo info = new DesignPackageInfo()
                    {
                        PackageGuid = Guid.Empty,
                        MajorVersion = 1,
                        MinorVersion = 1,
                        PackageName = "Dev"
                    };
                    Console.WriteLine("Installing design package ");
                    
                    DesignPackage.Install(clientContext, clientContext.Site, info, fileRelativePath);
                    clientContext.ExecuteQuery();

                    Console.WriteLine("Applying design package");
                    DesignPackage.Apply(clientContext, clientContext.Site, info);
                    clientContext.ExecuteQuery();
                }
            }
        }
        public  bool IsSiteFeatureActivated( ClientContext context, Guid guid)
        {
            var features = context.Site.Features;
            context.Load(features);
            context.ExecuteQuery();

            foreach (var f in features)
            {
                if (f.DefinitionId.Equals(guid))
                    return true;
            }
            return false;
        }
 
    }
}

Usar FileCreationInformation para cargar activos de personalización de marca y una página maestra a un sitio de grupo

Puede usar la funcionalidad CSOM de SharePoint para instalar y desinstalar paquetes de diseño y exportarlos a sitios de SharePoint.

Por ejemplo, use el método SP.Publishing.DesignPackage.install (sp.publishing) o el método DesignPackage.Install para instalar el paquete de diseño en el sitio, tal y como se muestra en el siguiente ejemplo.

public static void Install(
    	ClientRuntimeContext context,
	    Site site,
	    DesignPackageInfo info,
    	string path
)

La clase DesignPackageInfo especifica metadatos que describen el contenido del paquete de diseño que se va a instalar. Use el método Uninstall para desinstalar el paquete de diseño del sitio, tal y como se muestra en el siguiente ejemplo.

public static void UnInstall(
	    ClientRuntimeContext context,
	    Site site,
    	DesignPackageInfo info
)

Si necesita personalizar la marca de un sitio de grupo que tiene la característica de publicación habilitada o un sitio de publicación en SharePoint Online, puede usar los métodos ExportEnterprise o ExportSmallBusiness para exportar los paquetes de diseño de las plantillas de sitio a la galería de soluciones. Use el método ExportSmallBusiness con la plantilla de sitio de pequeña empresa y el método ExportEnterprise con el resto de plantillas de sitio, tal como se muestra en el siguiente ejemplo.

public static ClientResult<DesignPackageInfo> ExportEnterprise(
	    ClientRuntimeContext context,
	    Site site,
	    bool includeSearchConfiguration
)

Si usa el método ExportSmallBusiness, puede incluir la configuración de búsqueda en el paquete de diseño, tal como se muestra en el siguiente ejemplo. Tenga en cuenta que todos los métodos de paquete de diseño funcionan en el nivel de la colección de sitios. El nombre del paquete de diseño se representa mediante la cadena packageName.

public static ClientResult<DesignPackageInfo> ExportSmallBusiness(
	    ClientRuntimeContext context,
	    Site site,
	    string packageName,
	    bool includeSearchConfiguration
)

Opciones de la herramienta de diseño para SharePoint Online

Las herramientas que puede usar para personalizar la marca de un sitio de SharePoint Online dependen de la edición de SharePoint Online y el tipo de sitio que desea crear. La edición Small Business, por ejemplo, incluye un sitio de grupo y un sitio público. No incluye un sitio de publicación. Puede usar el complemento Creador de sitios de SharePoint Online para personalizar la marca del sitio público.

En cuanto a la edición Enterprise, contiene una colección de sitios de grupo en la aplicación web raíz del dominio que no incluye publicación. No incluye un sitio público. Use el Administrador de diseño para administrar los elementos de personalización de marca de sitio de SharePoint del sitio de publicación en la edición Enterprise de SharePoint Online.

Share via