Ajouter un extrait de code dans le canal d’appareil dans SharePoint
Un panneau de configuration de canal de périphérique est un extrait de code que vous pouvez ajouter à une page maître ou la mise en page pour contrôler le contenu qui est affiché pour chaque canal que vous créez. Le principal objectif d'un panneau de configuration de canal de périphérique consiste à afficher de manière sélective des champs de page différents sur différents canaux à partir d'une seule mise en page.
Introduction à l'extrait de code de canal de périphérique du Panneau de configuration
Un panneau de configuration de canal de périphérique est un contrôle que vous pouvez ajouter à une page maître ou la mise en page pour contrôler le contenu qui est restitué dans chaque canal que vous créez. Un panneau de configuration de canal de périphérique est un conteneur qui spécifie un ou plusieurs canaux ; Si un ou plusieurs de ces canaux sont actifs lorsque la page est restituée, tout le contenu du panneau canal d'appareil sont également rendus. Un panneau de canal d'appareil peut inclure quasiment n'importe quel type de contenu, y compris un lien vers un fichier CSS ou un fichier .js. Il est un moyen facile pour inclure le contenu spécifique pour les canaux spécifiques.
Le scénario le plus courant pour l'utilisation de volets canaux des appareils est peut-être sélection pour inclure les composants d'une mise en page pour les canaux spécifiques. Par exemple, peut avoir une mise en page avec des champs de texte distincte pour un long message d'accueil et un message d'accueil court. En plaçant les champs de page à l'intérieur des volets canaux des appareils, vous pouvez afficher le message d'accueil court uniquement aux téléphones et le message d'accueil long uniquement sur le bureau. Le contenu d'un panneau de canal d'appareil n'est pas affiché dans les canaux non inclus en fait, le contenu n'est pas restitué tout, ce qui empêche les octets de passer des transmissions. Pour cette raison, l’utilisation des panneaux de canal d’appareil est un meilleur moyen d’afficher du contenu sur des canaux spécifiques que d’utiliser une classe CSS avec, Display:None car les panneaux de canal d’appareil aident à réduire le poids de la page pour un canal spécifique.
Vous pouvez également utiliser des volets canaux des appareils sur des pages maîtres. Par exemple, si vous avez une page maître qui peut prendre en charge deux différents appareils (ou les deux différents navigateurs) avec seules des modifications mineures, vous pouvez utiliser volets canaux des appareils pour stocker le contenu sur la page maître qui est spécifique à une de ces périphériques.
Il existe deux limitations à l'utilisation d'un panneau de configuration de canal de périphérique :
- Modèles d'affichage Étant donné que les modèles d'affichage sont rendus sur le côté client et volets canaux des appareils s'exécutent sur le côté serveur, vous ne pouvez pas utiliser un panneau de canal d'appareil au sein d'un modèle d'affichage. Au lieu de cela, vous devez utiliser deux composants WebPart recherche de contenu différents dans les panneaux canaux d’appareil de votre mise en page, ou utiliser la variable JavaScript pour déclencher le comportement souhaité dans le modèle d’affichage lui-même.
- Zones de composants WebPart Vous ne pouvez pas insérer une zone de composant WebPart à l’intérieur d’un panneau canal d’appareil. Si vous souhaitez autoriser les auteurs à ajouter des composants WebPart à une page, ou si vous n’accordez aucune importance au poids de la page pour les appareils mobiles, vous pouvez ajouter un champ de page Éditeur de texte enrichi au volet Canaux des appareils, puis inviter les auteurs à ajouter des composants WebPart dans ce champ. Vous pouvez ajouter des composants WebPart directement dans le volet Canaux des appareils (sans zone de composants WebPart).
Insertion d'un extrait de code de canal de périphérique du Panneau de configuration
Comme tous les extraits de code, vous ajoutez un extrait de code de canal de périphérique du Panneau de configuration à partir de la galerie d'extraits de code. Pour accéder à la galerie d'extraits de code, vous devez d'abord sélectionner une page maître ou la mise en page à modifier.
Pour insérer un extrait de canal de périphérique du Panneau de configuration
Accédez à votre site de publication.
Dans le coin supérieur droit de la page, sélectionnez l'icône d'engrenage de paramètres, puis choisissez Gestionnaire de conception.
Dans le Gestionnaire de conception, dans le volet de navigation de gauche, choisissez Modifier les pages maîtres ou Modifier des mises en page, en fonction du type de fichier que vous modifiez.
Sélectionnez le nom de la page maître ou la mise en page que vous souhaitez ajouter l'extrait de code.
Pour ouvrir la galerie d'extraits de code, choisissez Extraits de code dans le coin supérieur droit de l'aperçu côté serveur.
Sur le ruban, sous l'onglet Création, cliquez sur Panneau de configuration de canal d'appareil.
Sur le côté droit de la galerie d'extraits de code, sous À propos de ce composant, sélectionnez ou cliquez sur les en-têtes de section pour développer ou réduire les groupes de propriétés, puis configurez les paramètres personnalisés souhaités.
La section intitulée Important contient les propriétés qui sont essentiels pour le fonctionne de cet extrait de code particulier. Pour un panneau de configuration de canal de périphérique, la propriété IncludedChannels est la plus importante. Pour cette propriété, entrez l'alias de chaque canal d'appareil que vous souhaitez afficher le contenu contenu dans ce panneau de configuration de canal de périphérique. Si vous entrez plusieurs alias, séparez-les par une virgule.
Remarque
Si vous modifiez l’alias d’un canal dans la liste Canaux d’appareil, vous devez rechercher et mettre à jour manuellement cet alias partout où il apparaît dans vos fichiers de conception, notamment mettre à jour la propriété IncludedChannels pour chaque panneau canal d’appareil qui utilise cet alias.
Une fois que vous configurez les autres propriétés, cliquez sur mise à jour. Cela met à jour l'extrait de code HTML sur le côté gauche de la page, afin que les balises reflètent vos paramètres personnalisés. Vous pouvez toujours choisir Réinitialiser pour restaurer toutes les propriétés sur leurs paramètres par défaut.
Sur le côté gauche de la galerie d'extraits de code, sous Extrait de code HTML, choisissez Copier dans le Presse-papiers.
Dans votre éditeur HTML, ouvrez le lecteur réseau mappé sur votre ordinateur, puis le fichier HTML de la page maître ou la mise en page à laquelle vous ajoutez l’extrait de code.
Pour plus d’informations, voir Guide pratique pour mapper un lecteur réseau à la galerie de pages maîtres SharePoint.
Dans le fichier HTML, collez l’extrait de code à l’endroit où vous souhaitez que le balisage s’affiche.
Si vous ajoutez l'extrait de code pour une mise en page, assurez-vous que Coller l'extrait de code à l'intérieur de PlaceHolderMain.
Remplacez la balise
<div>avecclass="DefaultContentBlock"par votre propre contenu spécifique.En règle générale, si vous ajoutez un panneau de configuration de canal de périphérique à une mise en page, vous devez remplacer le
<div>en copiant des champs de page à l'intérieur du Panneau de configuration.Enregistrez la page, puis actualisez l'aperçu côté serveur dans le Gestionnaire de conception pour vous assurer que le panneau de configuration de canal périphérique s'affiche comme prévu.
Pour afficher un aperçu du Panneau de configuration sur différents canaux, vous pouvez ajouter des paramètres de chaîne de requête à l'URL. Par exemple, vous pouvez ajouter la variable
"DeviceChannel=YourChannelAlias"de chaîne de requête à l’URL de n’importe quelle page de l’aperçu côté serveur.
Présentation du balisage d'extrait de code
Les deux composants principaux d'un extrait de canal de périphérique du Panneau de configuration sont la propriété IncludedChannels et la <div> où class="DefaultContentBlock". Par défaut, la propriété IncludedChannels est vide. Dans la section Important de la grille des propriétés, vous devez entrer l'alias, séparés par des virgules, des canaux de périphériques que vous souhaitez afficher le contenu dans ce panneau de configuration.
Remarque
[!REMARQUE] Si vous modifiez un alias dans la liste des canaux, vous devez également modifier ce alias partout où il apparaît dans votre balisage, y compris dans la propriété IncludedChannels pour chaque panneau de configuration de canal de périphérique qui utilise cet alias.
Le <div> où les class="DefaultContentBlock" doivent être remplacées par quelque spécifiques de contenu vous souhaitez afficher pour les canaux inclus. Un panneau de canal d'appareil peut inclure quasiment n'importe quel type de contenu, y compris un lien vers un fichier CSS ou un fichier .js. Le scénario le plus courant pour l'utilisation de volets canaux des appareils consiste à inclure des champs de page spécifique à partir d'une mise en page pour les canaux spécifiques. Dans ce cas, vous copiez le code de champ page où le <div> se trouve à l'intérieur du Panneau de configuration de canal périphérique.
<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>