Using scForm.postRequest in your custom applications in Sitecore

I have previously advocated for using XAML SheerUI when developing custom applications and dialog for Sitecore. However, XAML is not always the answer, especially if you wish to use the amazing ComponentArt WebUI components that you get for free with Sitecore.

Take a look at this application. No one can see that this isn’t a standard Sitecore application (the application is taken from a Danish project and displays all pages that is assigned to a user):

Custom Application

Custom Application displaying pages assigned to the current user

OK, so making .aspx pages for Sitecore applications is not a no-go. But how do we interact with Sitecore from our WebControls? We use the scForm JavaScript prototypes that Sitecore have developed.

But let’s begin with the beginning. This is the application I wish to develop: The application contains a text field and a button. You insert a Sitecore Item ID into the text field, and by clicking the button, the Content Editor must display the selected item:

Custom Application Protptype

Custom Application Protptype

In order to create the application you must:

  • Go to the CORE database.
  • In /sitecore/layout/Layouts/Applications, create a new Layout.
  • Assign a new .aspx page to the layout.
  • In /sitecore/content/Applications, create a new Application template.
  • Assign the layout that you created to the presentation of the Application.
  • In /sitecore/content/Documents and settings/All users/Start menu/Left/, create a new Application shortcut.
  • In the Application field on the Application shortcut template, choose the application you created earlier.

The application I created is named MyPrototypeForm and look like this:

<%@ Page Language="C#" AutoEventWireup="true"
    Inherits="Prototype.Presentation.MyPrototypeForm" %>
<%@ Register Assembly="Sitecore.Kernel" Namespace="Sitecore.Web.UI.HtmlControls" TagPrefix="sc" %>
<%@ Register Assembly="Sitecore.Kernel" Namespace="Sitecore.Web.UI.WebControls" TagPrefix="sc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head id="Head1"  runat="server">
    <title>Prototype Dialog</title>

    <sc:Script ID="Script1" Src="/sitecore/shell/Controls/Sitecore.js" runat="server" />

    <script type="text/javascript" language="javascript">
      function btnClickMe_onClick() {
        var id = document.getElementById("ItemID").value;
        scForm.postRequest("", "", "", "item:open(id="+id+")");
    <form id="form1" runat="server">     

      <sc:AjaxScriptManager ID="AjaxScriptManager1" runat="server"/>
      <input type="text" id="ItemID" />
      <asp:Button ID="btnClickMe" runat="server"
                  Text="Click Me!"
                   OnClientClick="btnClickMe_onClick()" />

Here is the key areas:

  • I have registered Sitecore.Web.UI.HtmlControls and Sitecore.Web.UI.WebControls. These 2 namespaces contains the codebehind for the sc:Script tag and the sc:AjaxScriptManager.
  • You need to register the /sitecore/shell/Controls/Sitecore.js javascript. This script contains the scForm JavaScript prototype.
  • You need to ass the sc:AjaxScriptManager. This scriptmanager makes the AJAX connection between the scForm JavaScript and the codebehind.
  • The button, btnClickMe calls a JavaScript function. This is the custom code you need to develop yourself. This example is very simple. It calls the btnClickMe_onClick JavaScript that calls the scForm.postRequest. This request is posted to your codebehind where you can perform codebehind actions.

The codebehind of the WebForm looks like this:

using System;
using Sitecore;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Shell.Data;
using Sitecore.Shell.Framework;
using Sitecore.Text;
using Sitecore.Web.UI.XamlSharp.Ajax;

namespace Prototype.Presentation
  public partial class MyPrototypeForm : System.Web.UI.Page
    protected override void OnInit(EventArgs e)
      Assert.ArgumentNotNull(e, "e");
      Client.AjaxScriptManager.OnExecute += Current_OnExecute;

    private static void Current_OnExecute(object sender, AjaxCommandEventArgs args)
      switch (args.Command.Name)
        case "item:open":
          string id = args.Parameters["id"];
          Item item = Client.ContentDatabase.GetItem(id);

          string sectionID = RootSections.GetSectionID(id);
          UrlString str2 = new UrlString();
          str2.Append("ro", sectionID);
          str2.Append("fo", id);
          str2.Append("id", id);
          str2.Append("la", item.Language.ToString());
          str2.Append("vs", item.Version.ToString());
          Windows.RunApplication("Content editor", str2.ToString());

  • On OnInit i hook up my custom handler to the Client.AjaxScriptManager.OnExecute event. This ensure that my custom function, Current_OnExecute is executed when the scForm.postRequest javascript is called.
  • The Current_OnExecute is a static function receiving the AjaxCommandEventArgs from the scForm.postRequest JavaScript. These args contains the name of the command being executed and the parameters.
  • In my example I open the Content Editor displaying the Item selected from my application.

You can use the scForm.postRequest without parameters like this:

scForm.postRequest("", "", "", "item:open");

Parameters are send using name/value:

scForm.postRequest("", "", "", "item:open(param1=value1,param2=value2)");

Adam Conn has made a blog post about Customizing With Large Data Sets where he explais how to use the ComponentArt Grid control. You can read more about this topic there.


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, c#, General .NET, Sitecore 6 and tagged , , , . Bookmark the permalink.

2 Responses to Using scForm.postRequest in your custom applications in Sitecore

  1. Pingback: Interesting WCM Blog Posts from around the Web « Blog posts from Oshyn, Inc

  2. Pingback: Script installation service

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.