Accueil > Créer son modèle de page SharePoint avec Visual Studio
Boris Dhambahadour

Créer son modèle de page SharePoint avec Visual Studio

Créer son modèle de page SharePoint avec Visual Studio

Comme nous l’avions vu il y a peu de temps, créer son modèle de page personnalisé est une chose très intuitive avec le gestionnaire de conception ou “Design manager” en anglais.
Dans cet article, nous allons expliquer pas à pas comment créer ce modèle de page en utilisant des colonnes et types de contenus associés à notre modèle.

Pour ce faire, nous allons créer un projet SharePoint 2013 avec Visual Studio 2012.
art1

On va y ajouter trois features : Columns (qui va contenir nos colonnes), ContentTypes (qui va contenir les types de contenu) et Layouts (qui va contenir les modèles de pages). Ici on prendra l’exemple d’une seule colonne ajoutée à un type de contenu pour un modèle de page. Ce tutoriel est valable aussi pour l’ajout de plusieurs éléments.

art17

 

On ajoute à notre projet un répertoire Artefact dans lequel on mettra nos éléments SharePoint ( Columns, ContentType et PageLayout).

art18

 

D’abord créer l’élément Columns, en ajoutant un élément SharePoint 2013  :

art2

 

On ouvre le fichier Elements.xml et on y crée notre colonne de site.
C’est une colonne simple de type texte qu’on rajoute au groupe “Cellenza Demo”.

<Field Type="Text" DisplayName="Adresse Demo" Required="FALSE" EnforceUniqueValues="FALSE" Indexed="FALSE" MaxLength="255" Group="Cellenza_Demo"
 ID="{A3101F08-36C6-4E6E-BD06-8318A8EF9012}" SourceID="{32d37ae7-4ce1-43e3-bfe7-3a07cf022739}" StaticName="Custom_Adresse" Name="Custom_Adresse" Customization="" />

Ensuite on revient sur notre Feature Columns et on y ajoute notre élément Columns, on change aussi le scope de déploiement en passant à site.
art19

 

Une fois la colonne créée on peut créer notre type de contenu. Pour cela, sous notre répertoire Artefact, on va ajouter un élément SharePoint “Type de contenu”, on choisit d’hériter du type de contenu parent “Page”.
art5

On ouvre l’élément SharePoint ContentType, on a une interface graphique intuitive qui permet d’ajouter la colonne fraîchement créée :
art8

Sous l’onglet Content Type on change le nom du type de contenu ainsi que la description et le groupe d’appartenance.
art20

 

Ensuite on revient sur notre Feature Content Type et on y ajoute notre élément ContentTypeDemo, on change aussi le scope de déploiement en passant à site.
On peut à présent déployer le projet. N’oubliez pas de modifier l’url de votre site SharePoint sur lequel vous voulez déployer :

art21

 

Après déploiement vous devez normalement retrouver vos deux fonctionnalités activées dans les fonctionnalités de site. Dans les paramètres de site, vous verrez aussi la nouvelle colonne de site ainsi que le nouveau type de contenu.

art9

 

art7

Pour la suite, on se réfère à la création d’un modèle de page en passant par le gestionnaire de conception que l’on récupère dans la galerie des pages maîtres : il faut récupérer les deux fichiers ( MyCustomPLayout.aspx et MyCustomPLayout.html).

art13

 

On peut supprimer ces fichiers de la galeries.

Sous le répertoire PageLayouts de notre solution VS, on ajoute ces deux fichiers téléchargés MyCustomPLayout.aspx et MyCustomPLayout.html.

Ensuite on revient sur notre Feature Layouts et on y ajoute notre élément PageLayouts, on change aussi le scope de déploiement en passant à site.

art22

 

On modifie le style d’affichage du champ “adresse demo” :

art23

 

Mais il faut ouvrir le fichier Elements.xml pour le corriger et revoir certaines choses :

<Module Name="PageLayouts" Url="_catalogs/masterpage">

Attention de bien ajouter l’url de destination des fichiers :

 <File Path="PageLayouts\MyCustomPLayout.aspx" Url="MyCustomPLayout.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="FALSE" ReplaceContent="TRUE">

 

et de même pour propriétés de chaque fichiers.
Afin de mieux provisionner les deux fichiers, il faut modifier le module pour ajouter la liaison au type de contenu en y mettant son nom et son identifiant.
Ce qui nous donne au final :

<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  <Module Name="PageLayouts" Url="_catalogs/masterpage">  <File Path="PageLayouts\MyCustomPLayout.aspx" Url="MyCustomPLayout.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="FALSE" ReplaceContent="TRUE">  <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;"/>  <Property Name="PublishingAssociatedContentType" Value=";#ContentType_Demo;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900302824BABBD84A1D8190903A904F2440;#"/>  <Property Name="Title" Value="Page Demo"/>  </File>  <File Path="PageLayouts\MyCustomPLayout.html" Url="MyCustomPLayout.html" Type="GhostableInLibrary" IgnoreIfAlreadyExists="FALSE" ReplaceContent="TRUE"/>  </Module> </Elements>

 

On peut à présent déployer le wsp sur notre site, et créer un page avec notre modèle MyCustomPageLayout :

art16

 

On a bien la colonne personnalisée, ainsi que le style voulu :

En mode édition :

art24

 

Et au final :

art25

 

[avatar user=”bdhambahadour”]

Nos autres articles
Commentaires
Laisser un commentaire

Restez au courant des dernières actualités !
Le meilleur de l’actualité sur le Cloud, le DevOps, l’IT directement dans votre boîte mail.