Votre intranet "Client-Side"

Votre intranet "Client-Side" en SharePoint
Online/O365 avec PnP, Knockout JS,
TypeScript, Webpack et bien plus encore!
SharePoint Saturday
Québec
Franck Cornu
Architecte SharePoint
1er octobre 2016
#SPSQuebec
SharePoint Saturday Québec
http://thecollaborationcorner.com/
Réussir son analyse fonctionnelle SharePoint: Guide
méthodologique
Étude de cas d’intranet en SharePoint 2013
@FranckCornu
#SPSQuebec
SharePoint Saturday Québec
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!
•
#SPSQuebec
SharePoint Saturday Québec
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
•
#SPSQuebec
SharePoint Saturday Québec
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)
•
#SPSQuebec
SharePoint Saturday Québec
•
Code/Packaging
•
UI
•
Multilinguisme
•
Divers
•
Déploiement
#SPSQuebec
SharePoint Saturday Québec
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)
#SPSQuebec
SharePoint Saturday Québec
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
•
#SPSQuebec
SharePoint Saturday Québec
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
#SPSQuebec
SharePoint Saturday Québec
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…
#SPSQuebec
SharePoint Saturday Québec
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
#SPSQuebec
SharePoint Saturday Québec
Argent
Merci à nos commanditaires !
#SPSQuebec
SharePoint Saturday Québec
Ce soir à 18h
2325 Rue de l'Université
#SPSQuebec
SharePoint Saturday Québec