SharePoint Saturday Genève 2016

SharePoint Saturday Genève – 3 Décembre 2016 Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore! Franck Cornu

Architecte SharePoint Blog: http://thecollaborationcorner.com/ Franck Cornu Architecte SharePoint Blog: http://thecollaborationcorner.com/ Réalisations: Réussir son analyse fonctionnelle SharePoint: Guide méthodologique (170 pages) Étude de cas d’intranet en SharePoint 2013 (323 pages) Contributeur Pattern & Practices Twitter: @FranckCornu Montréal, QC SharePoint Saturday Genève 2016 SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Sharing is caring… PnP Starter Intranet for Office 365/SharePoint Online Solution disponible gratuitement sur le repository PnP https://github.com/SharePoint/PnP/tree/ma ster/Solutions/Business.O365StarterIntranet Documentation complète (technique + utilisateur) http://thecollaborationcorner.com/category /office-365-pnp-starter-intranet SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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 SharePoint Saturday Genève 2016

Aperçu fonctionnel de la solution SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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é SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Frameworks et outils SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Frameworks et outils utilisés (Résumé) Code/Packaging UI Multilinguisme Divers Déploiement SharePoint Saturday Genève 2016

Design et identité graphique SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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) SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Navigation SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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) SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Multilinguisme SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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 SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Recherche SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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) SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 Conclusion SharePoint Saturday Genève 2016

SharePoint Saturday Genève 2016 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)… SharePoint Saturday Genève 2016

Evaluez les sessions grâce à l’application SPS Genève ! Cherchez « SPSGenève » sur le store Et gagnez des licences DL

SharePoint Saturday Genève 2016 Sponsorship Level: Raffle SharePoint Saturday Genève 2016