[SharePoint 2010] Personnalisation de formulaires (partie 1) : injection JavaScript et SharePoint Designer

Un sujet qui me tient particulièrement à cœur dans SharePoint est la personnalisation des formulaires de saisie. SharePoint propose, pour les listes et bibliothèques, des formulaires ayant toujours le même gabarit : affichage de chaque champ en ligne sur 2 colonnes (libellé à gauche et le champ en lui-même à droite).

Ce modèle donne le plus souvent entière satisfaction. Il arrive cependant que l'on souhaite avoir un « formulaire custom », le développeur a alors plusieurs options. Le premier réflexe semble être toujours de créer une WebPart avec des contrôles ASP.NET et de réimplémenter la plomberie sous-jacente (sauvegarde, sécurité, validation, navigation…). Cela entraine des coûts de développement pouvant être importants, peut être difficile à maintenir et à réutiliser mais surtout, il est dommage de ne pas utiliser les possibilités offertes par SharePoint en standard.

Je vais vous présenter les différents moyens que j'ai pu expérimenter jusqu'ici à travers cette série de posts :

Le rendu unifié des formulaires de listes provient d'une seule WebPart, la ListFormWebPart. Cette WebPart est instanciée pour chaque liste dans 3 pages et a un comportement différent pour chacune d'elles : visualisation d'élément dans DispForm.aspx (chaque champ est affiché dans des labels), création d'éléments dans NewForm.aspx (chaque champ affiche un contrôle vide) et édition d'élément dans EditForm.aspx (chaque champ est affiché avec sa donnée dans des contrôles).

Dans ce billet, nous allons voir 2 méthodes pour modifier ces formulaires : l'injection de javascript, et la personnalisation avec SharePoint Designer.

Injection de Javascript

Le comportement prédictible de ces affichages permet de les altérer avec des injections de JavaScript. C'est une des méthodes les plus anciennes (elle date de SPS 2003 même si c'était bien moins simple qu'avec MSS 2010) et les plus utilisées par les power users (on trouve plein d'exemples sur le site www.endusersharepoint.com). Des bibliothèques existent pour faciliter les manipulations, notamment http://spservices.codeplex.com (fournissant des fonctions pour implémenter des dropdown cascadées, par exemple).

Dans cet exemple, on va définir l'arrière-plan du champ titre en vert quand il a le focus et le remettre en blanc quand il le perd. Pour ce faire, on va utiliser JQuery.

La première étape consiste à choisir le formulaire à modifier. Après avoir navigué sur la liste en question, dans la section Liste du ruban, on clique sur le bouton déroulant Modifier les composants WebPart Formulaire puis sur le formulaire à modifier.

On voit qu'il s'agit d'une page de composants WebPart toute simple et qu'on a la possibilité d'en rajouter.

Pour injecter du JS, on va simplement rajouter une WebPart Editeur de contenu.

Pour altérer le DOM du formulaire généré par la ListFormWebPart, mon meilleur ami est la touche F12 (dans Internet Explorer, ou Firefox avec Firebug). En sélectionnant le contrôle du champ Titre, on note qu'il a un attribut title avec pour valeur, le nom du champ.

Pour écrire du script, il faut être en mode d'édition HTML. On doit cliquer dans la WebPart d'édition de contenu, cliquer sur HTML puis Modifier la source HTML dans le ruban.

Dans notre exemple, le code est simple. On référence JQuery, on rajoute un événement qui ne s'exécutera que quand le DOM sera entièrement chargé. Cet événement va capturer le contrôle du champ Titre (un tag input avec l'attribut Title défini à la valeur Titre) et lui ajouter les événements focusin et focusout.

Quand on retourne dans notre liste et que l'on créé un élément, on verra notre champ Titre changer de couleur de fond selon s'il a le focus ou non.

Les principaux avantages de cette méthode sont que les possibilités en JQuery sont énormes et que l'on peut déployer nos modifications sans l'aide d'un administrateur de ferme. Ces modifications peuvent d'ailleurs être packagées dans une solution sandbox.

Les principaux inconvénients, sont que ce n'est que du JS (il ne faut donc pas s'en servir pour manipuler de la donnée sensible) et que ce n'est pas efficace si on a beaucoup de formulaires car il faudra réappliquer la même chose n fois.

Utilisation de SharePoint Designer

Une autre méthode prisée des power users est d'utiliser SharePoint Designer.

Si on ouvre une des pages aspx de liste dans SharePoint Designer, on voit que la WebPart présente dans la page est la ListFormWebPart avec son rendu par défaut.

Dans l'onglet Insertion du ruban, on a l'option de Personnaliser le formulaire de liste.

Ensuite, on précise qu'on souhaite, ici, un formulaire de modification pour la liste qui va bien.

Ca aura pour effet de remplacer la ListFormWebPart par une DataFormWebPart. Il s'agit d'une WebPart destinée à saisir de la donnée dont le rendu est généré au travers d'un flux XSL.

On peut donc entièrement le personnaliser pour rajouter ou modifier des tags HTML, du JavaScript…

Les avantages sont les mêmes que pour l'injection de JavaScripts sauf qu'en plus, on modifie ici directement le rendu généré par le serveur. C'est donc plus performant et plus fiable.

Les inconvénients sont qu'il faut aussi effectuer ces modifications à chaque endroit où on veut les voir (peut vite devenir fastidieux), qu'il s'agisse de XSL (difficile à maitriser pour des power users) et surtout, c'est une modification SharePoint Designer ce qui déghostera la page (sauvegarde de tout le contenu en base de données).

Voyons maintenant comment personnaliser le modèle du formulaire de manière réutilisable avec la ListFormWebPart.

Publié dimanche 16 janvier 2011 19:55 par Pierrick CATRO-BROUILLET
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01