SPEAK

Use PageCode

Abstract

You use Pagecode to add business logic to SPEAK pages.

SPEAK has a PageCode component, which is required on all SPEAK pages. The main function of the PageCode component is to initialize ("bootstrap") the SPEAK page.

The PageCode components lets you add your own business logic to a SPEAK page. You can do this in two ways:

  • Use JavaScript PageCode

Consider whether you can implement JavaScript logic with Rules instead. Rules are easier to maintain over time.

  • Use C# PageCode

When a PageCode component initializes a page, it scans the page for components and initializes each component. As part of the component initialization, it stores a reference to the component in the current application object.

For example, if the page contains a TextBox control and this control has an ID of SearchTextBox, then PageCode creates a reference called Sitecore.app.SearchTextBox when it initializes the page. You can access the text property of the SearchTextBox in JavaScript:

var text = this.SearchTextBox.get(“text”);

When you work with PageCode script files, you have to edit the files in Visual Studio and you have to be able to open these files from Visual Studio Solution Explorer. Follow these steps:

  1. If you have not already created a solution file for your project in Visual Studio, do it now.

  2. Open the solution associated with your project.

  3. In the Solution Explorer, create a folder structure that corresponds to the item structure of your SPEAK page. You must include a folder that you give the same name as the page definition item.

To add JavaScript page code to your page:

  1. In Visual Studio Solution Explorer, right-click the folder that corresponds to the page that you want to add page code to and click Add, New Item…

  2. In the AddNew Item dialog, select SPEAK Page Code and enter a name that matches the definition item name:

    883732DA13FB4E8383B67F8989EB7527.png
  3. Click Add.

  4. Open the Edit Rendering Properties dialog for the PageCode component, and point the value of the PageCodeScriptFileName property to the file that you created.

You have now created a new JavaScript page code script file with the minimal required code:

define(["sitecore"], function (Sitecore) {
  var ListExample = Sitecore.Definitions.App.extend({
    initialized: function () {
    }
  });
  return ListExample
});

You can add the code that you need. You have access to the components in the page:

define(["sitecore"], function (Sitecore) {
  var ListExample = Sitecore.Definitions.App.extend({
      initialized: function () {
          this.DataSource.on("change:items", this.updateCount, this);
      },
      updateCount: function () {
          var items = this.DataSource.get("items");
          this.Text2.set("text", items.length + " items found");
      }
  });
  return ListExample;
});

The code works like this:

  • The this.DataSource.on("change:items", this.updateCount, this);: line calls the updateCount function when the items property of the component called DataSource changes.

  • The updateCount function retrieves the number of items from the component called DataSource and updates the text property of the component called Text2.

To create C# page code:

  1. In Visual Studio Solution Explorer, right-click the folder that corresponds to the page that you want to add page code to and select the Add, Class…

  2. Select Class and enter a name that matches the definition item name.

    0D252377AC0B46E691A6B5B0E4526C73.png
  3. Click Add.

Visual Studio creates a new C# page code script file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SPEAK.sitecore.client.Your_Apps.ListExample
{
    public class ListExample
    {
    }
}

The class must inherit from Sitecore.Web.PageCodes.PageCodeBase:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Sitecore.Web.PageCodes;
namespace SPEAK.sitecore.client.Your_Apps.ListExample : PageCodeBase
{
    public class ListExample
    {
    }
}

Inside the class definition, before the method definitions for each component that you want to reference in your code, add a line similar to the following:

public Sitecore.Mvc.Presentation.Rendering MyComponentId { get; set; }

where MyComponentId is the ID of the component on your SPEAK page.

You have to add the following references to Sitecore libraries to your solution:

  • Sitecore.Kernel

  • Sitecore.Mvc

  • Sitecore.Speak.Client