Práticas e Ferramentas de Desenvolvimento e Design do SharePoint

Este artigo fornece informações sobre as opções de desenvolvimento e design disponíveis no SharePoint. Encontre também informações de como usar o padrão de provisionamento remoto para aplicar ativos de identidade visual a um site do SharePoint.

Observação

The code in this article is provided as-is, without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.

Termos e conceitos

Tabela 1. Principais termos e conceitos de desenvolvimento e design do SharePoint

Termo ou conceito	Definição	Mais informações
Gerenciador de Design	Um recurso ativado em sites de publicação ou sites de equipe com publicação habilitada no SharePoint, usado para importar e gerenciar os ativos de identidade visual de um site e exportá-los para um pacote de design.	Use o Gerenciador de Design para importar para o SharePoint os ativos de identidade visual criados em outras ferramentas, como o Adobe PhotoShop ou o Adobe DreamWeaver. O SharePoint Designer não está disponível para uso com sites de equipe do SharePoint ou com o OneDrive for Business em que a publicação não estiver habilitada.
Pacote de design	Projetado para uso com os sites de publicação do SharePoint. Contém ativos de identidade visual que são armazenados no Gerenciador de Design.	Manual de composições do SharePoint
Provisionamento remoto	Um modelo que envolve o provisionamento de sites usando modelos e códigos executados fora do SharePoint, em um suplemento hospedado em um provedor.	- Técnicas de provisionamento de site e provisionamento remoto no SharePoint 2013 - Provisionamento de sites de autoatendimento usando aplicativos para SharePoint 2013
Página raiz	A primeira página em um conjunto de sites. A página raiz também é, por vezes, conhecida como Raiz do aplicativo Web.
Soluções de área restrita	Arquivos .wsp que contêm assemblies, outros componentes não compilados e um arquivo de manifesto XML. Uma solução em área restrita usa código de confiança parcial.	Soluções em Modo Seguro
SharePoint Designer	Um designer de HTML e uma ferramenta de gerenciamento de ativos de design para gerenciamento de elementos de identidade visual no SharePoint. O SharePoint Designer oferece suporte sobretudo a fluxos de trabalho personalizados.	- Novidades no desenvolvimento de site do SharePoint
Arquivo .wsp	Um arquivo de solução do SharePoint. Um .wsp é um arquivo .cab que categoriza os ativos do site e os organiza com um arquivo manifest.xml.	Visão geral das soluções

Opções de desenvolvimento

Ao usar o SharePoint como uma plataforma de desenvolvimento, é preciso criar um ambiente para desenvolver, testar, criar e implantar o conteúdo. Confira mais informações sobre as opções de desenvolvimento em Modelo de objeto de fluxo de trabalho do SharePoint e APIs do ALM (Gerenciamento do Ciclo de Vida do Aplicativo).

Tabela 2. Opções para desenvolvimento, teste e aceitação do SharePoint

Opção	Considerações
Team Foundation Server	– Localizado no Visual Studio Team Services para um acesso facilitado. – Inclui um código-fonte centralizado e um sistema de gerenciamento de ciclo de vida.
Ambientes de teste e de aceitação na nuvem	– Use um locatário separado para os testes de aceitação. – Ambiente de teste separado para testes no local.
Ambientes de teste e a aceitação no local	– Use para implantações do SharePoint no local. – Hospedado por cliente no local ou no Microsoft Azure.

Na maioria dos casos, é necessário pelo menos os seguintes locatários, embora isso possa variar dependendo de suas necessidades:

• Locatário de desenvolvimento. Como prática recomendada, provisione e use seu próprio site de desenvolvedor. Assim você evita misturar seus dados com os do ambiente de produção. Confira como se inscrever em um site de desenvolvedor e como provisioná-lo em Configurar um ambiente de desenvolvimento para suplementos do SharePoint no Office 365.

• Locatário de integração/testes. Use este site para certificar-se de que novos aplicativos e recursos funcionam em mais de um conjunto de sites e com vários serviços e dados no ambiente de produção. Configure o ambiente para conter recursos que estão na visualização. (Para fazer isso, no console de administração do locatário, escolha Configurações de Serviço e, na configuração Atualizações, escolha Primeiro Lançamento). O Visual Studio Team Services pode ser usado para a execução de testes automáticos e qualquer outro teste de integração contínua.

• Locatário de produção. Libere aplicativos testados, aceitos e aprovados para este locatário. É possível criar um site de desenvolvedor neste locatário para desenvolver e testar aplicativos que têm escopo menor ou que têm impacto isolado. No geral, evite misturar seus ambiente de produção e desenvolvimento.

Ferramentas de design

Use as ferramentas de design e desenvolvimento Web padrão, como HTML, imagens, arquivos CSS e arquivos JavaScript para criar ativos de identidade visual para sites do SharePoint. Por exemplo, use o Adobe DreamWeaver e o Adobe PhotoShop para projetar os arquivos de imagem, de HTML, CSS e JavaScript que serão usados para dar a identidade visual aos seus sites do SharePoint. O SharePoint Designer também pode ser usado para criar, gerenciar e personalizar ativos de identidade visual ou para criar soluções personalizadas no Visual Studio.

Pacotes de design do SharePoint e arquivos .wsp

Os pacotes de design são arquivos .wsp criados pelo Gerenciador de Design que seguem regras previsíveis para o empacotamento de ativos de design. São, essencialmente, soluções de área restrita. Se você estiver usando outra ferramenta para empacotar ativos de identidade visual em um arquivo .wsp, os ativos terão um estado menos fixo e previsível.

O pacote de design contém todos os arquivos que foram personalizados. Por exemplo, se você criar um layout de página que usa um tipo de conteúdo personalizado, o pacote de design inclui o layout de página, o tipo de conteúdo personalizado usado e todas as colunas de site personalizadas. O pacote de design também contém vários arquivos relacionados a toda aparência composta que tenha sido aplicada a seu site do SharePoint, incluindo arquivos carregados nos seguintes locais:

• Biblioteca de ativos do site
• Biblioteca de estilos
• Galeria de Páginas Mestras

Se você tiver aplicado uma aparência composta a um site antes de aplicar uma identidade visual personalizada, o pacote de design incluirá arquivos com extensões de arquivo .themedcss e .themedpng. Para aplicar os ativos de identidade visual de um pacote de design a um site do SharePoint, exporte o pacote de design e use o padrão de provisionamento remoto para aplicar o conteúdo do pacote.

O SharePoint contém as APIs que podem ser usadas para trabalhar com pacotes de design. Se você estiver usando as classes SSOM, CSOM ou JSOM, poderá usar as classes DesignPackage ou DesignPackageInfo .

Usar o CSOM do pacote de design para aplicar o conteúdo de pacotes de design a um site do SharePoint

O exemplo a seguir mostra como usar as APIs do pacote de design no padrão de provisionamento remoto para aplicação de conteúdos dos pacotes de design a um site do SharePoint.

Este código foi projetado para ser usado com sites de publicação. Apesar de ser possível usar as APIs dos pacotes de design para aplicar identidade visual a sites de equipe que têm o recurso de publicação habilitado, isso pode acarretar problemas de suporte em longo prazo.

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 carregar ativos de identidade visual e uma página mestra em um site de equipe

Use o recurso CSOM do SharePoint para instalar e desinstalar pacotes de design e exportá-los para sites do SharePoint.

Por exemplo, use o método SP.Publishing.DesignPackage.install (sp.publishing) ou o método DesignPackage.Install para instalar o pacote de design no site, conforme mostrado no exemplo a seguir.

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

A classe DesignPackageInfo especifica metadados que descrevem o conteúdo do pacote de design a ser instalado. Use o método Uninstall para desinstalar o pacote de design do site, conforme mostrado no exemplo a seguir.

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

Se você tiver que aplicar identidade visual a um site de equipe que tenha o recurso publicação habilitado ou a um site de publicação no SharePoint Online, poderá usar o método ExportEnterprise ou ExportSmallBusiness para exportar pacotes de design para modelos de site na Galeria de Soluções. Use o método ExportSmallBusiness com o modelo de site de pequenas empresas e use o método ExportEnterprise para todos os outros modelos de site, conforme mostrado no exemplo a seguir.

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

Ao usar o método ExportSmallBusiness, inclua a configuração de pesquisa no pacote de design, conforme mostrado no exemplo a seguir. Todos os métodos de pacote de design operam no nível do conjunto de sites. O nome do pacote de design é representado pela cadeia de caracteres packageName.

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

Opções de ferramentas de design para o SharePoint Online

As ferramentas usadas para aplicar identidade visual a um site do SharePoint Online dependem da sua edição do SharePoint Online e do tipo de site que você deseja criar. A edição Small Business, por exemplo, inclui um site de equipe e um site público. Mas não contém um site de publicação. Você pode usar o suplemento Site Builder no SharePoint Online para personalizar a identidade visual do site público.

A edição Enterprise inclui um conjunto de sites de equipe no aplicativo Web raiz do domínio que não contém o site de publicação. Ela não inclui um site público. Use o Gerenciador de Design para gerenciar os elementos de identidade visual de site do SharePoint para o site de publicação na edição Enterprise do SharePoint Online.

Confira também

• Recursos da Comunidade de desenvolvedores do SharePoint (SharePoint PnP)
• Padrões e Práticas de Desenvolvedores do Office 365 no GitHub
• Soluções de identidade visual e provisionamento do SharePoint