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

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

August 22, 2007 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

After a short :) break, I'm back on track with the "Building a module for Sitefinity" series. I have implemented the departments management 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)
{
base.OnPreRender(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");

this.Page.ClientScript.RegisterStartupScript(
this.GetType(),
"create",
String.Format("CommandPanel.Create('{0}', '{1}', '{2}', '{3}');",
this.ClientID,
this.container.DepartmentsContextMenu.ClientID,
this.container.ContextMenuTreeNode.ClientID,
this.container.DepartmentsTreeview.ClientID
), 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).

progress-logo

The Progress Guys

View all posts from The Progress Guys on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
d12fcc0bdb669b804e7f71198c9619a7
5 Questions Automakers Should Ask to Improve Asset Uptime
Download Whitepaper
 
SF_MQ_WCM
2018 Gartner Magic Quadrant Web Content Management (WCM)
Download Whitepaper
 
What-Serverless-Means-For-Enterprice-Apps-Kinvey
What Serverless Means for Enterprise Apps
Watch Webinar