Atualizar a identidade visual de sites e regiões de página existentes do SharePoint
Você pode atualizar a identidade visual em seus sites e coleções de sites existentes do SharePoint, bem como personalizar regiões das páginas do SharePoint. Faça isso, por exemplo, ao atualizar para uma nova versão do site.
Importante
Essa opção de extensibilidade está disponível apenas para experiências clássicas do SharePoint. Você não pode usar essa opção com experiências modernas no SharePoint Online, como nos sites de comunicação.
Atualizar a identidade visual de sites e subsites existentes
O exemplo branding.refresh no projeto padrões e práticas do desenvolvedor Office 365 no GitHub mostra como usar a biblioteca OfficeDevPnP.Core para iterar em sites e subsites existentes para verificar e atualizar a identidade visual aplicada. O exemplo mostra como atualizar a identidade visual do site, mas o mesmo conceito pode ser usado para fazer outras coisas, como implantar uma nova biblioteca em uma lista de sites ou atualizar uma ação personalizada que foi implantada durante o provisionamento. Você pode usar o mesmo processo para mover sites existentes para uma nova versão.
A operação tem duas etapas:
- Fazer com que os sites desejados sejam atualizados.
- Atualize a identidade visual do site.
Obter os sites que você deseja atualizar
Primeiro, obtenha uma lista de sites e subsites que deseja atualizar. O exemplo mostra como fazer isto usando o recurso de pesquisa, mas há outras opções, como ler a partir de um diretório de sites ou fornecer uma interface de usuário de gerenciamento em que os administradores podem especificar a lista. O exemplo a seguir mostra como usar o recurso de pesquisa para gerar a lista.
// Get a list of sites. Search is one way to get this list, an alternative can be a site directory.
List<SiteEntity> sites = cc.Web.SiteSearchScopedByUrl("https://bertonline.sharepoint.com");
// Generic settings (apply changes on all webs or just root web).
bool applyChangesToAllWebs = true;
// Optionally further refine the list of returned site collections.
var filteredSites = from p in sites
where p.Url.Contains("13003")
select p;
List<SiteEntity> sitesAndSubSites = new List<SiteEntity>();
if (applyChangesToAllWebs)
{
// You want to update all sites, so the list of sites is extended to all subsites.
foreach (SiteEntity site in filteredSites)
{
sitesAndSubSites.Add(new SiteEntity() { Url = site.Url,
Title = site.Title,
Template = site.Template });
GetSubSites(cc, site.Url, ref sitesAndSubSites);
}
sites = sitesAndSubSites;
}
A chamada para GetSubSites é recursiva, portanto, busca a árvore subsite. Após a árvore ter sido recuperada, verifique se a quantidade retornada está correta antes de continuar.
Atualizar a identidade visual
Após selecionar um site para processar, use os métodos OfficeDevPnP.Core para manipular o site. O exemplo mostra como fazer isso para a identidade visual do site, mas é possível processar qualquer tipo de alteração da mesma forma.
O exemplo usa um padrão que utiliza o recipiente de propriedades da Web para armazenar informações sobre as configurações atuais. O código lê primeiro os valores do recipiente de propriedades Web e, então, age de acordo com cada valor.
// Verify that you have a property bag entry.
string themeName = cc.Web.GetPropertyBagValueString(BRANDING_THEME, "");
if (!String.IsNullOrEmpty(themeName))
{
// If no theme property bag entry, assume no theme has been applied.
if (themeName.Equals(currentThemeName, StringComparison.InvariantCultureIgnoreCase))
{
// The applied theme matches to the theme you want to update.
int? brandingVersion = cc.Web.GetPropertyBagValueInt(BRANDING_VERSION, 0);
if (brandingVersion < currentBrandingVersion)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
else
{
if (forceBranding)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries.
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
}
O código que atualiza o tema é simples e baseado em métodos OfficeDevPnP.Core.
string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));
string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));
if (IsThisASubSite(cc.Url))
{
// Retrieve the context of the root site of the site collection.
using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
{
ccParent.Credentials = cc.Credentials;
cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
}
}
else
{
cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToWeb(themeName);
}
Personalizar regiões de uma página do SharePoint
Quando seu objetivo é personalizar regiões de uma página do SharePoint, você pode usar uma combinação de provisionamento remoto e CSS (planilhas de estilo em cascata) personalizadas em arquivos associados a regiões da página. Inicialmente, então, você deve estar ciente de quais arquivos do SharePoint estão associados às várias regiões de uma página do SharePoint.
Tabela 1. Regiões de página do SharePoint e arquivos associados
| Região da página | Arquivos associados | Mais informações |
|---|---|---|
| Ribbon | Qualquer das páginas mestras padrão. CSS correspondente:
|
Pode ser ocultado com o botão Foco no Conteúdo. |
| Navegação de pacote | Qualquer das páginas mestras padrão. | Pode ser ocultado com o botão Foco no Conteúdo. |
| Links de pacote | Pode ser ocultado com o botão Foco no Conteúdo. | |
| Menu de boas-vindas | *. master | Pode ser ocultado com o botão Foco no Conteúdo. |
| Menu de configurações (engrenagem) | *. master | |
| Ajuda | *. master | |
| Guias de contexto da faixa de opções | Qualquer página mestra padrão. | Para ver exemplos, consulte o seguinte: |
| Barra de ferramentas de acesso rápido | *. master | Pode ser ocultado com o botão Foco no Conteúdo. |
| Logotipo do site | *. master CSS correspondente: .ms-sitelcon-img |
|
| Navegação superior | Navegação CSOM/JSOM *. master CSS correspondente (fora do modo de edição):
|
|
| Título da página | CSS correspondente (no modo de edição):
|
|
| Caixa de pesquisa | Nav CSOM/JSOM *.master CSS correspondente:
|
|
| Navegação à esquerda | Nav CSOM/JSOM *.master | Para saber mais, veja: |
| Exibição em árvore | *. master | Para obter mais informações, consulte Como personalizar o navegador interno do Treeview. |
| Conteúdo da página | Página Layout/Páginas de Conteúdo Zona da Web part/web partsCorresponding CSS (web part zone e Web Part):
|
Para obter mais informações, confira Criar um layout de página no SharePoint |
Para obter exemplos relacionados à personalização de regiões de uma página, consulte o seguinte no projeto Office 365 Padrões e Práticas do Desenvolvedor no GitHub:
Espaços reservados de conteúdo "mínimo" necessários em páginas padrão do SharePoint master
Sharepoint. master páginas exigem que você use espaços reservados de conteúdo, que renderizam o conteúdo básico e os elementos estruturais que uma página do SharePoint precisa para dar suporte ao ciclo de vida da página. A Tabela 2 lista e descreve os espaços reservados de conteúdo.
Tabela 2. Espaços reservados de conteúdo necessários mínimos para uma página de master do SharePoint
| Espaço reservado de conteúdo | Reserva espaço para |
|---|---|
| PlaceHolderAdditionalPageHead | Itens adicionais na \<head\> seção de uma página. |
| PlaceHolderBodyAreaClass | Estilos adicionais no cabeçalho da página. |
| PlaceHolderBodyLeftBorder | O elemento de borda esquerda para o corpo da página. |
| PlaceHolderBodyRightBorder | O elemento de borda direita para o corpo da página. |
| PlaceHolderCalendarNavigator | Um seletor de datas para navegar por um calendário quando este fica visível em uma página. |
| PlaceHolderFormDigest | O controle de segurança "digestão de formulários". |
| PlaceHolderGlobalNavigation | A trilha na navegação global (navegação superior). |
| PlaceHolderGlobalNavigationSiteMap | O mapa do site na navegação global (navegação superior). |
| PlaceHolderHorizontalNav | O menu da navegação superior de uma página (navegação superior). |
| PlaceHolderLeftActions | A área de navegação inferior à esquerda (navegação à esquerda). |
| PlaceHolderLeftNavBar | A área de navegação à esquerda (navegação à esquerda). |
| PlaceHolderLeftNavBarDataSource | A fonte de dados do menu de navegação à esquerda (navegação à esquerda). |
| PlaceHolderLeftNavBarTop | A área de navegação superior à esquerda (navegação à esquerda). |
| Placeholdermain | O principal conteúdo da página (conteúdo da página). |
| PlaceHolderMiniConsole | Comandos da página, como Editar Página, Histórico e Links de Entrada em uma página wiki da empresa. |
| PlaceHolderNavSpacer | A largura da área de navegação à esquerda (navegação à esquerda). |
| PlaceHolderPageDescription | Descrição do conteúdo da página. |
| PlaceHolderPageImage | Ícone de página no canto superior esquerdo da página (faixa de opções). |
| PlaceHolderPageTitle | O título da página (\<title\>) (Título da Página) exibido na barra de título da página do navegador. |
| PlaceHolderPageTitleInTitle | O título da página (título de página) imediatamente abaixo da trilha de navegação. |
| PlaceHolderQuickLaunchBottom | Parte inferior da navegação do Início Rápido (navegação superior). |
| PlaceHolderQuickLaunchTop | Parte superior da navegação do Início Rápido (navegação superior). |
| PlaceHolderSearchArea | Área em que a o controle da caixa de pesquisa aparece (caixa de pesquisa). |
| PlaceHolderSiteName | O nome do site (navegação de pacote). |
| PlaceHolderTitleAreaClass | A área de título da página (navegação de pacote). |
| PlaceHolderTitleAreaSeparator | Sombras na área de título (navegação de pacote). |
| PlaceHolderTitleBreadCrumb | Área de conteúdo da trilha de título. |
| PlaceHolderTitleLeftBorder | A borda esquerda da área do título (navegação de pacote). |
| PlaceHolderTitleRightMargin | A margem direita da área de título (navegação de pacote). |
| PlaceHolderTopNavBar | A área de navegação superior (navegação superior). |
| PlaceHolderUtilities | Conteúdo adicional que deve aparecer na parte inferior da página (conteúdo de página). |
| Spnavigation | Inclui operações de navegação. |
| WSSDesignConsole | Os controles de edição de página quando a página está no modo de edição. |
Se você remover um dos espaços reservados de conteúdo listados na Tabela 2 de um SharePoint . master página, o SharePoint lançará um erro. É possível adicionar um espaço reservado de conteúdo com visibilidade oculta, o que o esconde dos usuários.
Para obter mais informações, consulte Windows SharePoint Services Páginas Mestras Padrão (este artigo descreve a funcionalidade em SharePoint Services 3, mas o conteúdo ainda se aplica). Consulte também Trabalhar com controles de espaço reservado de conteúdo.
Páginas de master padrão do SharePoint, como seattle.master e oslo.master incluem muito mais espaços reservados de conteúdo do que o SharePoint exige. Por exemplo, essas páginas master incluem <SharePoint:Themes runat="server"> e <SharePoint.CssRegistration runat="server"> controles.
Os controles Themes e CssRegistration são executados durante o ciclo de vida da página. Usando o padrão de provisionamento remoto, é possível utilizar uma ação personalizada para adicionar um controle de servidor para registrar um CSS personalizado.
Os espaços reservados de conteúdo que não estão visíveis ainda funcionam conforme o esperado, mas qualquer conteúdo gerado é omitido da fonte HTML que os navegadores reconhecem. Um espaço reservado de conteúdo com Visible="false" está oculto.
Importante
Não crie espaços reservados personalizados em páginas de master personalizadas que existem em páginas .master fora da caixa, como seattle.master e oslo.master. Isso retornará exceções catastróficas.
Controle de navegação do pacote online do SharePoint
O SharePoint Online apresenta nova marcação de página master para o controle de navegação do Suite, que renderiza a navegação superior. A marcação padrão do controle da Navegação de Pacote é diferente dependendo de o site estar na Intranet ou ser voltado para o público. Para saber mais sobre o controle de Navegação de Pacote e ver exemplos de código para sites de Intranet e voltados para o público que podem ser adicionados às suas páginas mestres, consulte SharePoint Online Suite Navigation control.
Usar o CSOM para personalizar as regiões de uma página do SharePoint
Geralmente, recomendamos que você use a classe UserCustomAction para adicionar ou remover links e outros elementos. Essa é uma variante do SharePoint usando o elemento CustomAction , que você pode reconhecer como parte da estrutura de recursos se estiver familiarizado com o modelo de código de confiança completo. Apesar de o elemento CustomAction e o padrão de provisionamento da estrutura de recursos não serem especificamente compatíveis com o modelo de objeto do lado do cliente (CSOM), os mesmos identificadores de local disponíveis ao elemento CustomAction podem ser usados no código CSOM.
<CustomAction
RequiredAdmin = "Delegated | Farm | Machine"
ControlAssembly = "Text"
ControlClass = "Text"
ControlSrc = "Text"
Description = "Text"
FeatureId = "Text"
GroupId = "Text"
Id = "Text"
ImageUrl = "Text"
Location = "Text"
RegistrationId = "Text"
RegistrationType = "Text"
RequireSiteAdministrator = "TRUE" | "FALSE"
Rights = "Text"
RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text"
ScriptBlock = "Text"
Sequence = "Integer"
ShowInLists = "TRUE" | "FALSE"
ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
ShowInSealedContentTypes = "TRUE" | "FALSE"
Title = "Text"
UIVersion = "Integer">
</CustomAction>
Personalizar a faixa de opções do SharePoint
Quando você personaliza a faixa de opções, o HTML que o servidor processa é atribuído ao nome da classe que você atribuiu a um estilo personalizado. Para usar esse recurso, vá até a Biblioteca de Estilos e crie um novo arquivo de CSS para cada estilo que quiser adicionar à faixa de opções. Você pode adicionar estilos personalizados a duas seções da faixa de opções:
- Para a seção Elementos de Página :
span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}. Ou use os estilos H1, H2, H3 ou H4, que estarão dispostos em volta do texto a que o estilo está aplicado. - Para a seção Estilos de Texto :
.ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}.
Depois, na definição de classe de CSS, adicione a seguinte linha:
-ms-name:"The name visual in the ribbon for your style";
Agora você pode terminar de definir os detalhes de sua classe personalizada de CSS no arquivo .css personalizado.
Personalizar a Navegação do Suite em uma página da Web Part
No SharePoint, a interface do usuário tem uma aparência moderna baseada em blocos de página. Por exemplo, blocos ao vivo aparecem na página padrão do SharePoint por padrão. A navegação superior facilita que os usuários vejam e acessem conteúdo social e OneDrive for Business. Você pode personalizar a aparência dessas áreas usando uma mistura de CSS e JavaScript.
Depois de criar uma página da Web Part, adicione uma Web Part do Editor de Scripts a uma zona de Web Part disponível. Você pode usar essa Web Part para adicionar JavaScript à sua página. Você pode adicionar código JavaScript à Web Part do Editor de Scripts que identifica a barra de navegação superior por seu ElementId e, em seguida, escondê-lo definindo sua propriedade de visibilidade como oculta.
Personalizar o menu Configurações (engrenagem)
Você pode usar as entradas da classe UserCustomAction e do pacote de propriedades para personalizar o menu de configurações de qualquer site do SharePoint, conforme mostrado no exemplo de código a seguir.
public void AddCustomActions(ClientContext clientContext)
{
// Add a site settings link if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomSiteSetting"))
{
// Add a site settings link.
UserCustomAction siteSettingLink = clientContext.Web.UserCustomActions.Add();
siteSettingLink.Group = "SiteTasks";
siteSettingLink.Location = "Microsoft.SharePoint.SiteSettings";
siteSettingLink.Name = "Sample_CustomSiteSetting";
siteSettingLink.Sequence = 1000;
siteSettingLink.Url = string.Format(DeployManager.appUrl, clientContext.Url);
siteSettingLink.Title = "Modify Site Metadata";
siteSettingLink.Update();
clientContext.ExecuteQuery();
}
// Add a site actions link, if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomAction"))
{
UserCustomAction siteAction = clientContext.Web.UserCustomActions.Add();
siteAction.Group = "SiteActions";
siteAction.Location = "Microsoft.SharePoint.StandardMenu";
siteAction.Name = "Sample_CustomAction";
siteAction.Sequence = 1000;
siteAction.Url = string.Format(DeployManager.appUrl, clientContext.Url); ;
siteAction.Title = "Modify Site Metadata";
siteAction.Update();
clientContext.ExecuteQuery();
}
}
Personalizar o modo de exibição em árvore
Para modificar a largura da exibição da árvore, adicione uma <div> marca ao redor da marca de árvore na página .master e atribua uma classe CSS com um atributo de largura de <div>estilo ao . Você pode aumentar a largura da navegação de Lançamento Rápido adicionando a definição de estilo a seguir ao arquivo *.css .
.ms-nav {
width: 220 px;
}
Personalizar o conteúdo da página
Os requisitos para personalizar o conteúdo da página dependem do conteúdo que você está incluindo em sua página. Quanto à personalização do menu Ações do Site , você pode usar um objeto UserCustomAction para provisionar a identidade visual em web parts.
Se você estiver criando um site de publicação, consulte Criar um layout de página no SharePoint para saber o básico. Os layouts de página dependem da disponibilidade da classe ContentTypeId no CSOM. Quanto a outros membros que não estão disponíveis no CSOM, você pode usar um serviço WCF (Windows Communication Foundation) para trabalhar com ContentTypeId como uma solução alternativa temporária.