Rendre le ruban « Format text » disponible dans une page d’application SharePoint

En travaillant sur l’intranet d’un client dans SharePoint, j’ai eu besoin de permettre d’éditer du texte avec le ruban de SharePoint dans une page d’application. J’ai pensé que ça pourrait être utile à d’autres personnes alors j’ai décidé de partager la solution.

Premièrement, il est important de noter que le comportement désiré s’applique sur un div et non une boîte de texte. Donc, une fois la page d’application créée, il faut ajouter un div à l’endroit où on veut le champ pour éditer le texte. Ce div doit avoir les classes suivantes : « ms-rtestate-field ms-rtestate-write ms-inputuserfield ms-long ».  Il faut aussi lui assigner « this.contentEditable=’true’; » pour l’événement onclick.

Div éditable - html du div

Lors d’un postback, le div perd le texte saisi. Il faut donc implémenter une façon de conserver le contenu. Il faut donc ajouter un contrôle hidden dans la page et l’utiliser pour conserver le texte. J’ai donc ajouté les fonctions JavaScript suivantes :

Code js pour conserver le contenu du div au reload

La fonction « TransfererHtmlDansControleCache » est appelée par l’événement onclick du bouton « Enregistrer » dans ma page d’application. Dans mon cas, j’ai besoin de conserver le contenu dans le property bag afin que l’utilisateur puisse l’éditer à nouveau quand il retourne dans la page d’application et afin de pouvoir y accéder de partout.

Il est important aussi de rendre le ruban visible dans la page en ajoutant le code suivant dans la fonction « Page_Load » :

Code c# pour afficher le ruban

Et voilà, c’est maintenant prêt à être utilisé !

Div éditable - Pas le focus

Afin que l’utilisateur puisse rapidement repérer la zone d’édition, j’ai ajouté un contour au div. Comme vous pouvez le constater, le ruban n’est pas disponible au départ. Il faut cliquer dans le div pour que celui-ci apparaisse. L’onglet pour insérer certains contrôles est également disponible.

Div éditable - Onglet Format textDiv éditable - Onglet Insert

Le bouton « Aperçu » permet d’afficher le contenu qui a été enregistré dans le property bag. Comme vous pouvez le constater, les styles s’appliquent bien lorsque le texte est affiché dans une autre page.

Exemple du popup

Bon développement !

Référence

http://blog.bonzai-intranet.com/analysthq/2014/09/cross-browser-richtext-editor-solution-for-sharepoint/

Advertisements

Google Chrome to go!

Vous avez besoin d’un autre navigateur que IE mais vous ne pouvez pas en installer un autre parce que vous n’avez pas accès à internet ? Parce que vous n’avez pas les droits nécessaires ? Parce que c’est un serveur de production du client ?

Gardez espoir, il y a une solution : Google Chrome Portable !

google_Chrome

Google Chrome Portable consiste en un répertoire contenant les fichiers nécessaires avec l’exécutable du navigateur. Il vous suffit d’aller chercher le fichier d’installation ici et de l’exécuter pour qu’il crée le répertoire. Vous pouvez ensuite le mettre sur une clé usb ou le partager de la façon dont vous le désirez. Il ne vous reste qu’à exécuter l’application pour pouvoir naviguer avec Google Chrome.

Enjoy!