Expertise SharePoint 2013, 2010 et 2007.

Expertise SharePoint 2013, 2010 et 2007.

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 !


jeudi 23 juin 2011

S’attacher à l’évènement de sauvegarde d’une page SharePoint

S’attacher à l’évènement de sauvegarde d’une page SharePoint





Dans plusieurs cas vous aurez besoin de gérer l’évènement de sauvegarde de votre page. En effet, le cas que j’ai rencontré consiste à gérer les données qui sont saisies par l’utilisateur dans une zone de texte pour effectuer un certain traitement.

Si vous avez des sauvegardes particulières à faire ou des traitements spécifiques qui ne sont pas pris en compte par le bouton « Sauvegarder la page » de SharePoint, vous pouvez gérer cet évènement en utilisant l’évènement SPContext.Current.FormContext.OnSaveHandler :


protected override void OnInit(EventArgs e)
{
base.OnInit(e);
// ajouter l'évènement de sauvegarde uniquement dans le mode New et Edit d'une page
if ((SPContext.Current.FormContext.FormMode == SPControlMode.New) || (SPContext.Current.FormContext.FormMode == SPControlMode.Edit))
SPContext.Current.FormContext.OnSaveHandler  = new EventHandler(MyHandler);
}
protected void MyHandler(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid)
// do actions before save 
// do the save if required 
SPContext.Current.ListItem.Update();
// or you can save the item using this line of code either 
//SaveButton.SaveItem(); 
// do actions after save 
}
else
{
// do actions instead of save 
}
}

vendredi 18 mars 2011

WebCast - TechDays : Code Contract










Get Microsoft Silverlight



");

jeudi 27 janvier 2011

Techdays 2011

Bonjour tout le monde,
J'aurai le plaisir de co-animer une session aux techDays dédiée à Code Contracts avec
Gilles Tourreau (MVP C#).
La programmation par contrat (ou Code Contracts) est une nouveauté du Framework .Net 4.0.
Ce concept vous permet de définir des contraintes au niveau de votre code et de détecter les éventuelles erreurs à la compilation et à l'exécution.
Je vous invite à assister à notre session pour acquérir des nouvelles idées sur l'amélioration de vos programmes.
Accéder à la page officielle de la session sur Code Contracts