SharePoint, édition multi fenêtres d’un élément de liste

Cet article s’applique dans le cadre de SharePoint 2013 et SharePoint Online (Office 365)

SharePoint permet très facilement de mettre à disposition des utilisateurs des formulaires d’encodage pour tout et n’importe quoi. Mais souvent je fais face à des demandes de formulaires avec une quantité importante de champs. Et très rapidement mes formulaires deviennent kilométriques et non pratiques pour les utilisateurs finaux.

Cet article vous propose une solution assez simple pour contextualiser l’encodage d’un formulaire d’édition par l’utilisation d’un encodage multi fenêtres.

L’exemple type est une liste de contacts dont voici un aperçu de l’édition d’un élément.

L’objectif est de simplifier ce formulaire d’édition, afin d’avoir un formulaire de base avec Nom, Prénom, Nom complet, Company, etc …

Un second formulaire pour les informations de contacts (Adresse messagerie, Téléphones, etc).
Un troisième formulaire pour les coordonnées postales.
Un dernier formulaire pour les autres informations.

1ère étape, création des formulaires d’édition

Avec SharePoint Designer, j’ouvre mon site SharePoint, et sur ma liste de contacts je crée un nouveau formulaire d’édition qui sera mon formulaire par défaut (EditFormMain.aspx)

Ensuite je crée mes autres formulaires d’édition :

• EditFormContact.aspx
• EditFormCoordonnees.aspx
• EditFormAutres.aspx

Je me retrouve donc avec 5 formulaires d’éditions !

2ème étape, modification de mes formulaires contextuels

Le principe est le même pour chacun de mes formulaires contextuels (EditFormContact, EditFormCoordonnees et EditFormAutres). Je prends en exemple, le formulaire EditFormContact.

J’édite ce formulaire avec SharePoint Designer pour y laisser uniquement les champs qui m’intéresse dans ce contexte.

Dans ce formulaire, je décide de masquer le rubban SharePoint, en ajoutant un script qui masque ce rubban !

[sourcecode language='java'  padlinenumbers='true']
document.getElementById("s4-ribbonrow").style.display = "none";
[/sourcecode]

Cette étape est à refaire pour chaque formulaire contextuel !

3ème étape, modification du formulaire principal

La première chose à faire est de retirer les champs en trop, pour y laisser que les champs souhaités.
Ce qui me donne un formulaire minimaliste.

Remarque : Pour assurer le bon fonctionnement d’une édition multi fenêtre, il faut que les champs obligatoires soient tous sur le formulaire principal.

Sur ce formulaire principal, on va maintenant ajouter la possibilité d’ouvrir un formulaire contextuel pour encoder les informations de contact (Adresse de messagerie et autres).

Je vais donc ajouter un hyperlien en dessous du champs « Fonction »

[sourcecode language='html'  padlinenumbers='true']
<tr>
<td colspan="2"><hr></hr></td>
</tr>
<tr>
<td colspan="2"><a href="#" onclick="javascript: NewChildWindow('/dev/Lists/Contacts/EditFormContact.aspx'); ">Informations de contact</a></td>
</tr>

[/sourcecode]

Cette modification est à faire pour chaque formulaire contextuel que l’on souhaite ouvrir sous forme d’une dialogue.

Ce lien exécute un script que voici

[sourcecode language='java' ]
function NewChildWindow(newFormPath)
{
	var vals = new Object();
	var qs = location.search.substring(1, location.search.length);
	var args = qs.split('&');
	for (var i=0; i < args.length; i++) 
	{
		var nameVal = args[i].split('=');
		var temp = unescape(nameVal[1]).split('+');
		nameVal[1] = temp.join(' ');
		vals[nameVal[0]] = nameVal[1];
	}
	var IDColumn = vals["ID"];
	displayChildWindow(newFormPath + "?ID=" + IDColumn);

}

function displayChildWindow(url)
{
	var options = SP.UI.$create_DialogOptions();
	options.url = url;
	options.dialogReturnValueCallback = Function.createDelegate( null, closeChildWindow);
	SP.UI.ModalDialog.showModalDialog(options);

}

function closeChildWindow(result, target)
{
	var vals = new Object();
	var qs = location.search.substring(1, location.search.length);
	var args = qs.split('&');
	for (var i=0; i < args.length; i++) 
	{
		var nameVal = argsIdea.split('=');
		var temp = unescape(nameVal[1]).split('+');
		nameVal[1] = temp.join(' ');
		vals[nameVal[0]] = nameVal[1];
	}
	var IDColumn = vals["ID"];
	window.location.href = "/dev/Lists/Contacts/EditFormMain.aspx?ID=" + IDColumn;
}

[/sourcecode]

La fonction « closeChildWindow » permet de faire un rechargement de l’élément en édition.  Ceci afin d’éviter une double sauvegarde qui génèrerait un conflit.

Voici ce que donne mon formulaire principal
 

En cliquant sur « Informations de contact », j’ai une fenêtre dialogue qui s’ouvre.

Et via cette dialogue, je peux encoder les informations de contact.

4ème étape, modification du processus de sauvegarde du formulaire principal

Cette étape est optionnelle, mais elle apporte à l’utilisateur plus de souplesse dans son encodage.
Maintenant que nous avons une édition contextualisée, les utilisateurs apprécient de pouvoir enregistrer leur encodage sans pour autant quitter le formulaire d’encodage.
Je vais donc continuer à modifier mon formulaire principal, pour remplacer les boutons par défaut par des boutons spécifiques.

Pour le moment j’ai ceci dans mon formulaire principal

[sourcecode language='html' ]
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG src="http://blogs.developpeur.org/_layouts/15/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:SaveButton runat="server" ControlMode="Edit" id="savebutton1"/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="Edit" id="gobackbutton1"/>
</td>
</tr>
</table>
[/sourcecode]

Je vais remplacer le code natif par ceci

[sourcecode language='html' ]
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG src="http://blogs.developpeur.org/_layouts/15/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<input type="button" class="contact-button" value="Enregistrer et Continuer" name="btnSaven" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={}')}" />
</td>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG src="http://blogs.developpeur.org/_layouts/15/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<input type="button" class="contact-button" value="Enregistrer et Fermer" name="btnTermine" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={/dev/Lists/Contacts}')};" />
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<input type="button" class="contact-button" value="Annuler" name="btnClose" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel;__redirect={/dev/Lists/Contacts}')}" />
</td>
</tr>
</table>
[/sourcecode]

Ce qui me donne ceci

L’utilisateur peut maintenant enregistrer ses modifications tout en restant sur le formulaire d’édition.

La solution finale

Formulaire principal