Adicionar uma página e um estilo personalizados a um Suplemento do SharePoint hospedado pelo SharePoint

Este é o sétimo de uma série de artigos sobre as noções básicas de desenvolvimento de Suplementos do SharePoint hospedados pelo SharePoint. Primeiro, você deve estar familiarizado com Suplementos do SharePoint e os artigos anteriores desta série, que podem ser encontrados em Introdução à criação de Suplementos do Microsoft Office SharePoint Online hospedados no SharePoint | Próximas etapas.

Observação

Se você trabalhou com esta série sobre suplementos hospedados pelo SharePoint, você terá uma solução do Visual Studio que pode ser usada para continuar com este tópico. Você também pode baixar o repositório em Ins_Tutorials de hosted_Add SharePoint_SP e abrir o arquivo BeforePage.sln.

Neste artigo, você adicionará uma página de ajuda ao suplemento do SharePoint para Orientação de Funcionários e a configurará para usar uma folha de estilos CSS personalizada.

Adicionar uma página

1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Páginas e selecione Adicionar>Novo Item... A caixa de diálogo Adicionar Novo Item é aberta para o nó Office/SharePoint.

2. Selecione Página e dê a ela o nome Help.aspx.

3. Encontre os dois elementos asp:Content no arquivo e adicione a terceira marcação asp:Content a seguir entre eles.

   <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
     Help
   </asp:Content>
   

4. Encontre o elemento asp:Content com a ID PlaceholderAdditionalPageHead e adicione a marcação a seguir a ele.

   <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
   

5. Encontre o elemento asp:Content com a ID PlaceHolderMain e remova quaisquer elementos filho presentes nele.

6. Adicione o seguinte como conteúdo no mesmo elemento asp:Content.

   <H3>Having a problem with the add-in?</H3>
   <p>Call the help line for Fabrikam Add-ins:</p>
   <p>1-555-555-5555</p>
   

7. Salve e feche o arquivo.

8. Abra o arquivo Default.aspx.

9. Encontre o elemento asp:Content com a ID de PlaceHolderMain, depois adicione a marcação a seguir ao final dele.

   <p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Pages/Help.aspx';"
     Text="Get help for the Employee Orientation add-in" /></p>
   

10. Salve e feche o arquivo.

Adicionar uma classe de estilo à folha de estilo

1. No Gerenciador de Soluções, abra o arquivo app.css na pasta Conteúdo e, em seguida adicione a linha a seguir ao arquivo.

   p {color: green;}
   

2. Salve e feche o arquivo.

Executar e testar o suplemento

1. Use a tecla F5 para implantar e executar o suplemento. O Visual Studio faz uma instalação temporária do suplemento em seu site de teste do SharePoint e executa o suplemento imediatamente.

2. Ao abrir a página padrão do suplemento, selecione o link Obter ajuda para o suplemento Orientação de Funcionários para abrir a página Ajuda.

   Sua página personalizada abre e as duas linhas que você colocou em <p> e as marcas estão verdes.

   Figura 1. Página de ajuda

   

3. Para encerrar a sessão de depuração, feche a janela do navegador ou interrompa a depuração no Visual Studio. Sempre que você selecionar F5, o Visual Studio retirará a versão anterior do suplemento e instalará a versão mais recente.

4. Você lidará com esse suplemento e com a solução do Visual Studio em outros artigos, e recomenda-se retirar o suplemento uma última vez quando for deixar de trabalhar com ele por algum tempo. Clique com botão direito do mouse no projeto no Gerenciador de Soluções e escolha Retirar.

Próximas etapas

No próximo artigo desta série, você adicionará uma renderização personalizada do lado do cliente em um Suplemento do SharePoint hospedado pelo SharePoint.