Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack

et bien plus encore!

Franck Cornu

SharePoint Saturday Genève – 3 Décembre 2016

Franck CornuArchitecte SharePoint

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

ue (170 pages)

• Étude de cas d’intranet en SharePoint 2013 (323 pages)• Contributeur Pattern & PracticesTwitter: @FranckCornu

Montréal, QC

Sharing is caring…

• Solution disponible gratuitement sur le repository PnP

https://github.com/SharePoint/PnP/tree/master/Solutions/Business.O365StarterIntranet

• Documentation complète (technique + utilisateur)

http://thecollaborationcorner.com/category/office-365-pnp-starter-

intranet

PnP Starter Intranet for Office 365/SharePoint Online

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• Conclusion

Aperçu fonctionnel de la solution

Aperçu fonctionnel (Résumé)

• Solution d’intranet de publication issue d’un véritable projet• Expérience de création/visualisation de contenu (pages et

nouvelles) desktop et mobile• Gestion des menus de navigation avec mécanisme de cache• Mécanisme de traduction des pages et des menus en anglais et

français• Page d’accueil

• Carrousel de nouvelles• Fil de nouvelles de page d’accueil• Tuiles de liens

• Expérience de recherche par catégorie (intranet, documents, personnes)• Isolée dans une collection de sites 2 sites différents avec la

même solution peuvent coexister sur le même tenant• Déploiement entièrement automatisé

Frameworks et outils

Frameworks et outils utilisés (Résumé)

Code/Packaging

UI

Multilinguisme

Divers

Déploiement

Design et identité graphique

Design et identité graphique (Résumé)

• Création d’une master page et pages layouts personnalisés• 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• Utiliastion d’Office UI Fabric pour les icônes• 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)

Navigation

Navigation (Résumé)

• Utilise la navigation par taxonomie SharePoint via JSOM• Pas d’API REST pour la taxonomie,

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 du navigateur• Utilise le pattern Pub/Sub pour la

communication entre composant sur la page (menu principal vers menu contextuel et fil d’Ariane)• Utilise le groupe de termes de la

collection de sites (isolation)

Multilinguisme

Multilinguisme (Résumé)

• Pas de variantes SharePoint ! Contexte de langue donné par la page elle-même.• S’appuie sur un seul site SharePoint

(MUI ≠ langue du contenu)• Utilise la libraire « i18next » pour la

gestion des ressources en JavaScript• Configuration spéciale de Webpack

pour faire communiquer le contexte SharePoint et celui de l’application• Dans tous les cas, nécessité de traduire

les termes de taxonomie pour le refinement panel• Si un seul site, nécessité de modifier les

display templates de SharePoint pour traduire les labels

Recherche

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• Configuration de la recherche au

niveau de la collection de sites (isolation)

Conclusion

Conclusion

• Faire un intranet de publication mobile dans SharePoint Online et totalement client-side avec SharePoint, c’est possible!• Avec l’arrivée de gros changements UI dans SharePoint

Online, solution davantage orientée On-Premise.• Possibilité de compléter la solution avec Azure (ex:

Application Insights pour les statistiques) ou notification en temps réel…(https://dev.office.com/blogs/building-real-time-news-feed-web-part-with-sharepoint-framework) • En tant que développeur SharePoint, il serait temps de

s’intéresser de près au monde JavaScript (SPFx)…

Evaluez les sessions grâce à l’application SPS Genève !

Et gagnez des licences

Cherchez « SPSGenève » sur le store

Sponsorship Level: Raffle