Unveiling the Layers: Delving into the Sitecore Tech Stack: Master Details Using Sitecore SPEAK

I started to learn sitecore SPEAK and I want to share my first hello world application I did using sitecore SPEAK.

In this application I just used a WFFM to save a form as a sitecore item and I used sitecore SPEAK application to display these sitecore data items as master details page.

I will go through the second part of my application which is the part of displaying the data as master detail using Sitecore SPEAK.

At the beginning if you are intending to go through this you need to know that I used Sitecore 8.0 rev. 150427 (Update-3) and Sitecore Rocks visual studio plugin.

Step 1:

Let’s start with the first step which is creating a SPEAK Application, In this step you need to navigate to your Core database then to the path /sitecore/client/Your Apps.

Step2:

Create a New folder with any name you want for your application as you can see from the following screen shot I called my folder WFFM.

Step 3:

Now it is time to create Speak-ListPage to your application folder; to do that just right click on the folder and Add new item, search for Speak-ListPage template enter your page name I called mine “WFFMViewer”.

Now you will have a speak page with a list of default renderings to see that just select the newly added item and ctrl+u and you will see the following:

You can browser your new page using a link like http://YourSite/sitecore/client/Your%20Apps/YourSPEAKAppName/YourSPEAKPageName.aspx

Step 4:

To apply the master detail I will use a custom SPEAK components although this can be done using a standard SPEAK Component.

As sitecore keep most SPEAK Files under “sitecore/shell/client” so we need to create the same folder structure in our solution code, And see the “CustomCompnents” folder that I created under the my application name folder.

See the following screen shot:

Step 5:

Before proceeding with this please make sure that your solution code is connected to correct sitecore instance, which you can do that by right click on you solution project and from the sitecore menu you can connect or modify the existing connection.

Now let’s add a sitecore SPEAK component by right click on the previously created folder in solution explorer and add new item, in this window under sitecore option you can see “SPEAK” options from which you can select “SPEAK Component” as you can see from the following screen shot:

As your visual studio is connected to sitecore instance that you already configured, it will ask you for the sitecore root item that you want to create the component under, As you can see in the following screen shot:

This Speak component “WFFMDataList” will be our master in which we will display all data we have, Then we need to create another component “WFFMDetails” which will be our details.

Sitecore SPEAK component is a user interface element that consist of the following:

View: Which is an MVC view ( .cshtml ) file that you can see with the previously created component which handle the interactions between the model and the browser.

Model: Represent the data structure of the SPEAK component.

For more information about the above you should read the following blog post By Jakob Christensen:

http://www.sitecore.net/learn/blogs/technical-blogs/jakob-christensen/posts/2014/04/04-components.aspx

Now you can see that under your root folder in visual studio you have three files related to your SPEAK Component ( cshtml and two JS files the model and the test script)

Step 6:

In this step we will create a controller that have a methods that will be expose as AJAX requests to retrieve the required data from sitecore, cast it into a custom entity and return it as a Json object.

Entity Class:

Get Master Data method (GetWFFMData):

Get Detail Data Method (GetWFFMDetails)

Step 7:

In this section we will fill our master component with all the data that will be retrieved from our controller method “GetWFFMData”.

To do that we will show you both .cshtml view code and the .js model file in those I will use knockout.js model and syntax to bind our custom entity class.

Before going further if you have no previous knowledge I suggest you have a quick look to the basic syntac of knockout.js in the following knockoutjs , I also suggest try the live tutorial they produce it is very useful check this learn.knockoutjs.

Let’s see our JS model file:

What you need to focus on is the ajax call to our controller and the set of the “WFFMparam” variable.

Let’s have a look to our .cshtml file:

What you need to focus on is getting the parameter “WFFMParam” and the knockout.js syntax to render the data and the “Detailes” button that hold the id of the current item in which by clicking the button it will reload the page passing the current id.

Step 8:

In this section we will fill our details component with data item that the master passed it id and this will be retrieved from our controller method “GetWFFMDetails”.

Let’s see our JS model file:

Basically the above code receive the id passed as query string from the master and do Ajax call to our controller to get the data item details and fill call a method that fill the related control..

Let’s have a look to our .cshtml file:

The above is just contains a labels to hold the details of the current data item.

Step 9:

At the end what you need to do is adding the above two components to the SPEAK page presentation to do that browse to your list page created under your SPAEK app in sitecore access the list page design ( Control + U ) then click add rendering and search for your Custom components and add them to “ApplicationContent.Main” placeholder.

See the following screen shot: