[FR]SharePoint 2007 – Ajouter un bouton d’inscription à un événement dans une liste calendrier

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.

jquery

spjs-utility

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!

1 2 3 4 5

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 😉

6 comments to [FR]SharePoint 2007 – Ajouter un bouton d’inscription à un événement dans une liste calendrier

  • AG  says:

    Bonjour,
    Y-a-t’il un moyen de limiter le nombre de participants?

    • iox  says:

      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.

  • agirard2015  says:

    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 ?

    • iox  says:

      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

  • agirard2015  says:

    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

  • iox  says:

    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

Give your comment