Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
SharePoint Saturday Québec#SPSQuebec
1er octobre 2016
SharePoint Saturday
Québec
Votre intranet "Client-Side" en SharePoin...
SharePoint Saturday Québec#SPSQuebec
http://thecollaborationcorner.com/
Réussir son analyse fonctionnelle SharePoint: Guid...
SharePoint Saturday Québec#SPSQuebec
Plan de la session
• Aperçu fonctionnel de la solution/contexte
• Frameworks, librair...
SharePoint Saturday Québec#SPSQuebec
Aperçu fonctionnel
• Expérience de création/visualisation de contenu (pages et
nouvel...
SharePoint Saturday Québec#SPSQuebec
Design et identité visuelle (résumé)
• Création d’une master page personnalisée + pag...
SharePoint Saturday Québec#SPSQuebec
• Code/Packaging
• UI
• Multilinguisme
• Divers
• Déploiement
SharePoint Saturday Québec#SPSQuebec
Navigation (résumé)
• Utilise la navigation par taxonomie SharePoint via JSOM
• Pas d...
SharePoint Saturday Québec#SPSQuebec
Multilinguisme (Résumé)
• Pas de variantes SharePoint !
• S’appuie sur un seul site S...
SharePoint Saturday Québec#SPSQuebec
Recherche (Résumé)
• Utilisation des composants et display templates de
recherche par...
SharePoint Saturday Québec#SPSQuebec
Conclusion
• Faire un intranet de publication mobile dans SharePoint Online et
totale...
SharePoint Saturday Québec#SPSQuebec
Sharing is caring…
• Solution disponible gratuitement sur
le repository PnP!
https://...
SharePoint Saturday Québec#SPSQuebec
ArgentMerci à nos commanditaires !
SharePoint Saturday Québec#SPSQuebec
Ce soir à 18h
2325 Rue de l'Université
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
SPS Québec - Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plu...
Nächste SlideShare
Wird geladen in …5
×

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

205 Aufrufe

Veröffentlicht am

Votre intranet "Client-Side" en SharePoint Online/O365 avec PnP, Knockout JS, TypeScript, Webpack et bien plus encore!

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

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

  1. 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. 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. 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. 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
  5. 5. 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)
  6. 6. SharePoint Saturday Québec#SPSQuebec • Code/Packaging • UI • Multilinguisme • Divers • Déploiement
  7. 7. 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)
  8. 8. 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
  9. 9. 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
  10. 10. 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…
  11. 11. 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
  12. 12. SharePoint Saturday Québec#SPSQuebec ArgentMerci à nos commanditaires !
  13. 13. SharePoint Saturday Québec#SPSQuebec Ce soir à 18h 2325 Rue de l'Université

×