SharePoint Client Object Model ( SP - COM )
Part - 3
[ How to deal with a Web-part ]
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
