En entreprise, il est possible qu’on vous demande un jour un calendrier pour gérer les formations d’un service par exemple.
Et si en plus on ajoute un bouton pour l’inscription à la formation directement dans le formulaire de consultation, ce serait pas encore mieux?
Etape 1:
Pour commencer on va créer une liste de type « calendrier »
Etape 2:
Téléchargez les fichiers JS ci dessous et déposez les dans une bibliothèque de document interne.
Etape 3:
Ajoutez un champs dans votre liste de type calendrier. Ce choix doit être de type datetime, il servira pour la création des formations, afin de définir de date limite pour les inscriptions.
Ajoutez également un champs peoplepicker et nommez le « participants inscrits », il nous permettra d’ajouter les personnes qui ont cliqués sur le bouton m’inscrire.
Etape 4:
Ouvrir votre site avec SharePoint designer puis faites une copie du « DispForm.aspx » de votre liste « calendrier ».
Une fois la copie faites, ouvez la page toujours sous SharePoint designer. Puis insérez ce code dans le PlaceHolderMain:
<script type="text/javascript" src="http://vlecerf.fr/JS/jquery.js"></script> <script type="text/javascript" src="http://vlecerf.fr/JS/spjs-utility.js"></script> <script type="text/javascript"> //on récupére l'objet utilisateur courant. var userInfoObj = getUserInfo_v2(_spUserId); //permet de recupérer le controle correspondant à l'identifiant. function getTagFromIdentifierAndTitle(identifier) { var tags = document.getElementsByTagName('DIV'); for (var i=0; i < tags.length; i++) { var tempString = tags[i].id; if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){ return tags[i]; } } return null; } //Définir la valeur d'un element via son identifiant. function setPickerInputElement(identifier, value) { var tags = document.getElementsByTagName('DIV'); for (var i=0; i < tags.length; i++) { var tempString = tags[i].id; if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){ tags[i].innerHTML = value; break; } } } // Recuperer les personnes dans un people picker sharepoint. function getPickerInputElement(identifier) { var peoples = ''; var tags = document.getElementsByTagName('DIV'); for (var i=0; i < tags.length; i++) { var tempString = tags[i].id; if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){ var innerSpans = tags[i].getElementsByTagName("SPAN"); for(var j=0; j < innerSpans.length; j++) { if(innerSpans[j].id == 'content') { peoples += innerSpans[j].innerHTML + ';'; } } return peoples; } } return null; } //fonction on click sur le bouton d'inscription, on recupére le controle people picker et on rajoute l'utilisateur courant // pour finir on cache le bouton par la suite pour eviter les doublon dans le controle. function register(){ var registered = getPickerInputElement('ff9'); if(registered != null){ registered = registered + ';' + userInfoObj.Name; } else { registered = userInfoObj.Name; } setPickerInputElement('ff9', registered); $('#inscription').hide(); return; } //fonction pour vérification si l'utilisateur courant est deja inscrit à la formation ou pas function check_registered(user){ var peoples = getPickerInputElement('ff9'); var tab_people = peoples.split(";"); for(var i=0;i < tab_people.length;i++){ if(tab_people[i] == user){ $('#inscription').hide(); return; } } } //fonction de verification si les inscriptions sont toujours ouvertes ou pas. //Si oui on affiche le bouton, sinon on affiche un message. function check_date(){ var fullDate = new Date(); var datemax = $('#datefin').html(); var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1); var currentDate = fullDate.getDate() + "/" + twoDigitMonth + "/" + fullDate.getFullYear(); if((new Date(datemax).getTime() < new Date(currentDate).getTime())) { $('#inscription').hide(); $('#msgerrorregist').show(); } } //on met le controle people picker sur le mode readonly pour eviter la modification par les utilisateurs, la modification //se fait uniquement par l'administrateur de la liste. $(document).ready(function(){ //init $('#msgerrorregist').hide(); var theInputTitle = getTagFromIdentifierAndTitle('ff9'); theInputTitle.disabled = true; theInputTitle.readonly = 'readonly'; check_registered(userInfoObj.Title); check_date(); }); </script>
Veillez à bien modifier les url vers vos javascripts et les name de vos inputs.
Etape 5:
Modifiez votre formulaire DispForm comme vous le souhaitez à l’aide de SharePoint designer.
Rajoutez également dans cette page le bouton d’inscription ainsi que le message de fin d’inscription.
<input type="button" id="inscription" name="inscription" value="M'inscrire à cette formation" onclick="register();" /> <span id="msgerrorregist" name="msgerrorregist" style="font-size:x-small;color:red">Les inscriptions sont terminées.</span>
Etape 6:
Enregistrez tout, testez et validez!
Cette solution utilise donc le javascript, mais on peut très bien imaginer en faire une solution déployable. Chose que je ferais surement mais pour SharePoint 2013.
En espérant que cette astuce vous aidera, en attendant SharePointez bien 😉
mars 4, 2014 @ 11:53
Bonjour,
Y-a-t’il un moyen de limiter le nombre de participants?
mars 26, 2014 @ 11:21
Bonjour à vous,
Oui en effet il est très facile d’adapter la méthode décrite.
Il vous suffit par exemple de rajouter une colonne à votre liste avec le nombre max de participant.
Puis de la même maniére aller vérifier que ce nombre n’est pas atteint.
Si besoin je peux prendre un peut de temps pour faire l’adaptation et la partager.
mai 26, 2015 @ 11:35
Bonjour,
J’essaye de réutiliser cette méthode dans sharepoint 2013 online. N’étant pas un expert, j’ai effectué toutes les étapes, une seule me pose problème « Vérifier les name de vos input ». Que faut-il modifier et ou trouver l’info ?
mai 28, 2015 @ 11:09
Bonjour à vous,
Avec l’inspecteur de code de votre navigateur, pointez le champs concerné ou vous mettez les noms des gens peoplepicker et repérez l’ID du controle.
De cette façon, dans le javascript vous n’avez plus qu’a mettre le bon ID. le code fonctionnera parfaitement.
Je penses faire dans quelques semaines une sharepoint App pour SharePoint 2013 qui fera exactement ce qu’explique mon tutoriel et sera alimenté par la suite si besoin.
Dès ça publication je posterai un article, tenez vous au courant 😉
Valentin
juin 9, 2015 @ 6:28
Désolé, je m’y connais très mal en javascript et globalement code. Quels sont les endroits qu’il faut modifier dans votre javascript du coup ?
L’ID peut-il avoir cette forme ? : ctl00_ctl40_g_caec594f_fe3d_4428_92e8_e9898c133c24_ctl00_ctl05_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv
juin 10, 2015 @ 7:48
Bonjour à vous, ah effectivement sans le minimum de connaissance c’est un peu compliqué ^^
Justement je suis entrain de travailler en ce moment sur une Sharepoint App qui intégre ce mécanisme qui sera sur le store dans les prochaines semaines.
Sinon clairement, vous devez remplacer dans le code le « ff9 »
Avec l’inspecteur de code de votre navigateur, inspectez le people picker et naviguez dans les éléments enfant jusqu’a ce que vous trouviez un élément avec un ff quelque chose.
Une fois trouvé, si par exemple le votre est ff2, il suffit de remplacer ff9 dans mon code par ff2.
Normalement, tout devrais fonctionner ensuite.
Bien à vous,
Valentin
septembre 25, 2015 @ 12:00
bonjour
je suis sous SharePoint 2013 et je voudrais faire un calendrier de formation avec nombre de place restant disponible aces formulaire d’ inscription et vous citez Justement je suis entrain de travailler en ce moment sur une Sharepoint App qui intègre ce mécanisme qui sera sur le store dans les prochaines semaines.
avez vous fait un exemple pour apprendre la méthode je suis débutant
merci
septembre 25, 2015 @ 12:51
Bonjour à vous,
Oui en effet, un peu de retard dans la publication de celle ci mais elle est bien en cours de développement et sera en ligne ASAP. Je ferais un article sur celle ci via le blog.
Que sous entendez vous par apprendre la méthode?
L’application sera très basique en utilisation, c’est justement pour éviter de mettre les mains dans le code que je la développe. Vous n’aurez qu’a l’installer puis l’utiliser.
Bien à vous,
Valentin
septembre 8, 2016 @ 8:30
Bonjour
Avez vous abouti sur votre app pour sharepoint 2013?
Merci pour votre réponse et pour ce partage!
novembre 3, 2016 @ 8:53
Bonjour à vous, Non désolé par manque de temps je n’ai pas pu encore finaliser l’application SP2013. C’est dans ma todo list mais j’espère pouvoir la finaliser au plus vite ainsi que certain articles qui sont en attente de publication sur le blog. Désolé pour ce délais…
janvier 11, 2017 @ 11:31
Bonjour Je suis très interessé par votre application, est-elle en ligne?
Bien à vous,
Anthony
janvier 25, 2017 @ 8:36
Bonjour, non c’est en cours.
Elle sera dispo en source libre sur codeplex et certainement sur le sharepoint store.
Bien à vous,
Valentin
janvier 26, 2017 @ 10:30
Bonjour,
Auriez-vous une solution sans SharePoint Designer, qui est interdit chez mon client?
Merci d’avance!
février 7, 2017 @ 5:01
Bonjour à vous,
Vous pouvez effectuer l’implémentation dans une farm solution ou une SharePoint App tout dépend la version de SharePoint que vous utilisez. Mais étant donné que nous manipulons des contents page qui sont donc en base donnée ça me parait compliquer de faire cela sans SharePoint designer ou un autre outil.
Sachez que j’ai travaillé sur une SharePoint App que je dois finaliser et publier sur le store qui intègre ce qui est décrit dans l’article prêt à l’emploi.
Je n’ai pour le moment pas récupéré mes machines donc je dois encore patienter.
Bien à vous
février 13, 2017 @ 10:55
Bonjour Valentin,
Merci pour la réponse!
Faites-moi signe quand votre solution sera prête, elle devrait intéresser mon client.
Cordialement,
Thierry
février 13, 2017 @ 11:16
Bonjour à vous,
Pas de soucis, je ferais un article la dessus.
Dans un premier temps une app SP2013 sera publiée sur le sharePoint store et par la suite un WSP certainement via codeplex.
Bien à vous,
Valentin
mai 31, 2017 @ 2:28
Bonjour,
Dans sharepoint 2013, je ne trouve pas lâID du contrôle peoplepicker commençant par « ff » même avec « inspecter » du navigateur.
Cordialement.
Pierre
mai 31, 2017 @ 2:45
Bonjour à vous,
Pourtant il est bien la, il est obligatoirement ajouté afin que SharePoint puisse fonctionné correctement sauf si votre formulaire à subit des customisations.
Je vous conseil par le biais de l’inspecteur du navigateur de soit faire une recherche soit regarder a lâintérieur des éléments afin de le trouver.
Bien à vous,
Valentin
mai 31, 2017 @ 2:58
L’ID est t’il bien sur la page de modification de l’element « EditForm.aspx »? Pouvez vous me donner le nom de la balise contenant l’ID?
Cordialement.
Pierre
mai 31, 2017 @ 3:25
Ce sont des éléments input. Vous en avez un type= »hidden » qui contient les gens et un autre pour la saisie en type= »text »
mai 31, 2017 @ 3:48
Je n’ai pas d’input sur la page DispForm.aspx contrairement à votre 3eme capture d’écran
mai 31, 2017 @ 3:59
Il faut via SharePoint Designer créer un nouveau formulaire de liste en sélectionnant formulaire d’affichage de façon à en régénérer un.
juin 2, 2017 @ 10:21
Merci j’ai trouvé l’ID avec sharepoint designer 2013 et en visualisant le code d’un nouveau formulaire editform
juin 2, 2017 @ 11:08
Ce que je ne comprends pas c’est comment vous faites apparaître « Participants inscrits » en mode édition sur votre dispform.
Cordialement.
Pierre
juin 5, 2017 @ 9:22
En créant une nouvelle colonne à votre liste cela ajoute un nouveau champs à vos formulaires. Le champs est donc ajouté automatiquement, nous appliquons juste du javascript pour effectuer ce que nous voulons faire.
Cdt,
valentin