lundi 27 juin 2011

Développer une WebPart de contenu avec une zone de texte riche

Développer une WebPart de contenu avec une zone de texte riche

Introduction :


Les WebParts de contenu existent nativement dans SharePoint 2010. Ce genre de Web Part permet d’insérer des textes riches avec une mise en style très facile à utiliser.

Toutefois, dans certains cas nous sommes amenés à développer une Web Part qui simule le même fonctionnement. En effet, j’ai eu récemment ce genre de problématique dont le besoin était légèrement différent de la WebPart par défaut de SharePoint. Le besoin du client consistait à développer une Web Part qui contient une zone de texte riche avec quelques champs. Par conséquent le développement était nécessaire !
A travers cet article, nous allons voir ensemble comment développer une Web Part avec une zone de texte riche.

Votre projet sous Visual Studio :


   L’une des nouveautés de SharePoint 2010 est le Visual Web Part. Dans ce projet, nous allons utiliser ce type de composant que le nous déployons dans notre ferme SharePoint. Pour se faire :
-          Allez dans Visual studio 2010.
-          Créez un projet SharePoint vide.
-          Choisissez le déploiement « Farm solution » et mentionnez votre site.
-          Ajoutez  une solution de type « Visual Web Part » et renommez-la en « VisualWebPart_ContentEditor ».

-          Cliquez F5 pour déployer la solution dans SharePoint 2010.
Une fois le déploiement effectué, votre nouvelle Web Part est ajoutée à la liste des WebParts proposées dans le ruban. Par défaut, le groupe d’appartenance est « Custom ». Vous pouvez changer ce dernier via le fichier « Elements.xml » :
  <Property Name="Group" Value="Custom" />

Voici le rendu final de la Visual Web Part (Mode visualisation) :

En mode édition, l’utilisateur doit avoir une zone de texte pour saisir son contenu. En plus, les onglets « Editing Tools », « Page Tools » et « Web Part Tools » doivent être activés lorsque vous cliquer sur « Click here to Edit ».



Voici ce que nous allons coder ensemble :
-          Une zone de texte en mode Edit pour la saisie avec un contour en bleue.
-          Activation des onglets d’édition de SharePoint dans le ruban.
-          Une zone de texte en mode Display pour afficher le texte saisi.
Nous allons commencer tout d’abord par le fichier cs de la Web Part. Insérez ces lignes de code dans « VisualWebPart_ContentEditor.cs »

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace WebPartContentEditor.VisualWebPart_ContentEditor
{
    [ToolboxItemAttribute(false)]
    public class VisualWebPart_ContentEditor : System.Web.UI.WebControls.WebParts.WebPart
    {
        // Visual Studio might automatically update this path when you change the Visual Web Part project item.
        private const string _ascxPath = @"~/_CONTROLTEMPLATES/WebPartContentEditor/VisualWebPart_ContentEditor/VisualWebPart_ContentEditorUserControl.ascx";


        //Méthode à supprimer
        //protected override void CreateChildControls()
        //{
        //    Control control = Page.LoadControl(_ascxPath);
        //    Controls.Add(control);
        //}


        // Variable globale pour stocker le contenu de la zone de texte
        private string _content;

        // Propriété de la webpart 
        [Personalizable()]
        public string Content
        {
            get
            {
                return this._content;
            }
            set
            {
                _content = value;
            }
        }


        protected override void OnInit(EventArgs e)
        {
            
            //Afficher la webpart sans titre et sans cadre   
            this.ChromeType = PartChromeType.None;

            //webpart exportable : utile pour voir la valeur de la propriété "Content" de la webpart
            this.ExportMode = WebPartExportMode.All;

            //Charger le user control
            VisualWebPart_ContentEditorUserControl _control = (VisualWebPart_ContentEditorUserControl)Page.LoadControl(_ascxPath);
            Controls.Add(_control);

           
        }

        
        /// 
        /// Méthode qui permet de sauvegarder la propriété de la webpart
        /// 
        /// public void SavePoperty(string strUpdatedContent)
        {
           
            if ((strUpdatedContent != null) && (this.Content != strUpdatedContent))
            {
                this.Content = strUpdatedContent;
                try
                {
                    SPWebPartManager currentWebPartManager = (SPWebPartManager)WebPartManager.GetCurrentWebPartManager(this.Page);
                    Guid storageKey = currentWebPartManager.GetStorageKey(this);
                    currentWebPartManager.SaveChanges(storageKey);
                }
                catch (Exception exception)
                {
                    Label child = new Label();
                    child.Text = exception.Message;
                    this.Controls.Add(child);
                }
            }
        }
    }
    
}


Maintenant, allez dans le User Control et modifiez « .ascx » pour insérer ces lignes de code :
<div id="divEmptyPanel" runat="server"></div>
<div id="divDisplayTexte" runat="server"></div>
<div id="divTexte" runat="server" visible="false" style="border: thin #a5cce4 solid;">
</div>

La première div sert à insérer le texte « Click here to Edit ».
La deuxième sert à afficher le contenu saisi par l’utilisateur « Mode Visualisation d’une page ».
La dernière permet de saisir du contenu « Mode Edition d’une page ».
Toujours dans le User Control, insérez dans le fichier « .ascx.cs » le code suivant :
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.SharePoint.WebPartPages;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;

namespace WebPartContentEditor.VisualWebPart_ContentEditor
{
    public partial class VisualWebPart_ContentEditorUserControl : UserControl
    {
        public VisualWebPart_ContentEditor ParentWebPart
        {
            get { return this.Parent as VisualWebPart_ContentEditor; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            base.OnInit(e);
            //On récupère la valeur de la variable cachée content
            string strUpdatedContent = this.Page.Request.Form[this.ClientID + "content"];

            //On récupère la méthode de sauvegarde du parent
            ParentWebPart.SavePoperty(strUpdatedContent);
           
            //Tester si la page est en mode Display : On affiche la div DisplayTexte
            if (SPContext.Current.FormContext.FormMode == SPControlMode.Display)
            {
                this.divDisplayTexte.InnerHtml = this.ParentWebPart.Content;

            }
            //Tester si la page est en mode Edit : On affiche la div Texte
            if (SPContext.Current.FormContext.FormMode == SPControlMode.Edit)
            {
                this.divTexte.Visible = true;
                this.divTexte.InnerHtml = this.ParentWebPart.Content;

            }

        }
        protected void Page_PreRender(object sender, EventArgs e)
        {
            if (SPContext.Current.FormContext.FormMode == SPControlMode.Edit)
            {
                //Enregistrement du hiddenfield associé à la div d'edition de texte riche
                this.Page.ClientScript.RegisterHiddenField(this.ClientID + "content", divTexte.InnerHtml);

                this.divDisplayTexte.Visible = false;

                this.divEmptyPanel.Style.Add(HtmlTextWriterStyle.Cursor, "hand");
                this.divEmptyPanel.Controls.Add(new LiteralControl("Click here to Edit"));
                this.divEmptyPanel.Style.Add(HtmlTextWriterStyle.TextAlign, "center");
                //Indique l'id de la div qui traite les retours-charriot
                this.divTexte.Attributes["RteRedirect"] = this.divTexte.ClientID;

                this.divTexte.Attributes["class"] = "ms-rtestate-write ms-rtestate-field";
                this.divTexte.Attributes["contentEditable"] = "true";
                this.divTexte.Attributes["InputFieldId"] = this.ClientID + "content";
                this.divTexte.Attributes["EmptyPanelId"] = this.divEmptyPanel.ClientID;
                this.divTexte.Attributes["ContentEditor"] = "True";
                this.divTexte.Attributes["AllowScripts"] = "True";
                this.divTexte.Attributes["AllowWebParts"] = "False";
                
                //Script pour sauvegarder le texte saisi dans la zone éditable
                string script1 = "RTE.RichTextEditor.transferContentsToInputField('" +
                                 SPHttpUtility.EcmaScriptStringLiteralEncode(this.divTexte.ClientID) + "');";
                Page.ClientScript.RegisterOnSubmitStatement(GetType(), "transfer" + this.divTexte.ClientID, script1);

                // Activation des zones d'édtition html dans le ruban (Page Edit)
                SPRibbon current = SPRibbon.GetCurrent(this.Page);
                if (current != null)
                {
                    current.MakeTabAvailable("Ribbon.EditingTools.CPEditTab");
                    current.MakeTabAvailable("Ribbon.Image.Image");
                    current.MakeTabAvailable("Ribbon.EditingTools.CPInsert");
                    current.MakeTabAvailable("Ribbon.Link.Link");
                    current.MakeTabAvailable("Ribbon.Table.Layout");
                    current.MakeTabAvailable("Ribbon.Table.Design");
                    if (!(this.Page is WikiEditPage))
                    {
                        current.TrimById("Ribbon.EditingTools.CPEditTab.Layout");
                        current.TrimById("Ribbon.EditingTools.CPEditTab.EditAndCheckout");
                    }
                }

                //Scripts nécessaires à l'édition texte riche
                ScriptLink.RegisterScriptAfterUI(this.Page, "SP.UI.Rte.js", false);
                ScriptLink.RegisterScriptAfterUI(this.Page, "SP.js", false);
                ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Runtime.js", false);
            }

        }
    }
}


Il ne faut pas oublier d’ajouter la dll « Microsoft.Web.CommandUI.dll » qui permet d’ajouter et d’activer les onglets d’édition dans le ruban de SharePoint.
Vous la trouvez dans le chemin suivant :
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI


Conclusion:


Nous avons vu à travers ce post comment développer une Web Part contenant une zone de texte riche qui pourra servir à plusieurs usages.
N’hésitez pas à me donner votre avis !


4 commentaires:

  1. code incomplet, comment vous pouvez acceder au DIV depuis du code serveur, camarche pas

    RépondreSupprimer
    Réponses
    1. Bonjour, on peut accéder à n'importe quel champ html depuis le code serveur en rajoutant tout simplement la propriété runat="server" avec un id.
      Merci de bien lire l'exemple ci-dessus où vous avez cette déclaration dans le fichier .ascx.

      Supprimer
  2. Très bon article ! Les explications sont correctes et ce module est très utile.
    Néanmoins, j'ai une petite question:
    Lorsque j'édite ma webpart, je vais modifier le champs Content dans mes propriétés de webpart. Les modifications ne sont pas prise en compte. Les seules modifications prises en compte sont les modifications que fait directement la zone de contnue de la page.
    J'ai du passer au travers de quelque chose !
    Savez vous quoi ?

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Essaye d'ajouter la WebPart dans une page vide qui ne contient aucun champ.

      Cordialement

      Supprimer