SharePoint Client Object Model ( SP - COM )
Part - 3

[ How to deal with a Web-part ]

In my previous posts I have talked about the Theoretical background of Client Object Model with ECMA script and Basic coding Techniques and syntax you need to know. through this I'm gonna concentrate on a real world business with COM. 

How to work with,Web part Properties.

One of the main concern when you implement functionality with ECMA script or COM, "How to access web part properties". and is there any direct syntax for this in COM, so the straight forward answer is "NO". there is no direct syntax which been implemented to access Web part properties. So then how to do that. 

 So as we know this is how you implement a web part property or added it inti the Web part,

[Category("Latest News Properties")]

[WebPartStorage(Storage.Shared)]

[WebDisplayName("List Name")]

[DefaultValue("NewsStory")]

[Description("This property will hold the name of the Latest News list")]

[XmlElement("ListName")]

[Personalizable(PersonalizationScope.Shared)]

[WebBrowsable(true)]

public string ListName { get; set; }

So the List name is our web part property which we need to access through COM script. Fist we need to have a Hidden field to fill the required property data. So that Hidden filed need to bee initialized in CreateChildControls() event

protected override void CreateChildControls()

{

       base.CreateChildControls();

       HiddenField hiddenWebPartProperties = new HiddenField() { ID = "hiddenFeaturedNewsWebPartProperties" };

       this.Controls.Add(hiddenWebPartProperties);

}

Then in the OnPreRender Event we filled the required Property data as follows, 

//Construct JSON using the WebPart Properties

 string webPartPropertiesJSON = string.Empty;

 webPartPropertiesJSON = "{" + "'ListName':'" + this.ListName + "', 'HtmlMarkup':'" + this.HtmlMarkup + "' }";

                     ((HiddenField)this.FindControl("hiddenFeaturedNewsWebPartProperties")).Value = webPartPropertiesJSON;

Here you can see I have added two properties Called List Name and Html Mar-up in to the hidden filed as Filled it like Jason Object.

Then we Initialize a Start - up Script and Called the Function called "InitializeFeaturedNews" by passing it the Web part Client ID. 

so Why we pass the Client ID will tell you.

Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Format("InitializeFeaturedNews('{0}'); ", this.ClientID), true);

so after that it all-together something like this,

[ToolboxItemAttribute(false)]

       public class NewsStoryArea : System.Web.UI.WebControls.WebParts.WebPart

       {

              [Category("Latest News Properties")]

              [WebPartStorage(Storage.Shared)]

              [WebDisplayName("HTML Markup URL")]

              [DefaultValue("/Style Library/UserControlMarkup/NewsStoryArea.htm")]

              [Description("This property will hold the URL of Latest News Html Markup")]

              [XmlElement("HtmlMarkup")]

              [Personalizable(PersonalizationScope.Shared)]

              [WebBrowsable(true)]

              public string HtmlMarkup { get; set; }

              [Category("Latest News Properties")]

              [WebPartStorage(Storage.Shared)]

              [WebDisplayName("List Name")]

              [DefaultValue("NewsStory")]

              [Description("This property will hold the name of the Latest News list")]

              [XmlElement("ListName")]

              [Personalizable(PersonalizationScope.Shared)]

              [WebBrowsable(true)]

              public string ListName { get; set; }

             

              protected override void CreateChildControls()

              {

                     base.CreateChildControls();

                     HiddenField hiddenWebPartProperties = new HiddenField() { ID = "hiddenFeaturedNewsWebPartProperties" };

                     this.Controls.Add(hiddenWebPartProperties);

              }

              /// <summary>

              /// Raises the <see cref="E:System.Web.UI.Control.PreRender"/> event.

              /// </summary>

       /// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>

              protected override void OnPreRender(EventArgs e)

              {

                     base.OnPreRender(e);

                     //Construct JSON using the WebPart Properties

                     string webPartPropertiesJSON = string.Empty;

                     webPartPropertiesJSON = "{" + "'ListName':'" + this.ListName + "', 'HtmlMarkup':'" + this.HtmlMarkup + "' }";

                     ((HiddenField)this.FindControl("hiddenFeaturedNewsWebPartProperties")).Value = webPartPropertiesJSON;

                    

                     Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Format("InitializeFeaturedNews('{0}'); ", this.ClientID), true);

              }

Now Let's move to the Script Part. In your Script you have InitializeFeaturedNews Function 

function InitializeFeaturedNews(webPartClientId) {

ExecuteOrDelayUntilScriptLoaded(function () { ExecuteFeaturedNewsProcedure(webPartClientId); }, "sp.js");

}

There you passed the Web part client ID into the ExecuteFeaturedNewsProcedure function after loading the Sp.js

function ExecuteFeaturedNewsProcedure(webPartClientId) {

  

  var hiddenField = $('#' + webPartClientId + '_hiddenFeaturedNewsWebPartProperties')[0];

  var webpartProperies;

  if (hiddenField != undefined && hiddenField != null) {

        webpartProperies = eval("(" + hiddenField.value + ")");

     }

       //Getting List Properties from webpart property

   var featuredNewsHtmlMarkup = webpartProperies.HtmlMarkup;

   var newsListName = webpartProperies.ListName

      

}

This Is the way to extract Web part Property values from the hidden Filed Jason object. so then other things are like accessing list and all we have discussed in previous part.

Best way to Implement COM web part.

There is a different between the implementation of normal Web part and the web part which using COM, it's kind of a best practice or a good technique. please refer following attachment.

As you see we are not implement HTML markups in the Code front as we do in Visual web parts. so HTML markup is a separate file. through the Script code we bind it to the web part and all JS HTML CSS files are include into the web part so only you activate Web-part feature those will be uploaded. please refer following Attachment.

 And All other files like JS(ECMA Script), CSS and HTML files need to be added as contents so those will be copied into the feature.

in the Code level you can call then and Embed them as like this,

/// <summary>

              /// Raises the <see cref="E:System.Web.UI.Control.PreRender"/> event.

              /// </summary>

              /// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>

              protected override void OnPreRender(EventArgs e)

              {

                     base.OnPreRender(e);

                     //Construct JSON using the WebPart Properties

                     string webPartPropertiesJSON = string.Empty;

                     webPartPropertiesJSON = "{" + "'ListName':'" + this.ListName + "', 'HtmlMarkup':'" + this.HtmlMarkup + "' }";

                     ((HiddenField)this.FindControl("hiddenFeaturedNewsWebPartProperties")).Value = webPartPropertiesJSON;

                     var styleLibraryPath = string.Format("{0}/Style Library", SPContext.Current.Site.ServerRelativeUrl.TrimEnd('/'));

                     Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Format("InitializeFeaturedNews('{0}'); ", this.ClientID), true);

                     var scriptSlides = "ScriptSlides";

                     if (!Page.ClientScript.IsClientScriptIncludeRegistered(scriptSlides))

                     {

                           var script = styleLibraryPath + "/Scripts/slides.min.jquery.js";

                           Page.ClientScript.RegisterClientScriptInclude(this.GetType(), scriptSlides, ResolveClientUrl(script));

                     }

                     var scriptFeaturedNewsMarkupKey = "ScriptFeaturedNewsMarkup";

                     if (!Page.ClientScript.IsClientScriptIncludeRegistered(scriptFeaturedNewsMarkupKey))

                     {

                           var script = styleLibraryPath + "/Scripts/Client Object Model/NewsStoryArea.js";

                           Page.ClientScript.RegisterClientScriptInclude(this.GetType(), scriptFeaturedNewsMarkupKey, ResolveClientUrl(script));

                     }

                     var css = new CssRegistration();

                     css.Name = styleLibraryPath + "/ShawCor/en-us/NewsStoryArea.css";

                     css.After = CssAfter;

                     this.Controls.Add(css);

              }

              protected override void Render(HtmlTextWriter writer)

              {

                     this.RenderContents(writer);

                     writer.Write(

@"

<div id=""containerFeaturedNews"">

</div>

");

              }

and HTML mark-up can be Added using Jquery in this way,

//Getting List Properties from webpart property

       var featuredNewsHtmlMarkup = webpartProperies.HtmlMarkup;

       if ((_spPageContextInfo.webServerRelativeUrl) != "/") {

              featuredNewsHtmlMarkup = ((_spPageContextInfo.webServerRelativeUrl) + featuredNewsHtmlMarkup);

       }

       $.get(featuredNewsHtmlMarkup, function (data) {

              $(webPartControlId + ' #containerFeaturedNews').html(data);

              GetFeaturedNewsListItems(webPartControlId, webpartProperies);

       });

So the final result will be something like this.

ok That's It ... 

HAPPY CODING