Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!

1. SharePoint Saturday Québec#SPSQuebec
1er octobre 2016
SharePoint Saturday
Québec
Votre intranet "Client-Side" en SharePoint
Online/O365 avec PnP, Knockout JS,
TypeScript, Webpack et bien plus encore!
Franck Cornu
Architecte SharePoint

2. SharePoint Saturday Québec#SPSQuebec
http://thecollaborationcorner.com/
Réussir son analyse fonctionnelle SharePoint: Guide
méthodologique
Étude de cas d’intranet en SharePoint 2013
@FranckCornu

3. SharePoint Saturday Québec#SPSQuebec
Plan de la session
• Aperçu fonctionnel de la solution/contexte
• Frameworks, librairies et outils utilisés
• Design et de l’identité graphique
• Navigation
• Multilinguisme
• Recherche
• Surprise!

4. SharePoint Saturday Québec#SPSQuebec
Aperçu fonctionnel
• Expérience de création/visualisation de contenu (pages et
nouvelles) desktop et mobile
• Traduction de pages
• Ajout d’éléments dans le carrousel
• Gestion des menus de navigation et du cache

6. SharePoint Saturday Québec#SPSQuebec
Design et identité visuelle (résumé)
• Création d’une master page personnalisée + pages layouts
• Bootstrap est utilisé en mode « isolé » pour la gestion du
design responsive dans SharePoint
• Les styles sont gérés en utilisant SASS et Webpack
• Architecture modulaire par composants (Knockout JS)
• Utilisation des display templates par défaut de SharePoint
ainsi que des rendus d’images.
• Création d’un thème spécifique (spcolor)

8. SharePoint Saturday Québec#SPSQuebec
• Code/Packaging
• UI
• Multilinguisme
• Divers
• Déploiement

10. SharePoint Saturday Québec#SPSQuebec
Navigation (résumé)
• Utilise la navigation par taxonomie SharePoint via JSOM
• Pas d’API REST, chargement des scripts par SOD
• Utilise le champ « Site Map Position » pour la construction
des menus contextuels.
• Implémente un système de cache pour la gestion des
performances via le localStorage
• Utilise le pattern Pub/Sub pour la communication entre
composant (menu principal vers menu contextuel et fil
d’Ariane)

12. SharePoint Saturday Québec#SPSQuebec
Multilinguisme (Résumé)
• Pas de variantes SharePoint !
• S’appuie sur un seul site SharePoint (MUI ≠ langue du
contenu)
• Utilise la libraire i18next pour la gestion des ressources
• Configuration spéciale de Webpack pour faire
communiquer le contexte SharePoint et celui de
l’application
• Si un seul site, nécessité de modifier les display templates
de SharePoint pour traduire les labels

14. SharePoint Saturday Québec#SPSQuebec
Recherche (Résumé)
• Utilisation des composants et display templates de
recherche par défaut de SharePoint
• Modification du display template du refinement panel
nécessaire pour la prise en charge des valeurs de
taxonomie multilingues
• Utilisation des query rules et de requête raffinées
(paramètre « r ») pour la gestion de archives de contenu
• Utilisation des propriétés de recherche RefinableXXX de
SharePoint

15. SharePoint Saturday Québec#SPSQuebec
Conclusion
• Faire un intranet de publication mobile dans SharePoint Online et
totalement client-side avec SharePoint, c’est possible!
• Future proof: en attendant le prochain canvas de publication (H1
2017), approche compatible avec le SharePoint Framework (donc
non obsolète day 1).
• Possibilité de compléter la solution avec Azure (ex: Application
Insights pour les statistiques).
• En tant que développeur SharePoint, il serait temps de s’intéresser
de près au monde JavaScript…

17. SharePoint Saturday Québec#SPSQuebec
Sharing is caring…
• Solution disponible gratuitement sur
le repository PnP!
https://github.com/OfficeDev/PnP/tree/master
/Solutions/Business.O365StarterIntranet
• Documentation complète
http://thecollaborationcorner.com/category/of
fice-365-pnp-starter-intranet

18. SharePoint Saturday Québec#SPSQuebec
ArgentMerci à nos commanditaires !

19. SharePoint Saturday Québec#SPSQuebec
Ce soir à 18h
2325 Rue de l'Université