Création d’un sous site avec JavaScript Object Model (JSOM)

SharePoint 2010 dispose d’une API coté client appeler JSOM (JavaScript Object Model) cette API permet la manipulation de SharePoint sans l’utilisation du code behind, pour plus d’information : http://msdn.microsoft.com/en-us/library/hh185006(v=office.14).aspx
Vous trouverez ici une liste des méthodes les plus utilisés en SharePoint Object Model et leurs équivalences en code client.

Dans ce billet je vais expliquer comment créer un sous site SharePoint en utilisant uniquement du JavaScript.

Pour commencer ajoutez un simple Content Editor web part puis joutez le code suivant pour créer un simple bouton HTML

<input id="Create" onclick="createSubsite()" type="button" value="Créer un sous-site"/>

 

Maintenant nous allons créer la fonction createSubsite() responsible de la creation de notre site.

function createSubsite() {

    var clientContext = new SP.ClientContext.get_current();
    var rootWeb = clientContext.get_web().get_webs();

    var webCreationInfo = new SP.WebCreationInformation();
    webCreationInfo.set_title('Mon nouveau sous site');
    webCreationInfo.set_description('Ce site a été créé en utilisant l API CSOM de SharePoint');

	// Configuration du langage par défaut à utiliser 
	// 1025 - Arabe
	// 1033 - Anglais
	// 1036 - Français
    webCreationInfo.set_language(1033);
    webCreationInfo.set_url('MonNouveauSousSiteUrl');
    webCreationInfo.set_useSamePermissionsAsParentSite(true);
    webCreationInfo.set_webTemplate('STS#0');

    var oNewWebsite = rootWeb.add(webCreationInfo);

	//save changes and generate callbacks
    clientContext.executeQueryAsync(
		// Fonction à invoquer si le code s’exécute avec succès
		Function.createDelegate(this, this.onQuerySucceeded), 
		// Fonction à indiquer en cas d’erreur
		Function.createDelegate(this, this.onQueryFailed));
}

 

Notre code fonctionne correctement mais nous pouvons l’optimiser pour offrir une expérience d’utilisateur (UX) plus agréable en ajoutant des messages de notifications, pour faire ça nous allons utiliser   des composants standards de SharePoint comme « WaitScreen » pour informer l’utilisateur qu’une tache s’exécute en tache de fond et la barre de Statut pour les messages en cas d’erreur ou de succès de l’opération.

 

// Variable global
var waitDialog;
waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Création du site en cours', 'Veuillez patienter votre site est en cours de création...', 76, 330);

 

function onQuerySucceeded() {
	waitDialog.close();
	var strStatusID = SP.UI.Status.addStatus("Information : ", "<img src='/_Layouts/Images/STS_ListItem_43216.gif' align='absmiddle'> <font color='#AA0000'>La creation du site est <i>terminer avec succès</i>. <a href='/MonNouveauSousSiteUrl'>vous pouvez y acceder</a></font>", true);
	SP.UI.Status.setStatusPriColor(strStatusID, "green");
}

 

function onQueryFailed(sender, args) {
	waitDialog.close();
	var strStatusID = SP.UI.Status.addStatus("Une erreur s'est produite lors de la création de votre site : ", "<img src='/_Layouts/Images/error16by16.gif' align='absmiddle'> <i>" + args.get_message() +"</i>", true);
	SP.UI.Status.setStatusPriColor(strStatusID, "red");
}

 

Résultat final :

 

 

 

Nizar Grindi

Consultant SharePoint chez Upper-Link
Consultant, passionné par #Scrum et les technologies Microsoft plus particulièrement #SharePoint. Certified #ScrumMaster et Fondateur du @TunisiaSUG

Vous aimerez aussi...

%d blogueurs aiment cette page :