Try Now
More in this section
Blogs RSS feed

Building a module for Sitefinity (part 7) : Using JavaScript in your modules

by Ivan Osmak
After a short :) break, I'm back on track with the "Building a module for Sitefinity" series. I have implemented the departments managment in Control Panel and in doing so I've needed to use some JavaScript, so in case you are unsure about how to do that with custom module, I'm going to explain that in this post. Also, at the end of the post I've provided a link for downloading the project in it's current state. Apart from implementing department management, I've also modified the ControlPanel and CommandPanel classes as described in the Improvements in modules architecture in Sitefinity blog post.

So without further ado here is a walk through of using JavaScript in your modules.

The problems

When using JavaScript in a custom module, obviously we cannot include it the same way we would usually do in a normal page with a <script> tag. So to overcome that we'll need to include JavaScript as a resources and register it in the control that will be using that JavaScript file.

Second problem that we will face is the fact that we can't use the inline script for obtaining the id's of objects (e.g. <%# treeView.ClientID %>).

The solutions

So the first thing we are going to do is add a JavaScript file in our project (for example in Sample.Contacts project, you'll see I've added the CommandPanel.js to Resources folder). Then you'll need to click on that file and in Properties change the Build Action property from Content to Embedded Resource. Now the second thing you need to do is add this file as WebResources to your project. To do that, open the AssemblyInfo.cs file (it's in the Properties folder of your project) and register the resource as I have (take a look at AssemblyInfo.cs of Sample.Contacts project). Make sure you use System.Web.UI namespace in this file. So far, so good.

Now, a good idea in JavaScript is to make an object that will carry all the ClientID's of the controls you need to use and create that object in the OnPrePrender event. So, here is how I've done that for the CommandPanel in my JavaScript file.

function CommandPanel(elementId, departmentsContextMenuId, contextMenuTreeNodeId, departmentsTreeviewId)
this.elementId = elementId;
this.departmentsContextMenuId = departmentsContextMenuId;
this.contextMenuTreeNodeId = contextMenuTreeNodeId;
this.departmentsTreeviewId = departmentsTreeviewId;

CommandPanel.Create = function (elementId, departmentsContextMenuId, contextMenuTreeNodeId, departmentsTreeviewId)
commandPanel = new CommandPanel(elementId, departmentsContextMenuId, contextMenuTreeNodeId, departmentsTreeviewId);

Then in the CommandPanel.cs class which will use this JavaScript file in the OnPrePrender method I'm first registering my JavaScript file and then creating a new instance of the CommandPanel object by sending all the ClientID values of the controls I'm going to use in JavaScript.

protected override void OnPreRender(EventArgs e)

// we need to register the javascript file here and initialize it with the client ids of the needed controls
if (this.Page != null)
this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Sample.Contacts.Resources.CommandPanel.js");

String.Format("CommandPanel.Create('{0}', '{1}', '{2}', '{3}');",
), true);

And that's all. Then from any other functions (e.g. ContextMenuItemClicking) I can easily get the reference to any of the controls I need to.

The Contacts module in it's current state you can download from here. I've also included the templates and my web.config for this project (ContactsWebsite folder).

1 comment

Leave a comment
  1. Shawn Clabough Dec 03, 2007
    This and part 4 need to be added to the "Building a pluggable module" category in the right-column.

    Leave a comment