Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Le Blog (Vert) d'Arnaud JUND

Bienvenue sur mon éco blog

Actualités

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.

clip_image001

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)

clip_image002

clip_image003

clip_image004

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

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

clip_image005

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.

clip_image006

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

<script type="text/javascript">

document.getElementById("s4-ribbonrow").style.display = "none";

</script>

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.

clip_image007

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"

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

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

<script type="text/javascript">

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 = argsIdea.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;

}

</script>

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

clip_image008

En cliquant sur "Informations de contact", j'ai une fenêtre dialogue qui s'ouvre.

clip_image009

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

clip_image010

<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">&#160;</td>

<td class="ms-toolbar" nowrap="nowrap" align="right">

<SharePoint:GoBackButton runat="server" ControlMode="Edit" id="gobackbutton1"/>

</td>

</tr>

</table>

Je vais remplacer le code natif par ceci

<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">&#160;</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>

Ce qui me donne ceci

clip_image011

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

 

La solution finale

Formulaire principal
clip_image012

Informations de contact
clip_image013

Coordonnées
clip_image014

Autres informations
clip_image015

En espérant que cette petite astuce pourra vous aider.

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 :
Posted: lundi 19 septembre 2016 13:10 par junarnoalg
Classé sous : ,

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- UWP or not UWP sur Visual Studio 2015 ? par Blog de Jérémy Jeanson le 03-08-2017, 19:12

- Désinstallation de .net Core RC1 Update 1 ou SDK de Core 1 Preview 2 par Blog de Jérémy Jeanson le 03-07-2017, 19:29

- Office 365: Ajouter un utilisateur ou groupe dans la liste des Site collection Administrator d’un site SharePoint Online via PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-24-2017, 18:52

- Office 365: Comment créer une document library qui utilise les ContentTypeHub avec PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-22-2017, 17:06

- [TFS] Supprimer en masse les dépendances à SQL Enterprise ou Developer avant de procéder à une migration par Blog de Jérémy Jeanson le 02-20-2017, 20:30

- Office 365: Attention au volume utilisé par les fichiers de Thèmes de SharePoint Online par Blog Technique de Romelard Fabrice le 02-07-2017, 18:19

- [SCVMM] Supprimer une machine bloquée par Blog de Jérémy Jeanson le 01-31-2017, 21:22

- Microsoft .Net Challenge 2017 par Le Blog (Vert) d'Arnaud JUND le 01-30-2017, 15:25

- Office 365: Utiliser le bouton Export to Excel depuis un teamsite SharePoint Online et avec le client Office 2007 par Blog Technique de Romelard Fabrice le 01-27-2017, 18:58

- Office 365: Forcer la réindexation des données dans une liste SharePoint Online par Blog Technique de Romelard Fabrice le 01-25-2017, 15:57