Trucs et astuces pour devenir un héros SharePoint

1 869 vues

Publié le

Trucs et astuces pour devenir un héros SharePoint

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 869
Sur SlideShare
0
Issues des intégrations
0
Intégrations
209
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Trucs et astuces pour devenir un héros SharePoint

  1. 1. #1 – yOS-Day à Genève le 13 avril 2015 www.yos-tour.com contact@yos-tour.com @YosTour yOS-Tour - yOS-Day ©2015. All rights reserved.
  2. 2. #1 – yOS-Day à Genève le 13 avril 2015 yOS-Tour - yOS-Day ©2015. All rights reserved. Session : Trucs et Astuces pour devenir un héros SharePoint Conférencier : Serge Tremblay @SergePoint stremblay@victrix.ca http://sergepointfr.wordpress.com
  3. 3. yOS-Tour - yOS-Day ©2015. All rights reserved. Spécialiste SharePoint depuis 2001 Formateur SharePoint depuis 2001 Certifications Microsoft 2007-2010 et 2013 Microsoft Certified Trainer depuis 2000 Groupe d’Usagers SharePoint Québec Co-auteur Microsoft SharePoint Server 2013 Qui est Serge Tremblay? http://www.lavoisier.fr/livre/notice.asp?ouvrage=2721040 @SergePoint À propos de Serge Tremblay Serge Tremblay
  4. 4. yOS-Tour - yOS-Day ©2015. All rights reserved. Agenda
  5. 5. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  6. 6. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages •Insérer des images •Insérer des hyperliens •Liens vers un sondage et retour vers la page d’accueil •Intégration de cartes/maps •Intégration de vidéos
  7. 7. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  8. 8. yOS-Tour - yOS-Day ©2015. All rights reserved. Insérer une image •Possibilité d’insérer des images à partir de différentes sources •L’image est copiée dans SharePoint si vous utilisez « À partir de l’ordinateur »
  9. 9. yOS-Tour - yOS-Day ©2015. All rights reserved. Propriétés d’affichage de l’image •Plusieurs options sont disponibles pour gérer l’affichage de l’image
  10. 10. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  11. 11. yOS-Tour - yOS-Day ©2015. All rights reserved. Insérer un hyperlien • Insérer un lien vers un document existant • Insérer un lien vers un site web externe et ouvrir dans un autre onglet • Insérer un lien sur une image • Liste de liens vs liens promus • Insérer un lien vers un formulaire de commentaire et retourner à la page d’accueil après la saisie
  12. 12. yOS-Tour - yOS-Day ©2015. All rights reserved. Colonne de site contenu HTML Permet (entre autre) de publier des liens qui s’ouvrent dans de nouveaux onglets
  13. 13. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  14. 14. yOS-Tour - yOS-Day ©2015. All rights reserved. Lien vers un formulaire et retour à la page d’accueil •Les listes SharePoint (incluant les enquêtes) utilisent trois différentes pages de formulaires • Newform.aspx • Dispform.aspx • Editform.aspx • La page Newform.aspx est utilisée lors de création de nouvel item. Vous ne voyez pas l’url car le formulaire s’ouvre dans une boîte de dialogue.
  15. 15. yOS-Tour - yOS-Day ©2015. All rights reserved. Newform.aspx • Vous pouvez ajouter un lien vers le formulaire sur la page d’accueil de votre site en utilisant le chemin url suivant: http://votresite/lists/votreliste/newform.aspx • Le formulaire va s’ouvrir lorsque l’utilisateur cliquera sur le lien • Lorsqu’il aura terminé il sera redirigé vers la page d’affichage par défaut de la liste.
  16. 16. yOS-Tour - yOS-Day ©2015. All rights reserved. Paramètres des pages ASPX • Il est possible de passer des paramètres dans le chemin url des pages ASPX. • Dans notre cas nous pouvons utiliser le paramètre « source » pour changer la page de retour après avoir complété le formulaire. • Au lieu d’utiliser le chemin url suivant pour créer le lien dans votre page d’accueil : • http://votresite/lists/votreliste/newform.aspx, • Vous pouvez utiliser : • http://votresite/lists/votreliste/newform.aspx?source=http://votresite • Le formulaire va s’ouvrir lorsque l’utilisateur cliquera sur le lien. • Lorsqu’il aura terminé il sera redirigé vers la page d’accueil du site au lieu de la page d’affichage par défaut de la liste.
  17. 17. yOS-Tour - yOS-Day ©2015. All rights reserved. Démo
  18. 18. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  19. 19. yOS-Tour - yOS-Day ©2015. All rights reserved. Rechercher le contenu •Allez sur youtube.com et recherchez « Alloprof la relation de Pythagore »
  20. 20. yOS-Tour - yOS-Day ©2015. All rights reserved. Partager •Dans la page de résultat sous le vidéo cliquez sur « Partager » , puis « intégrer »
  21. 21. yOS-Tour - yOS-Day ©2015. All rights reserved. Intégrer •Cliquez sur Intégrer, sélectionnez la taille désirée et le mode, puis copiez le code
  22. 22. yOS-Tour - yOS-Day ©2015. All rights reserved. Publier •Créez un nouvelle page ou modifiez une page existante •Positionnez votre souris à l’endroit désirée •Insérez le code incorporé
  23. 23. yOS-Tour - yOS-Day ©2015. All rights reserved. Voilà! • Votre vidéo est publié!
  24. 24. yOS-Tour - yOS-Day ©2015. All rights reserved. Intégrer un vidéo de Youtube Étapes rapide •Recherchez le vidéo sur Youtube.com •Dans la page de résultats cliquez sur partager •Cliquez sur intégrer •Créez une nouvelle page ou modifiez une page existante •Insérez le code incorporé
  25. 25. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisation de pages
  26. 26. yOS-Tour - yOS-Day ©2015. All rights reserved. Rechercher l’emplacement
  27. 27. yOS-Tour - yOS-Day ©2015. All rights reserved. Trouvez le lien
  28. 28. yOS-Tour - yOS-Day ©2015. All rights reserved. Personnalisez le rendu de la carte
  29. 29. yOS-Tour - yOS-Day ©2015. All rights reserved. Copiez le lien
  30. 30. yOS-Tour - yOS-Day ©2015. All rights reserved. Publiez la carte •Créez une nouvelle page ou modifiez une page existante •Insérez le code incorporé
  31. 31. yOS-Tour - yOS-Day ©2015. All rights reserved. Voilà votre carte est publiée!
  32. 32. yOS-Tour - yOS-Day ©2015. All rights reserved. Intégration de cartes dans une page Étapes rapides •Recherche Google •Copiez le lien pour intégrer dans une page web •Créez un page ou modifier une page existante •Insérez du code incorporé •Enregistrez la page
  33. 33. yOS-Tour - yOS-Day ©2015. All rights reserved. Utilisation et création de Webparts
  34. 34. yOS-Tour - yOS-Day ©2015. All rights reserved. •C’est quoi un WebPart •Ajouter et personnaliser les composant WebPart: • Visionneuse de page • Éditeur de script •Exporter et publier un composant WebPart personnalisé Les composants WebPart
  35. 35. yOS-Tour - yOS-Day ©2015. All rights reserved. C’est quoi un WebPart •Un composant WebPart est une unité modulaire d'information à but unique qui constitue la base d'une page de composants WebPart.
  36. 36. yOS-Tour - yOS-Day ©2015. All rights reserved. Insérer un composant WebPart
  37. 37. yOS-Tour - yOS-Day ©2015. All rights reserved. Configurer un WebPart
  38. 38. yOS-Tour - yOS-Day ©2015. All rights reserved. Utilisation et création de Webparts Composant WebPart visionneuse de page
  39. 39. yOS-Tour - yOS-Day ©2015. All rights reserved. Composant WebPart Visionneuse de pages • Permet d’afficher le contenu • D’une page • D’un fichier • D’un dossier • Attention Office 365 n’aime pas les pages HTML
  40. 40. yOS-Tour - yOS-Day ©2015. All rights reserved. Démo composant WebPart Visionneuse de pages
  41. 41. yOS-Tour - yOS-Day ©2015. All rights reserved. Propriétés du composant WebPart Visionneuse de pages
  42. 42. yOS-Tour - yOS-Day ©2015. All rights reserved. Démo •Utilisation de Expression Web 4 pour créer du contenu HTML
  43. 43. yOS-Tour - yOS-Day ©2015. All rights reserved. Utilisation et création de Webparts Composant WebPart Éditeur de script
  44. 44. yOS-Tour - yOS-Day ©2015. All rights reserved. Composant WebPart éditeur de script •Il arrive parfois que le composant WebPart éditeur de contenu efface une partie du script lors de l’enregistrement. •Pour cette raison il est plus prudent d’utiliser le composant WebPart éditeur de script pour ajouter du code.
  45. 45. yOS-Tour - yOS-Day ©2015. All rights reserved. Insérer un composant WebPart éditeur de script
  46. 46. yOS-Tour - yOS-Day ©2015. All rights reserved. Paramètres du composant WebPart éditeur de script
  47. 47. yOS-Tour - yOS-Day ©2015. All rights reserved. Cacher la barre de lancement rapide • Le code suivant permet de cacher la barre de lancement rapide <style type="text/css"> #sideNavBox { display: none; } #contentBox { margin-left: 0px; } .ms-webpartPage-root { border-spacing: 5px; } .ms-core-tableNoSpace.ms-webpartPage-root > tbody > tr > td > table { padding: 5px !important; border-collapse: collapse; } </style> http://www.brainlitter.com/2013/03/22/hiding-the-quick-launch-in-sharepoint-2013-on-a-single-page/
  48. 48. yOS-Tour - yOS-Day ©2015. All rights reserved. Exporter et publier un WebPart personnalisé •Il est possible d’exporter un WebPart et de l’enregistrer sur votre bureau
  49. 49. yOS-Tour - yOS-Day ©2015. All rights reserved. Galerie de composants Webpart •Il existe une galerie de composants WebPart au niveau de la collection de site •Cette galerie contient les composants WebPart publiés •Il est possible d’en ajouter
  50. 50. yOS-Tour - yOS-Day ©2015. All rights reserved. Publier un composant WebPart personnalisé
  51. 51. yOS-Tour - yOS-Day ©2015. All rights reserved. Utiliser le composant WebPart personnalisé
  52. 52. yOS-Tour - yOS-Day ©2015. All rights reserved. Utilisation et création de Webparts Insertion d’image avec zone réactive
  53. 53. yOS-Tour - yOS-Day ©2015. All rights reserved. Insertion d’image avec zone réactive •Une zone réactive est un emplacement/hyperlien cliquable pouvant être définie sur une image •Nous allons utiliser Expression Web 4 pour générer le code et ensuite utiliser ce code dans un composant WebPart Éditeur de script
  54. 54. yOS-Tour - yOS-Day ©2015. All rights reserved. Créer une nouvelle page HTML dans Expression Web 4
  55. 55. yOS-Tour - yOS-Day ©2015. All rights reserved. Insérer une image à partir d’un fichier
  56. 56. yOS-Tour - yOS-Day ©2015. All rights reserved. Afficher la barre d’outil d’image
  57. 57. yOS-Tour - yOS-Day ©2015. All rights reserved. Ajouter des zones réactives à votre image •Cliquez sur votre image •Les outils de la barre d’outils d’image seront disponibles
  58. 58. yOS-Tour - yOS-Day ©2015. All rights reserved. Ajouter une zone réactive à l’image •Sélectionnez la zone réactive rectangulaire et tracez un rectangle à l’endroit désiré dans l’image
  59. 59. yOS-Tour - yOS-Day ©2015. All rights reserved. Copier le code •Allez en mode split et copiez la partie du code « map et img »
  60. 60. yOS-Tour - yOS-Day ©2015. All rights reserved. Remplacer le lien de l’image •Comme vous avez utilisé une image locale, vous devrez remplacer le chemin d’accès de l’image pour le lien vers la copie de l’image qui est dans votre site •Remplacez • src="file:///C:/Users/stremblay/Pictures/labs/map.png" •Par • src="https://sergepoint5.sharepoint.com/sites/yostour/i mg/maps.png"
  61. 61. yOS-Tour - yOS-Day ©2015. All rights reserved. Publication de l’image •Ajoutez un composant WebPart Éditeur de Script •Collez le code extrait •Enregistrez vos changements
  62. 62. yOS-Tour - yOS-Day ©2015. All rights reserved. #1 – yOS-Day à Genève le 13 avril 2015 Merci à nos sponsors OR : Argent :

×