Accueil > SharePoint 2013 > SharePoint 2013 : Design Manager – Utiliser les Device Channels

SharePoint 2013 : Design Manager – Utiliser les Device Channels


warning

Cet article est désormais disponible sur le Wiki TechNet.

Accèder à l’article sur le Wiki

Accèder au guide des articles en français du Wiki

Cet article fait partie d’une série concernant le Design Manager de SharePoint 2013 :

Présentation

Les « Device Channels » sont une nouveauté de SharePoint 2013 qui permettent de définir une masterpage spécifique (et donc une mise en page ou des portions de page différentes) pour différent type de « user agents ».

Vous pouvez donc définir une masterpage spécifique pour :

  • Des devices : Iphone, Ipad, BlackBerry,
  • Des navigateurs : IE, Chrome, …

A l’affichage d’une page, SharePoint parcoure les channels, et s’il détecte le user-agent dans sa liste , il affiche la masterpage adéquate.

Il faut juste faire attention à l’ordre des « Device Channels », car SharePoint arrête son parcours dès qu’une règle d’un channel matche un user agent.

Vous pouvez par ailleurs consulter la liste des navigateurs supportés par SharePoint 2013 sur cette page.

Dans la seconde partie de l’article je présenterai les « Device Channel » Panels.

Prérequis

Le site sur lequel vous souhaitez utiliser les « Device Channels » doit avoir d’activé :

  • La feature de collection de site de publication

  • La feature de site de publication

  • La feature « PublishingMobile »

Utilisation

Accédez au « Design Manager », et cliquez sur « 2. Manage Device Channels ».

Cette page vous permet :

  • De créer un nouveau « Device Channel »,
  • De modifier un « Device Channel » existant ou de les ordonner.

Un channel est créé et activé par défaut; il sera utilisé par votre device si celui-ci ne matche aucune règle d’un autre channel.

Voici les étapes pour créer et channel et associer une masterpage spécifique :

1. Cliquez sur « Create a channel » dans la page ci-dessus, saisissez un nom, un alias et une description

2. Définissez une règle (ici pour Chrome) et cliquez sur « Active » pour … Activer le channel.

Si vous ne connaissez pas le user agent utilisé, lancez l’URL suivante dans votre navigateur.

3. Les 2 channels sont bien présents.

4. Il reste à associer ce nouveau channel à une masterpage que vous aurez spécialement créée – Ici je crée une masterpage nommée « Chrome », qui a pour seule spécificité d’afficher le logo de Chrome à la place du logo SharePoint.

Cliquez sur « Site Settings », puis sur « Master Page ».

5. Associez une masterpage à votre Device Channel (ici Chrome).

6. Il ne reste plus qu’à vérifier tout ça :

  • Sous IE :

  • Sous Chrome :

Well done !

Les « Device Channel » Panel

SharePoint 2013 offre également la possibilité d’utiliser des « Device Channel » Panels.

Vous trouvez ce Panel dans les snippets du Design Manager, quand vous construisez une masterpage.

Ces Panels fonctionnent (comme leur nom l’indique) avec les Device Channels, et s’utilisent comme des audiences, à savoir que le contenu contenu dans le Panel sera masqué sauf pour les user agents correspondant au(x) Device Channel(s) spécifié(s).

1. Pour être sûr que ces Panels sont indépendants des masterpages, je paramètre le Device Channel « Chrome » créé précedemment pour qu’il utilise la masterpage du Device Channel par défaut, soit ici la masterpage « seattle ».

2. Je crée ensuite un nouveau page layout pour l’occasion, en dupliquant un page layout de webparts.

3. Dans le Design Manager, je me rends dans les snippets, je choisis « Device Channel Panel ».

Si vous n’avez pas consulté cet article sur la création d’une masterpage avec le Design Manager, le principe d’utilisation des snippets est de récupérer le code qu’ils génèrent, et de l’insérer dans votre masterpage ou autre; ici ce sera donc dans un page layout.

4. Avant de récupérer le code HTML généré, je saisis le nom du ou des Device Channel(s) pour le(s)quel(s) le contenu devra s’afficher (ici Chrome), et je clique sur Update pour mettre à jour le code.

5. Je colle le code suivant dans mon page layout et le modifie pour retirer le « div » jaune et le remplacer par la partie en gras ci-dessous (un texte et une image).

On retrouve aussi le paramètre « IncludedChannels ».

<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= »CHROME »>–>
<!–PS: Start of READ-ONLY PREVIEW (do not modify)–><!–PE: End of READ-ONLY PREVIEW–>
Ce contenu n’est affiché que si le user-agent de Chrome est détecté.
<img src= »chromelogo.jpg » />
<!–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>

6. Je crée ensuite une page basée sur ce layout.

Une fois sur votre page en mode modification, cliquez sur « Page » dans le ruban, puis sur « Preview ».

Vous allez alors pouvoir facilement tester l’affichage de la page sur les différents channels – On voit ici apparaître « Chrome » et « Default ».

Sur clic sur 1 de ces 2 choix, la page s’ouvre en visualisation dans 1 nouvel onglet.

7. La page affichée pour le Device Channel « Default » – La page est vide.

8. La page affichée pour le Device Channel « Chrome » – Le texte et l’image sont bien affichées.

Et voilà ! (à prononcer avec l’accent américain pour plus d’effet).

9. Au niveau des URLs de ces pages de viualisation, on constate que le Device Channel est passé en paramètre, dans mon cas :

Conclusion

Cette article conclut ma série d’articles dédiée au Design Manager, qui fournit des outils intéressants pour le Design (et le transfert) de vos customisations SharePoint.

  1. mai 7, 2015 à 12:52

    Très bien, Très clair
    comme d’hab’

  1. mai 8, 2013 à 4:27

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :