Adicionar um trecho do Painel de Canais de Dispositivo no SharePoint
Um painel de canal de dispositivo é um trecho de código que você pode adicionar a uma página mestra ou layout de página para controlar o conteúdo que é processado para cada canal que você criar. A principal finalidade de um painel de canal de dispositivo é seletivamente exibir campos de página diferente em diferentes canais de um layout de página única.
Introdução ao trecho de painel de canal do dispositivo
Um Painel de Canal de Dispositivo é um controle que você pode adicionar a uma página master ou layout de página para controlar qual conteúdo é renderizado em cada canal que você cria. Um Painel de Canal do Dispositivo é um contêiner que especifica um ou mais canais; se um ou mais desses canais estiverem ativos quando a página for renderizada, todo o conteúdo do Painel do Canal do Dispositivo também será renderizado. Um Painel de Canal de Dispositivo pode incluir quase qualquer tipo de conteúdo, incluindo um link para um arquivo CSS ou um arquivo .js. É uma maneira fácil de incluir conteúdo específico para canais específicos.
Talvez a situação mais comum para o uso de painéis do canal do dispositivo é seletivamente incluir partes de um layout de página para canais específicos. Por exemplo, você pode ter um layout de página com campos de texto separado para uma saudação longa e uma saudação curta. Colocando os campos de página dentro de painéis do canal de dispositivo, você pode exibir a saudação curta apenas aos telefones e a saudação long somente à área de trabalho. O conteúdo de um painel de canal do dispositivo não é exibido no canais não incluídos na verdade, o conteúdo não é processado nisso, que impede que bytes passando pela conexão. Por esse motivo, usar painéis de canal de dispositivo é uma maneira melhor de exibir conteúdo em canais específicos do que usar uma classe CSS com Display:None porque os Painéis de Canal de Dispositivo ajudam a reduzir o peso da página para um canal específico.
Você também pode usar os painéis do canal de dispositivo em páginas mestras. Por exemplo, se você tiver uma página mestra que pode acomodar dois dispositivos diferentes (ou dois diferentes navegadores) com apenas alterações mínimas, você pode usar painéis do canal do dispositivo para reter o conteúdo na página mestra que é específica para qualquer um desses dispositivos.
Existem duas limitações ao uso de um painel de canal do dispositivo:
- Modelos de exibição Como modelos de exibição são renderizados no lado do cliente e painéis do canal do dispositivo é executado no lado do servidor, você não pode usar um painel de canal de dispositivo dentro de um modelo de exibição. Em vez disso, você deve usar duas web parts de Pesquisa de Conteúdo diferentes em Painéis de Canal de Dispositivo em seu layout de página ou usar a variável JavaScript para disparar o comportamento desejado dentro do próprio modelo de exibição.
- Zonas da Web Part Não é possível inserir uma zona da Web Part dentro de um Painel de Canal de Dispositivo. Se você quiser permitir que os autores adicionem web parts a uma página e se não estiver preocupado com o peso da página para dispositivos móveis, poderá adicionar um campo de página do Editor de Rich Text a um Painel de Canais de Dispositivos e, em seguida, instruir os autores a adicionarem as web parts ali. Você pode adicionar web parts diretamente a um Painel de Canais de Dispositivos (sem uma zona de web part).
Inserindo um trecho do painel de canal do dispositivo
Como todos trechos de código, você pode adicionar um trecho do painel de canal do dispositivo da Galeria trecho. Para navegar na Galeria de trechos, primeiro você deve selecionar uma página mestra ou layout de página para editar.
Para inserir um trecho do painel de canal do dispositivo
Navegue até o seu site de publicação.
No canto superior direito da página, escolha engrenagem as configurações e clique em Gerenciador de Design.
No Gerenciador de Design, no painel de navegação esquerdo, escolha Editar páginas mestras ou Editar Layouts de página, dependendo de qual tipo de arquivo que você está editando.
Selecione o nome da página mestra ou layout de página que você deseja adicionar o trecho de código para.
Para abrir a Galeria de trechos, escolha trechos no canto superior direito da visualização do servidor.
Na faixa de opções, na guia Design, escolha Painel de canal do dispositivo.
No lado direito da Galeria trecho, sob sobre este componente, clique ou selecione cabeçalhos de seção para expandir ou recolher grupos de propriedades e, em seguida, configure quaisquer configurações personalizadas que você deseja.
A seção denominada importante contém as propriedades que são fundamentais para como funciona a esse trecho específico. Para um painel de canal do dispositivo, a propriedade IncludedChannels é o mais importante. Para essa propriedade, digite o alias de cada canal de dispositivo que você deseja exibir o conteúdo contido neste painel de canal do dispositivo. Se você inserir mais de um alias, separe-os com uma vírgula.
Observação
Se você editar o alias de um canal na lista Canais de Dispositivo, deverá localizar e atualizar manualmente esse alias onde quer que ele apareça em seus arquivos de design, incluindo atualizar a propriedade IncludedChannels para cada Painel de Canal de Dispositivo que usa esse alias.
Depois de configurar todas as outras propriedades, escolha a atualização. Isso atualiza o trecho de código HTML no lado esquerdo da página, para que a marcação reflete suas configurações personalizadas. Você sempre pode escolher Redefinir para retornar todas as propriedades para suas configurações padrão.
No lado esquerdo da Galeria trecho, sob Trecho HTML, escolha Copiar para área de transferência.
No seu editor de HTML, abra a unidade de rede mapeada no seu computador e abra o arquivo HTML para a página mestra ou layout de página que você está adicionando o trecho de código para.
Para obter mais informações, consulte Como mapear uma unidade de rede para a Galeria de Páginas Mestras do SharePoint.
No arquivo HTML, cole o trecho de onde você deseja que a marca seja exibida.
Se você estiver adicionando o trecho de código a um layout de página, certifique-se colar o trecho de PlaceHolderMain.
Substituir o
<div>ondeclass="DefaultContentBlock"com seu próprio conteúdo específico.Normalmente, se você estiver adicionando um painel de canal de dispositivo a um layout de página, substitua o
<div>, copiando os campos de página dentro do painel.Salve a página e, em seguida, atualize a visualização do servidor no Gerenciador de Design para certificar-se de que o painel de canal de dispositivo é exibido conforme o esperado.
Para visualizar o painel no canais diferentes, você pode adicionar os parâmetros de seqüência de consulta para a URL. Por exemplo, você pode acrescentar a variável
"DeviceChannel=YourChannelAlias"de cadeia de caracteres de consulta à URL de qualquer página na versão prévia do lado do servidor.
Como entender as marcações de trecho
As duas partes mais importantes de um trecho de código do painel de canal de dispositivo são a propriedade IncludedChannels e o <div> onde class="DefaultContentBlock". Por padrão, a propriedade IncludedChannels está vazia. Na seção importante da grade de propriedades, você deve inserir os aliases, separados por vírgulas, dos canais de dispositivo que você deseja exibir o conteúdo neste painel.
Observação
[!OBSERVAçãO] Se você alterar um alias na lista de canais de dispositivo, você deve também alterar ou alias sempre que ela será exibida na sua marcação, incluindo na propriedade IncludedChannels para cada painel de canal do dispositivo que usa esse alias.
O <div> local em class="DefaultContentBlock" que deve ser substituído por qualquer conteúdo específico que você deseja exibir para os canais incluídos. Um Painel de Canal de Dispositivo pode incluir quase qualquer tipo de conteúdo, incluindo um link para um arquivo CSS ou um arquivo .js. O cenário mais comum para usar painéis de canal de dispositivo é incluir campos de página específicos de um layout de página para canais específicos. Nesse caso, você copia a marcação do campo de página em que o <div> está posicionado dentro do Painel de Canal do Dispositivo.
<div data-name="DeviceChannelPanel">
<!--CS: Start Device Channel Panel Snippet-->
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="MyPhoneChannel, MyTabletChannel">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
You should replace this div with content that renders based on your Device Channel Panel Properties.
</div>
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</Publishing:DeviceChannelPanel>-->
<!--CE: End Device Channel Panel Snippet-->
</div>