How to create a PageCode

SPEAK 1.2 is not realeased yet

The pageCode is a special component because it is required by a SPEAK page in order to work. No pageCode, No SPEAK.

This pageCode component is devided in 2 parts. The server side pageCode and the client side pageCode.

In SPEAK 1.2, the server side pageCode remains unchanged.

Create a pageCode server-side

You need to create a C# class and derive from PageCodeBase located in the Sitecore.Speak.Client.dll

This is useful when you want to change the component parameters based on values in the query string or based on some session,...

To access your component, you just need to add a property with the same name in the class and give it the type "Rendering". SPEAK will automatically set the appropriate rendering to that property for you.


namespace MyApplication  
  using Sitecore.Mvc.Presentation;
  using Sitecore.Web;
  using Sitecore.Web.PageCodes;

  public class MyPageCode : PageCodeBase
    public Rendering MyComponent { get; set; }

    public override void Initialize()
      string referer = WebUtil.GetQueryString("someQueryString");


To use this server-side pageCode, all you need to do is to reference this class to the PageCodeTypeName parameter of your page code. The format used is "[Full class name], [Assembly Name]".

Create a pageCode client-side

The duty of the pageCode is to make your component together when bindings are not enough.

The pageCode in 1.2 did not change a lot compared to SPEAK 1.1.

We have provided a cleaner syntax and some helper methods.

Here is the syntax for creating a main pageCode.

Sitecore.pageCode( {  
  initialize: function () {
    this.MyComponent //will be your component
  doSomething: function () {

} );

Some new helpers methods:

FindComponent"MyComponent") //finding component, even if nested  

FindApplication"SubApp") //finding application, even if nested  

Replace { el: "#placeHolder", html: 'someHtml' }, callback );  

This will update the application automatically (removing and creating necessary document in your pageCode).

Append { el: "#placeHolder", html: 'someHtml' }, callback );  

Prepend { el: "#placeHolder", html: 'someHtml' }, callback );  

Remove DOMElement );  

To use your custom pageCode, you need to assign the Parameter "PageCodeScriptFileName" to point to your file.

Event capabilities"change", callback);"change");"customEvent");  

Exchanging custom events:

The application (pageCode) is shared among all the components owned by the pageCode. This mean that if you want to create custom events, you could use the (in your component) to act as an aggregate root. Make those events as generic as possible in order to avoid coupling components together too much.

comments powered by Disqus