Plusieurs personnes pensent que pour créer un composant WebPart SharePoint, on doit être un développeur.

Dans cet article vous allez trouver les étapes détaillées d’une démonstration que j’ai faite dans le cadre du SharePoint Saturday Lyon.

Lors de cette démonstration, j’ai expliqué comment créer et publier un composant WebPart réutilisable sans utiliser d’outil de développement.

Tout se fait via l’interface utilisateur de SharePoint, nul besoin d’être un développeur.

Cette procédure est applicable autant pour SharePoint Online que pour Microsoft SharePoint Server.

Étapes rapides

  • Créer une page temporaire pour générer le code HTML
  • Ajouter des images et des liens dans la page temporaire
  • Créer le composant WebPart en utilisant le code HTML généré par la page temporaire
  • Enregistrer/publier le composant WebPart dans la galerie des composants WebPart
  • Utiliser le nouveau composant WebPart dans vos pages

Créer un page temporaire

Dans ma présentation j’ai utilisé une page Wiki.

Si vous êtes avec la plus récente version de SharePoint Online vous devrez passer par Contenu du site pour aller vers la bibliothèque Pages du site pour créer une page Wiki.

Note : Si vous utilisez SharePoint Serveur ou un site SharePoint Online qui n’a pas été mis à jour avec les nouveaux types de pages, vous n’avez qu’à cliquer sur l’engrenage en haut à droite de la page et cliquer sur Ajouter une page pour créer une page WIKI.

Pour accéder à la bibliothèque Pages du site

  • Cliquez sur Contenu du site dans la barre de lancement rapide
  • cliquez sur Pages du site
Pour créer une nouvelle page WIKI

  • Cliquez sur la flèche à droite de Nouveau
  • Cliquez sur Page Wiki
Donner un nom à votre page.

Dans notre exemple nous l’avons appelée « Nous_joindre »

Ajouter un tableau, des images et des liens dans la page temporaire

Dans la nouvelle page Wiki nous allons ajouter deux images, puis ajouter des hyperliens sur ces images.

Cette étape nous permettra de créer le contenu qu’on pourra réutiliser sans avoir à connaître le language HTML.

Insérer un tableau avec une colonne et deux lignes.

Pour structurer la présentation du contenu nous allons utiliser un tableau

Positionner votre curseur à l’endroit désiré dans la page

  • Cliquez sur Insérer
  • Cliquez sur tableau et sélectionnez une colonne et 2 lignes pour votre nouveau tableau

Modifier la largeur du tableau

Par défaut le tableau prend 100% de l’espace du composant WebPart, il est possible de modifier ces paramètres.

Pour modifier la largeur du tableau, positionnez votre curseur dans le tableau créé précédemment

  • Cliquez sur DISPOSITION DU TABLEAU
  • Inscrire 25% pour la largeur du tableau

Modifier le style du tableau

Le style par défaut du tableau affiche toutes les lignes du tableau. Nous allons modifier le style pour ne pas afficher les lignes.

Pour modifier le tableau, positionnez votre curseur dans le tableau

  • Cliquez sur CRÉATION
  • Cliquez sur Styles
  • Sélectionnez Style de tableau 1- Clair

Insérer des images dans le tableau

En préparation pour la démonstration j’ai créé une bibliothèque d’images dans le site et j’ai téléchargé mes images dans la bibliothèque.

Si vos images sont déjà dans une bibliothèque d’images SharePoint :

  • Cliquez sur INSÉRER
  • Cliquez sur Image
  • Cliquez sur À partir de SharePoint
Sélectionnez l’image désirée. Dans mon exemple j’ai utilisé des icônes de Courriel et de Twitter.

Lors de la présentation, j’ai ajouté deux images dans le tableau, puis écrit le texte « Pour nous joindre » en haut du tableau.

Insérer des liens sur les images

Pour la démonstration nous voulons qu’un nouveau courriel adressé à Tremblayse@hotmail.com, soit créé lorsqu’un utilisateur cliquera sur l’icône de courriel.

Lorsque que l’utilisateur cliquera sur l’icône Twitter, nous voulons qu’il soit redirigé vers mon compte Twitter : http://twitter.com/sergepoint

Pour insérer un lien sur une image :

  • Cliquez sur une des images de la page
  • Cliquez sur Insérer
  • Cliquez sur Lien
  • Cliquez sur Adresse de provenance
Pour insérer un lien qui permet d’envoyer un courriel lorsqu’un utilisateur clique sur l’image utilisez  Mailto :tremblayse.wordpress.com comme adresse.

Répétez les actions précédentes pour ajouter un lien sur l’icône Twitter vers votre compte twitter ex : http://twitter.com/sergepoint

Récupérer le code HTML généré par cette page

Lorsque vous êtes en mode édition d’une page WIKI, il est possible de voir le code HTML qui est utilisé dans la page. Nous aurons besoin du code HTML qui permet d’afficher le tableau et les images avec les hyperliens pour créer notre composant WebPart.

Pour récupérer le code HTML, positionnez votre curseur dans la zone où se trouve le tableau, puis :

  • Cliquez sur l’onglet Format du texte
  • Cliquez sur Modifier la source
Le code source sera affiché dans la page

  • Copiez le code source de la page
  • Collez le dans Bloc-notes (NotePad)
  • Enregistrez le document sur votre poste de travail.
Si vous travaillez en français assurez-vous de sélectionner l’encodage Unicode.

Télécharger le fichier dans la bibliothèque de style

Le fichier que vous venez de créer contient le code HTML nécessaire à l’affichage des images avec les liens. Nous allons télécharger ce fichier dans la bibliothèque de styles du site SharePoint pour être en mesure de réutiliser ce code.

Note : Il est possible de synchroniser une bibliothèque SharePoint avec votre poste de travail. Dans ce cas vous pourriez éviter cette étape car, dans l’étape précédente, vous auriez été en mesure de sauvegarder le fichier texte directement dans la bibliothèque de document synchronisée au lieu de le sauvegarder sur votre poste de travail.

Pour télécharger le document dans la bibliothèque de styles du site SharePoint

  • Cliquez sur Contenu du site dans la barre de lancement rapide
  • Cliquez sur Bibliothèque de styles

Note : Vous pouvez utiliser n’importe quelle bibliothèque de document, vous n’êtes pas obligé d’utiliser Bibliothèque de styles

Cliquez sur Charger
Sélectionnez votre fichier et cliquez Ouvrir

Archiver votre fichier

La bibliothèque de styles est configurée pour utiliser les versions principales et les versions brouillons. Elle est aussi configurée pour exiger l’extraction lors de la modification des documents.

En raison de ces configurations, tous nouveaux documents téléchargés dans cette bibliothèque sont extraits pour vous. Ce qui aura pour effet qu’il y aura seulement vous qui pourrez voir le document.

Pour rendre le document disponible pour tous, vous devez archiver/publier une version principale.

Pour archiver/publier une version principale

  • Sélectionnez votre document
  • Cliquez sur les trois petits points ou ellipse (…)
  • Cliquez sur Archiver
  • Cliquez sur 1.0 version principale (publier)
  • Cliquez sur OK

Récupérer le lien URL du fichier

Le chemin URL du fichier contenant le code HTML sera nécessaire plus tard lors de la configuration du composant WebPart.

Pour récupérer le chemin URL :

  • Sélectionnez votre fichier dans la bibliothèque de styles
  • Cliquez sur Obtenir un lien
  • Copiez et conservez le lien URL du fichier

Création et publication du composant WebPart

Pour créer notre composant WebPart, nous allons utiliser une nouvelle page WIKI.

Pour créer une nouvelle page WIKI voir les étapes en début de cet article.

Insérer et configurer un composant WebPart Éditeur de contenu dans votre nouvelle page

Pour insérer un composant WebPart Éditeur de contenu dans la page, positionnez votre curseur à l’endroit désiré dans votre page.

  • Cliquez sur INSÉRER
  • Cliquez sur Composant WebPart
  • Sélectionnez le composant WebPart Éditeur de contenu dans la catégorie Média et contenu

Modifier le composant WebPart pour utiliser le code HTML qui a été généré précédemment

Pour modifier le composant WebPart vous devez être en mode édition de la page

  • Positionnez votre curseur sur le composant WebPart que vous venez d’ajouter
  • Cliquez sur la flèche qui apparaît à droite du composant WebPart
  • Cliquez sur Modifier le composant WebPart
Il est possible d’insérer du code HTML directement dans le composant WebPart Éditeur de contenu. Ici au lieu d’insérer le code dans le WebPart nous allons utiliser le fichier qui contient le code en insérant l’hyperlien du document qu’on a enregistré dans la bibliothèque page du site.

Note : L’utilisation d’un fichier contenant le code HTML fera en sorte que lorsque le fichier sera modifié, tous les Composant WebPart qui utilisent ce fichier seront modifiés.

Exportation et publication du composant WebPart

Maintenant que nous avons créé notre composant WebPart, nous allons le publier pour que les utilisateurs puissent facilement insérer ce composant WebPart dans leur page.

Il y aura deux étapes

Étape 1 Exportation du Composant WebPart

Étape 2 Publication du composant WebPart

Pour modifier le composant WebPart vous devez être en mode édition de la page

  • Positionnez votre curseur sur le composant WebPart que vous venez d’ajouter
  • Cliquez sur la flèche qui apparaît à droite du composant WebPart
  • Cliquez sur Exporter…
Cliquez Enregistrer, puis Enregistrer sous pour enregistrer le composant WebPart sur votre poste de travail.
Prenez note du nom et de l’emplacement du fichier DWP.

Publier le composant WebPart

Plusieurs composants WebPart s’offrent à vous lorsque vous ajoutez un composant WebPart dans une page. Ces composants WebPart sont dans une bibliothèque qui se nomme galerie des composants WebPart.

Pour rendre notre composant WebPart disponible à tous les utilisateurs nous allons publier notre WebPart dans cette galerie.

La galerie des composants WebPart est accessible sous les paramètres du site.

  • Cliquez sur l’engrenage en haut à droite de votre page
  • Cliquez sur Paramètres du site
Dans la section Galeries du concepteur Web

  • Cliquez sur Composants WebPart
Dans la bibliothèque des composants WebPart

  • Cliquez sur Fichiers
  • Cliquez sur Télécharger un document

Dans la fenêtre Ajouter un composant Webpart

  • Cliquez sur Parcourir…pour ajouter le fichier DWP que vous avez exporté dans une étape précédente
Dans la fenêtre Ajouter un composant WebPart saisissez :

  • Un nom
  • Une description
  • Un groupe

Note : Le groupe permettra de facilement retrouver le WebPart plus tard.

Utiliser le nouveau WebPart

Nous sommes rendus à l’étape finale qui permet d’utiliser le composant WebPart que nous avons créé et publié

Modifier la page d’accueil et ajouter votre composant WebPart

Pour modifier la page d’accueil

Cliquez sur le lien modifier en haut à droite.

Note: Si le bouton modifier n’apparaît pas, vous pouvez cliquer sur l’engrenage en haut, puis sur Modifier la page.

Pour insérer le composant WebPart dans la page

  • Cliquez sur INSÉRER
  • Cliquez sur Composant WebPart
  • Sélectionnez le composant WebPart Démo pour nous joindre, qui se trouve sous la catégorie SPSLyon

Note : La catégorie SPSLyon a été créée lors de la publication du Composant WebPart

Enregistrez vos modifications

Vous devriez maintenant retrouver deux icônes cliquables sur votre page d’accueil.

Vous pouvez ajouter ce composant WebPart dans plusieurs pages.

Si vous désirez modifier les liens ou ajouter des icônes supplémentaire dans toutes les pages qui utilisent ce composant WebPart, vous n’avez qu’à modifier le fichier que vous avez enregistré dans la bibliothèque de styles.

Publicités