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.

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.

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

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

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.

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”.

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

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

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 :

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.

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).

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.

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

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 :

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

En mode édition :

Et au final :

[avatar user=”bdhambahadour”]