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 CornuArchitecte SharePoint

SharePoint Saturday Québec#SPSQuebec

Franck CornuArchitecte SharePoint

Blog: http://thecollaborationcorner.com/Réalisations: • Réussir son analyse fonctionnelle SharePoint: Guide m

éthodologique• Étude de cas d’intranet en SharePoint 2013• Contributeur Pattern & PracticesTwitter: @FranckCornu

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!

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

Design et identité graphique

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)

Frameworks et outils

SharePoint Saturday Québec#SPSQuebec

• Code/Packaging

• UI

• Multilinguisme

• Divers

• Déploiement

Navigation

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)

Multilinguisme

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

Recherche

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

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…

Petit cadeau…

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/office-365-pnp-starter-intranet

SharePoint Saturday Québec#SPSQuebec

Plat

ine

Arge

ntMerci à nos commanditaires !

SharePoint Saturday Québec#SPSQuebec

Ce soir à 18h2325 Rue de

l'Université