SharePoint Web Part Basics

All web parts are based on the same basic ingredients. When I started developing on my first web parts I did some extra work to find out the best practices. This post is meant to work as a simple reference and to answer some of the questions I had when I first started.

What web parts events should I use?

There are many different opinions on this. This is mine:

  • Never put code in the constructor as it might be called even if the object is later never used
  • In the OnInit initialize any controllers etc. you might have
  • In the CreateChildControls method create your controls, but don’t populate them. Note that it is a common practice to define all the controls and the wepart layout in a separate control class to keep the web part clean.
  • In the OnPreRender load the data into the controls and setup any async task you might need (they will be executed next)

How to register JavaScript?

There are many ways to include JavaScript on a page, the right one depends on your need. To include a script to to be executed directly after page load use the RegisterStartupScript combined with the ExecuteOrDelayUntilScriptLoaded (SOD) or _spBodyOnLoadFunctionNames.push functions:

public static class SharePointScriptHelper
{
public static string ExecuteOrDelayUntilScriptLoaded(Control control, string script, string after)
{
string script = string.Format("ExecuteOrDelayUntilScriptLoaded(function(){{{0}}}, '{1}');", script, after);
ScriptManager.RegisterStartupScript(control.Page, typeof(Page), "Script_" + control.ID, script, true);
}
}
SharePointScriptHelper.ExecuteOrDelayUntilScriptLoaded(this, "alert('Hello world!');", "SP.js");

The first mentioned takes care of the correct load order of scripts.

To include e.g. a library that is not meant to be directly executed use e.g. the RegisterClientScriptInclude method:

ScriptManager.RegisterClientScriptInclude(this.Page, typeof(Page), "MyScriptNamespace", ScriptFileUrl);

The point in using the ScriptManager is to avoid having the same script included multiple times, hence the key parameter in e.g. RegisterclientScriptInclude. The class offers a lot of functions that are worth taking a closer look at.

Note that is is a good practice to wrap you scripts in a “class”/namespace to avoid e.g. function name collisions with other scripts.

To easily include the web part id in your inline scripts you can use the ReplaceTokens function of the web part class to do this. It will simply replace tokens like e.g. _WPID_ with the correct property values.

How to include CSS on a page?

CssRegistration css = new CssRegistration();
css.After = "corev4.css";
css.Name = Settings.StyleSheetFileUrl;
this.Controls.Add(css);

I have not yet had a chance to test SharePoint 2013 to see if it works to refer to the corev4.css also in that version.

Where to define configuration parameters?

The web part definition file (yourwebpart.webpart) is definitely the only correct place. This way they the properties are fully customizable by the site owners when necessary.

Never store passwords in any file as they belong in the secure store service. You can prevent property values from being exportable for a simple way of hiding them.

How should I define my layout?

The most flexible and powerful way is to use XSLT for the rendering. You can implement it your self or inherit the DataFormWebPart class.

Where should I put the CSS, image and other files?

Put them in the appropriate SharePoint mapped folders. Always create a sub folder for you web part and give it a unique name e.g. based on the namespace of the main class.

How to do logging and debug?

Use the inbuilt framework. The most elegant solution would be to write your own service class deriving from the SPDiagnosticsServiceBase but note that it will need to be registered at deployment time.

public static class SPDiagnosticsServiceExtension
{
public static void WriteTrace(this SPDiagnosticsService service, string message, string categoryName, TraceSeverity severity)
{
SPDiagnosticsCategory category = new SPDiagnosticsCategory(categoryName, TraceSeverity.Unexpected, EventSeverity.Information);
service.WriteTrace(0, category, severity, message);
}
}

Usage

SPDiagnosticsService.Local.WriteTrace(ex.ToString(), "Web Parts", TraceSeverity.Unexpected);

I strongly recommend enabling the Developer dashboard and using the SPMonitoredScope to help optimize the performance of your web part.

That’s all for now, more to to come later.

Advertisements

Don’t go (Entity Framework) code first

Code first (Entity Framework) allows developers to forget about SQL, deploy schemas and have everything under source control. As long as you don’t think about the future all is just fine and dandy. But the life cycle of a solution and especially it’s database is only starting when it is first developed. The new Fluent Migrations framework and SQL Server Data Tools have got me thinking about what in the end would be the tooling that will retain its value also later in the life cycle.

Using code first getting started is easy and the initial deployment is close to zero effort. Unfortunately this is where the sunshine ends and the dark clouds appear. As time goes buy, the production database gets full with masses of business data and other systems start relying on all the views and schema. Some monday morning your boss asks you to to add a couple of columns, remove some depricated ones and maybe do some renaming while your at it. To be able to test your changes you of course start by copying a part of the production data to to the test server. Now then fun starts! You first edit your (code first) entities classes, then fire up SQL Server Management Studio to edit the database and finally give the changes a thorough testing. To finish off you prepare SQL scripts to get the production database updated. As this is all manual work, you find your self thinking that life could be easier – and so it can!

Imagine coding your schema first with Fluent Migrations, then letting the standard Entity Framework to generate your entities based on the database. Now, no mather what changes come you can always do them first by code, then let Visual Studio update the entities and finally deploy you changes without leaving your IDE. All the promises of code first, without code first. Oh happy days!

Dilemma of code first

Make your Windows 7 a little bit safer

Virus scanners and firewalls are like vitamins, they help you stay healthier but they don’t prevent you from getting sick. This other day I found the Antivirus virus rampaging on my laptop. Vulnerabilities in browser add-ins is the most common reason for viruses to get on your computer.  In my case there where suspicious files both in the Java and browser cache.

After removing the troublemaker with the scanner I had and running some online scanners just to make sure, I did what I should have done a long time ago to make my Windows a little bit safer:

  • First a made a separate admin account and removed the rights from my standard account. Windows will now prompt me for the admin password when necessary. Experts claim 80% of the know viruses will be stopped just by doing this. I had done it on my XP (never had a virus scanner on that old computer) but forgot about it when I upgraded.
  • I updated my Java to the latest version and then I disabled Java both from the Java console and the browsers. I also disabled the Java cache just to be sure. Best option would of course be to just remove the whole thing but I was not sure if I would need it later.
  • Then I installed Chrome as it’s claimed to be the safest browser and set it as default.
  • As a final touch I disabled the JavaScript support from my PDF viewer and disabled the Chrome internal one has I could not find any option to do the same there. I then used some safe PDF scripting examples available on the internet to test my configuration.

The evolution of web development

Now over 13 years back I worked as a professional web developer. In those times JavaSscript was just something used to validate forms and anything else (e.g. toggling the visibility of a element) was considered fancy and labeled as DHTML. Few weeks ago I got a email from a co-worker having problems with including inline JavaScript in a ASP.NET razor page – this got me on memory lane.

Back in the days the code to open a popup window could look like this

<p><a href="javascript:window.open('http://www.google.com','mypopup')">Open google!</a></p>

This not only displayes as a scary link in the browsers status bar but also is useless in browsers not running JavaScript. So quite quickly the developers shape up and started putting the code in a separate JS file and using the events available:

function popitup(url) {  window.open(url,'mypopup'); }
<a href="http://www.google.com" onclick="popitup(this.href);return false;">Open google!</a>

This was fine for many years. But then it became modern to write nonobtrusive code (keeping the scripting and visuals separate). Even if this in practice requires a lot more code frameworks like jQuery make it easy.

window.onload = function() {
var myPopupLink = document.getElementById('myPopupLink');
if(~myPopupLink) myPopupLink.onclick = function() { popitup(myPopupLink.href); return false; }
}
<a id="myPopupLink" href="http://www.google.com">Open google!</a>

What next?