SlideShare une entreprise Scribd logo
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
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
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
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
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)
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
SharePoint Saturday Québec#SPSQuebec
• Code/Packaging
• UI
• Multilinguisme
• Divers
• Déploiement
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
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)
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
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
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
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…
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!
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
SharePoint Saturday Québec#SPSQuebec
ArgentMerci à nos commanditaires !
SharePoint Saturday Québec#SPSQuebec
Ce soir à 18h
2325 Rue de l'Université

Contenu connexe

En vedette

Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013
Conseils Atelya
 
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintexinext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
Alexandre David
 
Presentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 FarmPresentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 Farm
Youssef El Idrissi
 
Build Killer Visuals with SharePoint 2013 Search & Display Templates
Build Killer Visuals with SharePoint 2013 Search & Display TemplatesBuild Killer Visuals with SharePoint 2013 Search & Display Templates
Build Killer Visuals with SharePoint 2013 Search & Display Templates
Benjamin Niaulin
 
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a rodaTDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
tdc-globalcode
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptTransform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScript
John Calvert
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with Bootstrap
Thomas Daly
 
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink TemplatesSharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
Muawiyah Shannak
 
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
Nicolas Georgeault
 
Api presentation
Api presentationApi presentation
Api presentation
Tiago Cardoso
 
Personnaliser un annuaire SharePoint 2013 sur office365
Personnaliser un annuaire SharePoint 2013 sur office365 Personnaliser un annuaire SharePoint 2013 sur office365
Personnaliser un annuaire SharePoint 2013 sur office365
Sonam TCHEUTSEUN
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
Microsoft Décideurs IT
 
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
Microsoft Décideurs IT
 
Personnaliser vos listes avec JSLink
Personnaliser vos listes avec JSLinkPersonnaliser vos listes avec JSLink
Personnaliser vos listes avec JSLink
Soumaya Toumi
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
ambin_fr
 
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site PublishingIntranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Franck Cornu
 
Innover avec SharePoint 2013
Innover avec SharePoint 2013Innover avec SharePoint 2013
Innover avec SharePoint 2013
GSoft
 
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentesDevenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
GSoft
 
Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016
Idean France
 

En vedette (20)

Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013
 
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintexinext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
 
Presentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 FarmPresentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 Farm
 
Build Killer Visuals with SharePoint 2013 Search & Display Templates
Build Killer Visuals with SharePoint 2013 Search & Display TemplatesBuild Killer Visuals with SharePoint 2013 Search & Display Templates
Build Killer Visuals with SharePoint 2013 Search & Display Templates
 
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a rodaTDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptTransform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScript
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with Bootstrap
 
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink TemplatesSharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
 
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
SharePoint Saturday Montreal - 2016 - SharePoint 2016 et les nouveaux scenari...
 
Api presentation
Api presentationApi presentation
Api presentation
 
Personnaliser un annuaire SharePoint 2013 sur office365
Personnaliser un annuaire SharePoint 2013 sur office365 Personnaliser un annuaire SharePoint 2013 sur office365
Personnaliser un annuaire SharePoint 2013 sur office365
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
Migration à SharePoint 2013 : onPrem, Online ou hybride, les bonnes pratiques...
 
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
 
Personnaliser vos listes avec JSLink
Personnaliser vos listes avec JSLinkPersonnaliser vos listes avec JSLink
Personnaliser vos listes avec JSLink
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site PublishingIntranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
 
Innover avec SharePoint 2013
Innover avec SharePoint 2013Innover avec SharePoint 2013
Innover avec SharePoint 2013
 
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentesDevenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
 
Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016
 

Similaire à SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!

Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
Franck Cornu
 
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Samuel Lévesque
 
Luc labelle share point saturday mtl 2014
Luc labelle   share point saturday mtl 2014Luc labelle   share point saturday mtl 2014
Luc labelle share point saturday mtl 2014
Luc Labelle
 
SharePoint - Benchmark des solutions de migration
SharePoint - Benchmark des solutions de migrationSharePoint - Benchmark des solutions de migration
SharePoint - Benchmark des solutions de migration
Benoit Jester
 
Microsoft experience 2016 : Retour d'expérience
Microsoft experience 2016 : Retour d'expérienceMicrosoft experience 2016 : Retour d'expérience
Microsoft experience 2016 : Retour d'expérience
Nicolas Gordat
 
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
Franck Cornu
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Samuel Lévesque
 
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
Microsoft Décideurs IT
 
aOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint FrameworkaOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint Framework
Jean NETRY-VALERE
 
6 Session Aerow - New experience and SharePoint framework
6   Session Aerow - New experience and SharePoint framework6   Session Aerow - New experience and SharePoint framework
6 Session Aerow - New experience and SharePoint framework
aOS Community
 
7 Session Aerow - New experience and SharePoint Framework
7   Session Aerow - New experience and SharePoint Framework7   Session Aerow - New experience and SharePoint Framework
7 Session Aerow - New experience and SharePoint Framework
aOS Community
 
aOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint FrameworkaOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint Framework
Jean NETRY-VALERE
 
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
aOS Community
 
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
Franck Cornu
 
sharepoint 2013 - applications composite - design manager - vue d’ensemble
sharepoint 2013  - applications composite - design manager - vue d’ensemblesharepoint 2013  - applications composite - design manager - vue d’ensemble
sharepoint 2013 - applications composite - design manager - vue d’ensemble
Oussama SAISSI HASSANI
 
GUSP Montreal - SharePoint 2019 et le développement
GUSP Montreal - SharePoint 2019 et le développementGUSP Montreal - SharePoint 2019 et le développement
GUSP Montreal - SharePoint 2019 et le développement
Vincent Biret
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Samuel Lévesque
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
slybud
 
aOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
aOS luxembourg-2018 - Adopter la Modern Experience de SharePointaOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
aOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
Frank POIREAU
 

Similaire à SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore! (20)

Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
Mettre en place un intranet ou un site web public en SharePoint 2013 autour d...
 
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
 
Luc labelle share point saturday mtl 2014
Luc labelle   share point saturday mtl 2014Luc labelle   share point saturday mtl 2014
Luc labelle share point saturday mtl 2014
 
SharePoint - Benchmark des solutions de migration
SharePoint - Benchmark des solutions de migrationSharePoint - Benchmark des solutions de migration
SharePoint - Benchmark des solutions de migration
 
Microsoft experience 2016 : Retour d'expérience
Microsoft experience 2016 : Retour d'expérienceMicrosoft experience 2016 : Retour d'expérience
Microsoft experience 2016 : Retour d'expérience
 
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
Boostez votre recherche SharePoint grâce aux Microsoft Cognitive Services!
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
 
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
Quoi de neuf en Web Content Management dans SharePoint 2013 pour vos sites In...
 
aOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint FrameworkaOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint Framework
 
6 Session Aerow - New experience and SharePoint framework
6   Session Aerow - New experience and SharePoint framework6   Session Aerow - New experience and SharePoint framework
6 Session Aerow - New experience and SharePoint framework
 
7 Session Aerow - New experience and SharePoint Framework
7   Session Aerow - New experience and SharePoint Framework7   Session Aerow - New experience and SharePoint Framework
7 Session Aerow - New experience and SharePoint Framework
 
aOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint FrameworkaOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint Framework
 
Introduction au développement en SharePoint
Introduction au développement en SharePointIntroduction au développement en SharePoint
Introduction au développement en SharePoint
 
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
2019-06-04 aOS Strasbourg - Teams-SP-Dyn 3 - Adopter la modern experience - F...
 
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
Evolution de l’Intranet d’entreprise avec Office 365 : quelles approches ?
 
sharepoint 2013 - applications composite - design manager - vue d’ensemble
sharepoint 2013  - applications composite - design manager - vue d’ensemblesharepoint 2013  - applications composite - design manager - vue d’ensemble
sharepoint 2013 - applications composite - design manager - vue d’ensemble
 
GUSP Montreal - SharePoint 2019 et le développement
GUSP Montreal - SharePoint 2019 et le développementGUSP Montreal - SharePoint 2019 et le développement
GUSP Montreal - SharePoint 2019 et le développement
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
 
aOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
aOS luxembourg-2018 - Adopter la Modern Experience de SharePointaOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
aOS luxembourg-2018 - Adopter la Modern Experience de SharePoint
 

Plus de Franck Cornu

Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
Franck Cornu
 
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
Franck Cornu
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
Franck Cornu
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
Franck Cornu
 
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
Franck Cornu
 
Concevoir des applications SharePoint basées sur la recherche
Concevoir des applications SharePoint basées sur la rechercheConcevoir des applications SharePoint basées sur la recherche
Concevoir des applications SharePoint basées sur la recherche
Franck Cornu
 
Réussir son analyse fonctionnelle SharePoint
Réussir son analyse fonctionnelle SharePointRéussir son analyse fonctionnelle SharePoint
Réussir son analyse fonctionnelle SharePoint
Franck Cornu
 
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
Franck Cornu
 

Plus de Franck Cornu (8)

Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au...
 
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
Implémentez votre prochain assistant personnel d'intranet SharePoint grâce au...
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
 
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
Mise en place d'un intranet ou d'un site web en SharePoint 2013 grâce au Cros...
 
Concevoir des applications SharePoint basées sur la recherche
Concevoir des applications SharePoint basées sur la rechercheConcevoir des applications SharePoint basées sur la recherche
Concevoir des applications SharePoint basées sur la recherche
 
Réussir son analyse fonctionnelle SharePoint
Réussir son analyse fonctionnelle SharePointRéussir son analyse fonctionnelle SharePoint
Réussir son analyse fonctionnelle SharePoint
 
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
Automatiser le déploiement d'environnements SharePoint 2010/2013 grâce à Powe...
 

SPS Québec - 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
  • 19. SharePoint Saturday Québec#SPSQuebec Ce soir à 18h 2325 Rue de l'Université