Criar um botão da faixa de opções personalizado no host da Web de um suplemento do SharePoint

Este é o nono de uma série de artigos sobre os conceitos básicos do desenvolvimento de suplementos do SharePoint hospedados pelo SharePoint. Primeiro, você deve estar familiarizado com os suplementos do SharePoint e os artigos anteriores desta série, que você pode encontrar em Introdução à criação de suplementos do SharePoint 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 SharePoint_SP-hosted_Add-Ins_Tutorials e abrir o arquivo BeforeRibbon.sln.

Todos os Suplementos do SharePoint podem ser executados na página Conteúdo do Site da Web do host selecionando o bloco do suplemento. A funcionalidade de um Suplemento do SharePoint também pode ser exposta na Web do host por meio de ações personalizadas, que são botões de faixa de opções personalizados ou itens de menu personalizados. Neste artigo, você adiciona um botão à faixa de opções em uma Web de host.

Preparar a Web do host

Para adicionar o botão à faixa de opções de um calendário na Web do host, siga as etapas a seguir na interface do usuário do seu site de desenvolvedor do SharePoint.

1. Na página inicial do site, selecione Conteúdo do> Siteadicionar e adicionar>Calendário.

2. Na caixa de diálogo Adicionar Calendário , para o Nome, insira Agenda de Orientação do Funcionário e selecione Criar.

3. Quando o calendário abrir, coloque o cursor em qualquer data até que o link Adicionar apareça na data e selecione Adicionar.

4. Na caixa de diálogo Agenda de Orientação do Funcionário – Novo Item , para o Título, insira Orient Cassi Hicks. Deixe os outros campos em seus padrões e selecione Salvar.

   O calendário deve ser semelhante ao seguinte:

   Figura 1. Calendário personalizado

   

Importante

O próximo procedimento exige que o calendário fique visível na interface do usuário do Visual Studio, mas não será se o Visual Studio estiver aberto quando você criou o calendário. Antes de continuar, feche o Visual Studio e saia de todas as janelas do navegador e consoles do PowerShell em que você está conectado ao seu site de desenvolvedor.

Adicionar uma ação personalizada de faixa de opções

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto EmployeeOrientation e selecione Adicionar>Nova Ação> Personalizadado Office/SharePoint>Ribbon. Nomeie RunOrientationAdd-in e selecione Adicionar.

2. O assistente para Criar uma Ação Personalizada para Faixa de Opções faz uma série de perguntas. Dê as respostas na tabela a seguir e selecione Concluir.

   Pergunta sobre propriedade	Resposta
   Onde você deseja expor a ação personalizada?	Selecione Host da Web.
   Onde é feito o escopo da ação personalizada?	Selecione Instância de Lista (não Modelo de Lista).
   Em qual item é feito o escopo da ação personalizada?	Selecione Agendamento de orientação do funcionário.
   Onde está localizado o controle?	Não use as seleções suspensas. Em vez disso, insira Ribbon.Calendar.Events.Actions.Controls._children. (A terceira parte, Eventos, identifica a guia da faixa de opções e a quarta parte, Ações, identifica o grupo de botões.)
   Qual é o texto no item de menu?	Insira Orientação do Funcionário.
   Para onde a ação personalizada navega?	Não use as seleções suspensas. Em vez disso, insira ~appWebUrl/Lists/NewEmployeesInSeattle. Esta é a página de exibição de lista da lista, que está na Web de suplemento, portanto, o botão faixa de opções na Web do host abre uma página na Web de suplemento.

Inspecionar o recurso Web de suplemento

Em Gerenciador de Soluções, expanda a pasta Recursos e selecione o recurso NewEmployeeOrientationComponents. O designer de recursos é aberto.

Observe que a ação personalizada que você criou, RunOrientationAdd-in, está listada em Itens na solução, mas não em Itens no recurso. Isso ocorre porque o recurso é implantado na Web de suplemento, mas sua ação personalizada é implantada na Web do host.

Quando você empacota o suplemento no Visual Studio para implantação em produção ou quando seleciona f5 no Visual Studio, as Ferramentas de Desenvolvedor do Office para Visual Studio cria um recurso web de host especial, adiciona a ação personalizada a ele e o implanta na Web do host. Você nunca deve editar o recurso Web do host; é por isso que ele não é criado até a hora da embalagem.

Figura 2. Designer de recursos

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. A página padrão do Suplemento do SharePoint é aberta. Acesse a página inicial do seu site de desenvolvedor (que é a Web do host). Há um link de migalhas de pão para ele no canto superior esquerdo da página.

3. Na página inicial da Web do host, selecione Conteúdo do Site e, na página Conteúdo do Site , selecione o calendário agendamento de orientação do funcionário (não o suplemento Orientação do Funcionário ).

4. Quando o calendário for aberto, selecione o evento Orient Cassie Hicks. Se a guia Eventos na faixa de opções não abrir automaticamente, abra-a. Ele deve ser semelhante ao seguinte:

   Figura 3. Guia faixa de opções de eventos com o botão personalizado

   

5. No grupo Ações na faixa de opções, selecione Orientação do Funcionário. A página de exibição de lista para Novos Funcionários em Seattle é aberta.

6. 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.

7. 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á JavaScript ao Suplemento do SharePoint e acessará dados do SharePoint com o modelo de objeto JavaScript do SharePoint: use as APIs JavaScript do SharePoint para trabalhar com dados do SharePoint.