Reading Time: 4 minutes

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 😉

| | , , | , , , , , , | 25 Comments