Page layouts

Création de gabarits de page

12/01/2010 5266 lectures 6 commentaires 3.8/5 (5 votes)
Dans un site de publication, il est souvent utile aux utilisateurs de pouvoir créer des pages dans le site SharePoint suivant un certain format. Effectivement, nous pouvons imaginer le cas d'une entreprise disposant d'un Intranet permettant à certains utilisateurs de poster des actualités. L'intérêt est bien évidemment que tout cela soit rapide. Dans ce cas, l'architecte SharePoint devra faire un gabarit de page. Ainsi, lorsqu'une page d'actualité sera créée, celle-ci le sera sur base du gabarit en question. Ainsi, cette page contiendra certaines zones et s'affichera de la façon déterminée par le gabarit. Nous allons voir les différentes étapes du processus de création.

La première chose à faire pour créer un gabarit de page est bien évidemment de créer un site basé sur un template de publication. Dans notre exemple, nous allons partir de 0. Ouvrez donc la centrale d'administration et allez dans Application Management et cliquez sur Create or extend Web application pour démarrer le processus de création d'une nouvelle Web Application. Dans l'écran suivant, cliquez sur Create a new Web application et rentrez les informations dans la page d'après. Ici, nous allons créer le site Web sur le port 100 de notre serveur :

Image


En ce qui concerne notre Application Pool, nous nous baserons simplement sur celle qui exécute notre site se trouvant sur le port 80 :

Image


Une fois la Web Application créée, nous allons créer la Site Collection. Pour cela, cliquez sur Create Site Collection. Dans l'écran qui apparaît, rentrez les informations de création en définissant ce que vous voulez. Cependant, il faudra vous assurer que vous avez bien sélectionné le template de site de publication :

Image


Bien entendu, vous ne pourrez créer un site de ce type uniquement si vous êtes sous MOSS 2007. Effectivement, les fonctions de publication ne sont pas présentes sous WSS 3.0. Ouvrez maintenant votre site :

Image


Nous avons donc un site Web prêt pour accueillir les développements que nous allons faire. Pour illustrer un peu, rendez-vous dans Site Actions > Create a page.

Image


Dans cet écran, vous avez la possibilité de créer une page pour enrichir votre site. Comme vous le voyez, vous avez le choix entre plusieurs modèles de pages différentes permettant d'organiser vos informations de la manière que vous le souhaitez. Le but de notre exemple va être de développer un gabarit de page qui se trouvera dans cette liste et qui vous permettra de créer une page sur un modèle bien défini.

La première chose à faire est de créer un content type. Effectivement, un gabarit de page va se baser sur un content type pour indiquer quelle données ce gabarit devra contenir. Nous avons déjà vu comment créer des content types via l'interface utilisateur et via feature. Ici, nous choisirons de les créer via feature car c'est légèrement plus compliqué et demande légèrement plus de maîtrise. EN plus c'est souvent la technique utilisée pour assurer un déploiement rapide.

Pour cet exemple, nous allons créer un content type qui va stocker une introduction, une image et un texte. Nous nous en servirons pour faire une actualité. Commencez donc par ouvrir Visual Studio et créez un nouveau projet WSP Builder que vous nommerez MyPageLayout :

Image


Une fois le projet créé, nous allons créer notre content type. Pour cela, cliquez avec le bouton droit de votre souris sur votre projet et choisissez Add > New item. Dans l'écran d'ajout, choisissez Blank Feature et nommez-la MyPageLayoutContentType :

Image


Définissez le scope de cette feature sur Site et modifiez les propriétés Titre et Description :

Image


Nous allons maintenant créer 3 colonnes de site que nous allons intégrer à notre content type. Tapez donc cette définition dans le fichier Elements.xml :



Ce code va permettre de simplement déclarer 3 colonnes de site. Nous avons deux champs de type HTML permettant de les présenter sous forme de zones éditables totalement personnalisables grâce à du HTML. Nous verrons cela plus tard. Nous avons également un champ de type Image permettant d'afficher un écran de sélection d'une image. Ces 3 champs seront mieux illustrés lorsque nous jugerons le résultat.

Passons maintenant à la déclaration du content type :



L'ID interminable de ce content type indique que celui-ci hérite du content type Articles. Effectivement, ce dernier est un content type de base de SharePoint (du moins, dans les features de publication) et son ID est 0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44. Nous rajoutons donc 00 suivi d'un nouveau GUID sans les tirets pour créer notre propre content type. Pour ce qui est des FieldRefs, nous ajoutons une références aux 3 champs que nous avons créés précédemment.

Maintenant que notre content type est créé, nous allons pouvoir créer le page s'appuyant dessus. La meilleure façon de le faire est de créer cette page à l'aide de l'interface utilisateur et SharePoint Designer et d'ensuite importer le tout pour l'empaqueter dans une solution WSP. Mais avant de faire cela, il est bien entendu nécessaire d'activer la feature représentant votre content type/I].

Un gabarit de page n'est rien d'autre qu'une page [I]ASPX
. Bien entendu, il existe un modèle contenant le code minimum du gabarit sur base duquel nous ferons le nôtre. Allez donc dans Site Actions > Site Settings > Modify All Site Settings > Master pages and page layouts. Cette librairie contient les différentes pages maîtres et gabarits de votre site. Elle contient également un fichier nommé PageLayoutTemplate.aspx qui est le code source minimal nécessaire à la création d'un gabarit de page. Cliquez sur cet élément et choisissez Send To > Download a copy et enregistrer le fichier sur votre bureau. Renommez ensuite ce dernier en MyPageLayout.aspx et uploadez-la dans la librairie. L'écran suivant apparait alors :

Image


Cette page va vous permettre de définir les différentes options de votre gabarit de page. Le propriété la plus importante est bien Associated Content Type qui va permettre de lier notre page layout à notre content type. Sélectionnez donc Areaprog dans la partie concernant le groupe du content type et My page Layout dans le content type. Cliquez ensuite sur Check In pour valider les changements. A ce stade, il est déjà possible de créer une page basée sur ce gabarit. Effectivement, si vous vous rendez dans Site Actions > Create page, une entrée supplémentaire sera visible dans la liste :

Image


Bien entendu, pour l'instant, cela ne servirait à rien du tout étant donné que nous n'avons pas définit le style de notre gabarit. Pour faire cela, il faut ouvrir SharePoint Designer et ouvrir votre site grâce à ce dernier. Déroulez alors le dossier _catalogs/masterpage pour voir le contenu de la librairie à laquelle nous avons accédé précédemment et qui contient notre gabarit de page. Repérez donc le fichier MyPageLayout.aspx et double-cliquez dessus pour l'ouvrir. SharePoint Designer va alors vous demander si vous voulez extraire le fichier, répondez oui. Actuellement, le code présent dans ce fichier est le suivant :



Ce code va permettre de contenir l'affichage de votre gabarit de page. Il est bien évidemment possible de faire ca via le designer, mais je préfère le faire par code, car la fenêtre de design souffre parfois de quelques dysfonctionnements. Un gabarit de page est composé de contrôle du type content. Ces contrôles vont permettre de contenir le contenu de votre page et vont se placer à différents endroits de votre page maitre. Ici, vous avez deux content différents. Le premier (PlaceHolderPageTitle) permettra de définir le titre de la page. ici, nous affichons un FieldValue pour afficher la valeur d'un champ. Nous prenons le champ Title de l'élément.

Effectivement, ce qu'il faut savoir c'est que lorsque vous créez une page dans SharePoint, celle-ci est automatiquement placée dans la librairie Pages. Un élément représentant une page est basé sur un content type contenant donc des colonnes. Le contenu de la page est donc en fait l'affichage du contenu de ces champs. Nous affichons donc le contenu du champ Title dans la barre de titre de la page.

Le deuxième content (PlaceHolderMain) va permettre de contenir le corps de la page. Ici, nous allons simplement définir une structure affichant l'image choisie par le rédacteur, à droite l'introduction, en dessous le corps de l'actualité et en dessous le nom du rédacteur. Nous allons donc commencer par taper la structure HTML suivante dans ce content :



Ici, nous avons définit des id pour les div pour les différencier mais ils ne sont pas obligatoires et ne doivent pas nécessairement être les mêmes que le nom des champs. Nous allons maintenant devoir afficher la valeur des champs. Nous allons également devoir nous arranger pour qu'ils s'affichent différemment selon le mode d'affichage (affichage ou édition). Tout cela est en fait gérer automatiquement par SharePoint.

Dans SharePoint Designer, vous avez une fenêtre (en haut à droite) qui se nomme "Boite à outils". Sous le groupe "Contrôles SharePoint" vont se trouver différents contrôles qu'il sera possible d'ajouter à la page. Vous avez une section qui se nomme "Champs de contenu". Ceux-ci sont en fait les champs que vous avez définit dans votre content type. Il vous suffit donc de choisir les contrôles en question et de les faire glisser à l'endroit désiré de votre page. Ainsi, après quelques glissé/déplacé, votre code source deviendrait :



Le champ définissant l'auteur de l'article ne se trouvant pas dans notre personnalisation du content type, il faut aller le chercher dans la section "Champ de page" (c'est le champ Contact) :



A ce stade, nous avons presque fini de faire ce que nous voulons, mais un problème subsiste. Effectivement, que ce soit en mode affichage ou en mode édition, les champs sont visibles, mais le problème c'est qu'en mode édition, le champ auteur ne doit pas forcément être affiché. Effectivement, modifier le nom de l'auteur de l'article peut sembler un peu inutile. Nous allons donc nous arranger pour que ce champ ne s'affiche que si nous sommes en mode affichage et non édition. Pour faire cela, il existe le contrôle EditModePanel dans la section "Contrôles de serveur". Glissez donc un contrôle de ce type dans le div avec l'id auteur et glissez le champ auteur à l'intérieur de l'EditModePanel. Enfin, modifiez la propriété PageDisplayMode de l'EditModePanel sur Display pour indiquer que le contenu de ce contrôle ne sera affiché que si nous sommes en mode Display (donc affichage et non édition). L'autre mode d'affichage pour ce contrôle est Edit et correspond à l'affichage d'édition.



Le code de votre page est maintenant terminé. Sauvegardez-la et fermez SharePoint Designer. Ouvrez ensuite votre site SharePoint et retournez dans la librairie des pages maitres et gabarits de pages (Site Actions > Site Settings > Modify all site settings > Master pages and page layouts). Commencez par cliquer sur le menu déroulant de MyPageLayout.aspx et choisissez Check In. Dans l'écran qui s'affiche, choisissez le rond d'option permettant de publier la page. Cliquez ensuite de nouveau sur le menu déroulant de cet élément et choisissez Approve/Reject et enfin, dans l'écran qui apparaît, sélectionnez Approved.

Avant de passer au test, nous allons désactiver un workflow d'approbation inutile pour nous car celui-ci ralentirait les tests. Déroulez le menu Site Actions et allez sur l'option View all site contents. Cliquez ensuite sur la librairie Pages et allez dans Settings > Document Library Settings > Workflow settings > Remove a workflow. Cliquez sur le rond d'option en dessous de Remove et validez.

Déroulez maintenant le menu Site Actions et choisissez Create Page. Créez une page du type MyPageLayout.aspx et nommez-la Test :

Image


Nos 3 champs s'affichent bien de la manière que nous avons indiquée. Par contre, le champ auteur lui n'apparaît actuellement pas. Remplissez-les maintenant et cliquez sur Publish pour publier la page.

Image


Cette fois, les champs sont affichés correctement ainsi que le nom de l'auteur (ici System Account). Voilà, comme vous le voyez, il n'est pas très compliqué de créer un gabarit de page, mais bien évidemment, maintenant, il va falloir définir une technique de déploiement pour pouvoir le déployer sur un serveur sans devoir faire toutes ces manipulations.

La première chose que nous devons faire, c'est retourner dans la librairie des pages maitres et des gabarits de page, localiser MyPageLayout.aspx, dérouler son menu d'option et choisir Sent To > Download a copy que vous enregistrerez sur votre bureau. Dans votre solution Visual Studio, cliquez avec le bouton droit de votre souris sur le dernier dossier (MyPageLayoutContentType) qui contient les fichiers feature.xml et elements.xml. Choisissez alors Add > Existing Item et allez rechercher la page ASPX que vous venez de télécharger.

Nous allons maintenant devoir indiquer à SharePoint que cette page devra être uploadée dans la librairie de page maitres et de gabarits de page. Pour cela, nous allons utiliser un élément Module. Tapez donc ceci à la suite de votre code dans le fichier elements.xml :



Malgré que ce code peut paraitre compliqué, il ne l'est pas. Comme vous le savez, un module permet d'uploader un fichier dans une librairie système de SharePoint. Cette librairie est identifiée par la valeur de l'attribut Url de l'élément Module. Ici, _catalogs/masterpage identifie la librairie de page maitre et de gabarit du site. Nous avons ensuite l'élément File qui va nous permettre de définir le fichier que nous voulons uploader. Nous utilisons donc l'élément Url pour indiquer qu'il s'agit de notre page ASPX. Enfin, nous définissions deux propriété pour l'élément dans la liste. Le premier est bien évidemment son Title qui va définir le titre de l'élément dans la liste. Ensuite, la propriété PublishingAssociatedContentType va permettre d'indiquer le content type associé à la page. Le format est un peu barbare mais assez compréhensible. Il suffit de mettre ";#" suivi de la valeur de l'attribut Name du content type, suivi de ";#" suivi de la valeur de l'attribut ID du content type clôturé par ";#".

Et voilà, votre solution est terminée. Si vous la déployez sur votre site, ou même sur un site vide, à l'activation de votre feature, les colonnes de site seront créées, les content types également et enfin, votre fichier ASPX sera uploadé et se basera bien sur le content type créé précédemment.

Télécharger les sources de l'exemple

Voter :

6 commentaires

  • Sébastien Sougnez a dit:

    26/11/2010

    C'est difficile de répondre correctement à ces questions car cela dépend toujours du besoin, du but visé par la page, les composants,... Donc bon...

    Mais pour créer une page sur base d'un page layout programmatiquement, je pense que vous devez récupérer une référence à votre page layout (stocké dans _catalog/masterpage), et faire un copyTo pour la copier à un autre endroit et alors modifier la copie.

    Je n'ai pas souvent fait cette opération, mais dans le fond, c'est comme cela.

    Cordialement

  • Alice a dit:

    26/11/2010

    Merci de votre réponse.

    Très bien, donc si j'ai bien compris, si j'ai à créer des User controls qui risquent d'être utilisés à plusieurs reprises sur le site, je les place dans des WebParts. Sinon, si j'ai qq chose à développer de différent à chaque fois, je crée des pages différentes en m'appuyant sur une ou des Page Layouts développées au préalable.
    Supposons que j'ai crée une Page Layout. Si je veux créer une nouvelle Page, directement par le code, j'ai juste à faire dériver ma page de cette PageLayout?

    Merci d'avance.

  • Sébastien Sougnez a dit:

    26/11/2010

    Salut,

    en fait, les pages applicatives sont des pages qui vous permettront par exemple de configurer les options d'un de vos développements. Ces pages sont placées dans le dossier LAYOUTS et il n'y a qu'une seule instance de celles-ci sur le serveur.

    Les pages layouts, quant à elle, permettent de faire un gabarit de page. Ainsi, quand vous allez vouloir créer une page de site, vous allez choisir votre Page Layout et la page ainsi créée aura le design et les éléments définis dans le page layout. Ensuite, c'est le fait que vous allez les remplir différemment d'une page à l'autre qui va faire que ça va devenir une page de site différente d'une autre.

    Pour votre cas, cela dépend de l'utilité des user controls. Pouvez vous être plus explicite ? Car si ces user controls affichent des données pouvant être affichés à plusieurs endroits, il serait p'tet intéressant de développer des Web part que vous placerez sur des Web Part Pages.

    Cordialement

  • Alice a dit:

    25/11/2010

    Bonjour,

    Je voudrais savoir la différence qu'il y a entre les pages applicatives, les pages de sites et les pages Layout? J'ai cru comprendre que les pages applicatives étaient plutôt utilisées pour créer des pages administratives; les pages layout sont apparemment des modèles de pages.
    Moi, je voudrais écrire simplement une page, contenant des users controls que j'aurais développé au préalable. Que dois je utiliser pour ca?
    Merci

  • Sébastien Sougnez a dit:

    15/10/2010

    Salut,

    As-tu essayé de retirer le fichier de la master page catalog ?

  • Gil a dit:

    15/10/2010

    J'ai fais plusieurs test, j'ai rétracter mes solutions mais la ligne qui a été ajoutée dans la liste des Page Layout reste.

    Comment fait-on pour enlever la ligne qui représente le fichier .aspx sur la page Create Page, liste Page Layout ???

    Merci d'avance.

Ajouter un commentaire