SPEAK 2.0 Part 3 - PageCode

For any SPEAK application, PageCode is the required component. PageCode initializes the SPEAK application.

PageCode serves two purposes,

• It allows you to write business logic for your SPEAK application.
• Sets which SPEAK version to use to render the applications.

NOTE: There are two versions available as of now. SPEAK 1.1 and SPEAK 2.0. We will be using SPEAK 2.0 in our examples

You can write business logic for your SPEAK application using PageCode component. You can do it in two ways.

• Javascript PageCode

• Javascript business logic is easy to maintain over time and makes application more responsive
• Prefer this approach if you don't have security constraint over business logic

• C# PageCode

• Sitecore gives you provision to write C# code also for writing business logic for your SPEAK application

When PageCode initializes the page, it initializes all the SPEAK components on the page and stores it in the page object so that you can access those components and access their properties and hook to their events to write your business logic.

Example App Continuation...

Let's add a PageCode on our example app from previous article.

• Right click on the DemoSpeakApp item and open layout details wizard.

• Click on Add Rendering button and search for PageCode rendering and select the one under /sitecore/client/Speak/Layouts/Renderings/Common folder.

• After you drop PageCode on the page, notice the placeholder. By default, it gets added to the Page.Code placeholder.
  

NOTE: If you are using Speak-EmptyLayout as a layout, you may need to change this placeholder to Page.Body placeholder because Speak-EmptyLayout doesn't contain Page.Code placeholder.

More Info on Layouts SPEAK 2.0 Part 2 - Page Layouts

• Now, double click on the PageCode rendering added on page. It will open the rendering properties panel.

• SpeakCoreVersion parameter is required. This tells which SPEAK version you are building your application with. Select SPEAK 2-x for our application.
  

Property	Description
AssetsLoadingType	OPTIONAL: It can be one of the following. Development Mode CDN Mode Minified Mode Bundled Mode
PageCodeScriptFileName	OPTIONAL: This is where you can specify the path of the Javascript file which contains your business logic
PageCodeTypeName	OPTIONAL: You can specify your C# code type which contains your business logic here. It should be in the format of Sitecore.Custom.DemoSpeakApp, Sitecore.Custom
SpeakCoreVersion	REQUIRED: It could be either SPEAK 1-1 or SPEAK 2-x. This tells which SPEAK version your application is built with.

• Let's add Javascript file for writing business logic for our SPEAK app. Create a JS file named DemoSpeakApp.js in the solution. Notice the naming convention and the location in the Sitecore solution.
  

TIP: It is always a good practice to maintain the same folder structure and naming convention in Sitecore content tree and Sitecore development solution root.

• Paste this code in the DemoSpeakApp.js file

   define(["sitecore"], function (sitecore) {
    var demoSpeakApp = sitecore.Definitions.App.extend({
        initialized: function () {
            //Your Business Logic Here
        }
    });
    return demoSpeakApp;
   });

• As you can see in the code, you can hook your business logic in initialized event of the SPEAK app.
• Now lets configure this JS in our SPEAK application. Double click on PageCode to open rendering properties and set this JS path in the PageCodeScriptFileName property

NOTE: I will update this article with C# equivalent PageCode example later

Alright, till now we are done with setting up PageCode in our SPEAK app. Next we will add Header Controls to our DemoSpeakApp.

Until then keep SPEAKing Sitecore  🙂