Modifier les formulaires de liste.


Bonjour à tous,

Aujourd’hui je vais vous parler des étapes nécessaires à la modification des pages de listes (new,edit,display).

Ces pages de formulaires ne sont en fait que des webpart pages, nous pouvons donc y ajouter des éléments afin de customiser nos formulaires. (Texte,Image,Bouton ,etc…)

En cherchant des informations, je me suis aperçu que je trouvais majoritairement des tutos pour faire des modifications via SharePoint Designer et très peu en code server.

Personnellement dans un souci de réutilisabilité, j’ai toujours préféré utiliser des packages wsp contenant mes modifications que de faire celles-ci via SPD.

Voici donc les étapes nécessaires pour modifier les « form » sur une liste. Ces modifications permettront d’avoir la main sur la page applicative.

Ouvrons notre solution Visual Studio.

1) au niveau de la définition de votre liste, ajouter une nouvelle « Application page ».

Utilisons simplement le template « Application Page » proposé lorsque nous cliquons sur « Ajouter un élément ».

01

2) Modifier le type de déploiement de cette page.

Dans les propriétés de la page, sélectionner « Element File ».

02

3) Copier le contenu de la form par défaut de SharePoint.

En créant notre page aspx via Visual Studio, nous avons un fichier de ce type.

03

Pour continuer, nous n’avons besoin que des éléments spécifique à notre solution à savoir l’import de l’assembly de la solution et la liaison vers la page cs avec le code source. Supprimons donc le reste pour avoir un fichier ne contenant que nos 2 lignes.

04

Si nous regardons le contenu du fichier « Schema.xml » de notre définition de liste, nous pouvons voir que les forms font appel à la page « form.aspx »

05

Cette page se trouve dans le dossier 14, dans le dossier « TEMPLATE\Pages »

06

Ouvrons cette page et copions l’ensemble de la page dans notre « Application page ». Cela fait, supprimons la balise « Page » provenant du fichier « form » de SharePoint

07

Changeons aussi le paramètre « DynamicMasterPageFile=’~masterurl/default.master’

» par « MasterPageFile=’~masterurl/default.master’ » dans la balise « Page »

4) Code source de la page.

Le code behind de la page applicative doit hériter de la classe Microsoft.SharePoint.WebPartPages. WebPartPage

08

5) Associer la nouvelle page comme étant une nouvelle « Form » de la liste.

Dans notre fichier « schema.xml » nous allons modifier les associations de forms, nous allons changer le paramètre « SetupPath » par le paramètre « Path » qui ciblera notre nouvelle page.

09

Devient

10

Avec ces modifications nous avons remplacé la page « new form » par notre page.

Pour vérifier notre modification, nous allons ajouter un message dans la page.

Dans notre fichier « ApplicationPage1.aspx », repérons le content place holder « PlaceHolderMain»  et ajoutons notre texte.

11

Déployons maintenant notre solution et allons ajouter un élément.

12

Cette manière de faire permet d’utiliser le composant d’ajout natif, cependant nous pourrions aussi utiliser un autre composant ou même le composant standard en changeant les paramètres.

Pour cela, il suffit de spécifier dans le schema.xml que nous n’utilisons pas le ListForm standard et renseigner la WebPart que l’on veut utiliser.

Dans l’exemple ci-après, pour la page d’édition, nous allons utiliser la WebPart standard et ajouter un content editor webpart.

14

Après déploiement le menu d’édition contient le content editor webpart.

15

Un dernier exemple, si nous ne voulons pas utiliser la list form webpart par défaut, nous pouvons utiliser le paramètre » UseDefaultListFormWebPart= »False » »

16

Et voilà !

Christopher.

Cet article, publié dans SharePoint 2010, est tagué . Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s