Compartir a través de

Agregar un fragmento del panel del canal de dispositivos en SharePoint

  • Artículo

Un Panel de canal de dispositivo es un fragmento de código que se puede agregar a una página maestra o un diseño de página para controlar el contenido que se representa para cada canal que cree. El propósito principal de un Panel de canal de dispositivo es mostrar de forma selectiva los campos de página diferente en distintos canales de un solo diseño de página.

Introducción para el fragmento de código de Panel de canal de dispositivo

Un Panel de canal de dispositivo es un control que se puede agregar a una página maestra o un diseño de página para controlar el contenido que se representa en cada canal que cree. Un Panel de canal de dispositivo es un contenedor que especifica uno o más canales; Si uno o varios de esos canales están activos cuando se representa la página, también se representan todo el contenido del Panel de canal de dispositivo. Un Panel de canal de dispositivo puede incluir casi cualquier tipo de contenido, incluyendo un vínculo a un archivo CSS o un archivo .js. Es una forma sencilla de incluir contenido específico para canales específicos.

Quizás el escenario más común para el uso de paneles de canales de dispositivo es incluir de manera selectiva elementos de un diseño de página para canales específicos. Por ejemplo, puede tener un diseño de página con campos de texto independiente para un saludo largo y un saludo breve. Mediante la colocación de los campos de página dentro de los paneles de canales de dispositivo, puede mostrar el saludo corto sólo a los teléfonos y el saludo de tipo long sólo en el escritorio. No se muestra el contenido de un Panel de canal de dispositivo en canales no incluyen, de hecho, el contenido no se representa en absoluto, lo que impide que bytes paso a través del cable. Por este motivo, el uso de paneles de canal de dispositivo es una mejor manera de mostrar contenido en canales específicos que usar una clase CSS con Display:None porque los paneles de canal de dispositivo ayudan a reducir el peso de página de un canal específico.

También puede usar paneles de canales de dispositivo en las páginas maestras. Por ejemplo, si tiene una página maestra que puede dar cabida a dos dispositivos diferentes (o dos diferentes exploradores) con un mínimo de cambios, puede usar paneles de canales de dispositivo para retener el contenido en la página maestra que es específica de cualquiera de esos dispositivos.

Existen dos limitaciones para usar un Panel de canal de dispositivo:

  • Plantillas para mostrar Debido a que las plantillas para mostrar se representan en el cliente y paneles de canales de dispositivo que se ejecute en el servidor, no se puede usar un Panel de canal de dispositivo dentro de una plantilla para mostrar. En su lugar, debe usar dos elementos web de búsqueda de contenido diferentes dentro de los paneles de canal de dispositivo en el diseño de página, o bien usar la variable JavaScript para desencadenar el comportamiento que desee dentro de la propia plantilla de presentación.
  • Zonas de elementos web No se puede insertar una zona de elementos web dentro de un panel de canal de dispositivo. Si quiere permitir que los autores agreguen elementos web a una página y no le preocupa el peso de la página para dispositivos móviles, puede agregar un campo de página de Editor de texto enriquecido a un Panel de canal de dispositivo y, luego, indicar a los autores que agreguen elementos web. Puede agregar elementos web directamente a un panel de canal de dispositivo (sin ninguna zona de elementos web).

Insertar un fragmento de código de Panel de canal de dispositivo

Al igual que todos los fragmentos de código, se agrega un fragmento de código de Panel de canal de dispositivo de la Galería de fragmento de código. Para navegar a la Galería de fragmento de código, primero debe seleccionar una página maestra o un diseño de página para editar.

Para insertar un fragmento de código de Panel de canal de dispositivo

  1. Vaya a su sitio de publicación.

  2. En la esquina superior derecha de la página, elija el engranaje Configuración y luego elija Administrador de diseño.

  3. En el Administrador de diseño, en el panel de navegación izquierdo, elija Editar páginas principales o Editar diseños de página, en función del tipo de archivo que está editando.

  4. Seleccione el nombre de la página maestra o un diseño de página que se va a agregar el fragmento de código.

  5. Para abrir la Galería de fragmentos de código, elija Fragmentos de código en la esquina superior derecha de la vista previa del lado del servidor.

  6. En la cinta de opciones, en la ficha Diseño, elija Panel de canal de dispositivo.

  7. En el lado derecho de la Galería de fragmentos de código, en Acerca de este componente, haga clic o seleccione los encabezados de sección para expandir o contraer los grupos de propiedades y luego configure las opciones personalizadas que quiera.

    La sección denominada importante contiene las propiedades que son fundamentales para el funcionamiento de este fragmento de código determinado. En un Panel de canal de dispositivo, la propiedad IncludedChannels es el más importante. Para esta propiedad, escriba el alias de cada canal de dispositivo que va a mostrar el contenido en el Panel de canal de dispositivo. Si especifica más de un alias, separe cada con una coma.

    Nota:

    Si edita el alias de un canal en la lista Canales de dispositivo, debe buscar y actualizar manualmente ese alias dondequiera que aparezca en los archivos de diseño, incluida la actualización de la propiedad IncludedChannels para cada panel de canal de dispositivo que use ese alias.

  8. Después de configurar las demás propiedades, seleccione Actualizar. Esto actualiza el fragmento de código HTML en el lado izquierdo de la página, para que el marcado refleja la configuración personalizada. Siempre puede elegir Restablecer para devolver todas las propiedades a sus configuraciones predeterminadas.

  9. En el lado izquierdo de la Galería de fragmentos de código, en Fragmento de código HTML, elija Copiar al Portapapeles.

  10. En su editor HTML, abra la unidad de red asignada en su equipo y luego abra el archivo HTML de la página principal o del diseño de página al que quiere agregar el fragmento de código.

    Para obtener más información, vea Cómo: Asignar una unidad de red a la Galería de páginas maestras de SharePoint.

  11. En el archivo HTML, pegue el fragmento de código en el lugar donde quiere que aparezca el marcado.

    Si va a agregar el fragmento de código a un diseño de página, asegúrese de pegar el fragmento de código dentro de PlaceHolderMain.

  12. Reemplace la etiqueta <div> donde class="DefaultContentBlock" por su propio contenido específico.

    Normalmente, si va a agregar un Panel de canal de dispositivo a un diseño de página, reemplace la <div> mediante la copia de los campos de página dentro del panel.

  13. Guarde la página y, a continuación, actualice la vista previa del lado del servidor en el Administrador de diseño para asegurarse de que el Panel de canal de dispositivo aparece como se esperaba.

    Para obtener una vista previa del panel en distintos canales, puede agregar parámetros de cadena de consulta a la dirección URL. Por ejemplo, puede anexar la variable "DeviceChannel=YourChannelAlias" de cadena de consulta a la dirección URL de cualquier página de la vista previa del lado servidor.

Descripción del marcado del fragmento de código

Las dos partes más importantes de un fragmento de código de Panel de canal de dispositivo son la propiedad IncludedChannels y el <div> donde class="DefaultContentBlock". De forma predeterminada, la propiedad IncludedChannels está vacía. En la sección importante de la cuadrícula de propiedades, debe escribir los alias, separados por comas de los canales de dispositivo que se va a mostrar el contenido de este panel.

Nota:

[!NOTA] Si cambia un alias en la lista de canales de dispositivo, también debe cambiar ese alias siempre que aparezca en el marcado, incluidos en la propiedad IncludedChannels para cada Panel de canal de dispositivo que usa ese alias.

El <div> donde se debe reemplazar class="DefaultContentBlock" con cualquier específica de contenido se va a mostrar para los canales incluyen. Un Panel de canal de dispositivo puede incluir casi cualquier tipo de contenido, incluyendo un vínculo a un archivo CSS o un archivo .js. El escenario más común para el uso de paneles de canales de dispositivo es incluir campos de página específico de un diseño de página para canales específicos. En este caso, copie el marcado de campo de página donde se coloca el <div> dentro del Panel de canal de 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>

Vea también