Sitecore SPEAK For Beginners – Part 6 – Building Custom Component

This is part 6 of the blog series Sitecore SPEAK for beginners.

So far we learned how we can fetch data from master database using Sitecore SPEAK’s SearchDataSource component  & render it on the SPEAK app’s page using another SPEAK component called ListControl.

If you missed the last post, go ahead and check it.

As we know that Sitecore comes with number of SPEAK components & most of the time we just need to put all required components together & can easily build our app(with no or minimal code).

But if needed we can also create our custom component(s).

In this post we will learn how we can create custom component which we will use to fetch  Sitecore jobs & display them on our SPEAK app.

Alright let’s get started.
Open the Sitecore Rocks connection to the site.
Navigate to our app’s root folder.
Let’s create a folder under our ‘SitecoreJobsListing‘ page to keep our custom component.
I added an item(folder) named ‘Renderings‘ of  type SPEAK-RenderingsFolder template.


Now it’s time to create our custom component.
By this time we would need a Visual Studio project to work with.

If you haven’t created a project yet, go ahead & create one (I preferred empty ClassLibrary template to create the project).
Don’t forget to refer Sitecore.Kernel & Sitecore.Mvc libraries from the Sitecore website you are using to build SPEAK app.

I’ll use the SitecoreLearnings.Web project in Visual Studio.(which I created earlier to demo Sitecore Commands).

Sitecore keeps most of the SPEAK stuff under below physical path:

Now why I’m telling this is because as a best practice, we should try to follow same folder structure as Sitecore.

I not only created the same folder structure in our project to match the path above, but have more folders to put stuff related to our SPEAK app.


Notice that I’ve also created YourApps folder, because our app in Sitecore sits under YourApps folder.

I have added another two folders in the structure, one represents our SPEAK application’s root (ViewSitecoreJobs) & other one we will use to create our custom component(s)( I named it Renderings).

Alright now we our done with the folder structure.

Before we move forward, I would request you to connect our Project to our Sitecore website(Sitecore Rocks connection).
This blog by John West, explains how we can connect our project to Sitecore website.

I hope you connected the website to the Visual Studio project easily.

Let’s add a SPEAK component under the just created Rendering folder.
Right click to the folder & select Add->New Item or press CTRl+SHIFT+A.
Now expand the Sitecore node from left side pane & select Speak,it will list available SPEAK templates.
Choose SPEAK component & give it a name(I named “SitecoreJobsListing“) & Press OK.


We should see another modal window (that’s why I asked to connect our project to the Sitecore website) to create a Sitecore SPEAK rendering item for the SPEAK component we just created :


Select the Renderings folder we created under our app’s ListPage(SitecoreJobsListing) & press OK.

All done?you should see few files in our project under the Renderings folder:


Here we have one .cshtml(The MVC view) file & two javascript files(one of them is for knockout js view & model & other one is for writing tests).

All these files together makes our custom component.

Also In Sitecore, we have one item for our component under below path:
/sitecore/client/Your Apps/ViewSitecoreJobs/SitecoreJobsListing/Renderings


If you click this item & check it’s path field, it should point to the .cshtml file we just created.


I hope all looks good till now.

Open the SitecoreJobsList.cshtml file.It should look like this:


Notice that  the rendering variable adds a class for our component as well as it adds the knockout  JS view & model (SitecoreJobsList.js) to the required resources (don’t worry about these for now).
Let’s try to print ‘Hello World‘ from our custom component.

I’m putting the ‘Hello World!‘ text between the div tag & save the file (remember everything we would want to render should go under this div tag as it has one important attribute[@htmlAttributes] associated with it).

Now let’s add this custom component to our SitecoreJobsListing page’s Presentation Details.
While adding this custom component, I removed the SearchDatasource & ListControl components from the Design Layout which we added in previous posts.

Save the Design Layout & hit the page in browser.
I can see the ‘Hello World!‘ text on the page.


That’s it for now.
We will do more with the custom component in next part of the series.

Sitecore SPEAK For Beginners blog series:
In part 1  Create SPEAK Application.
In part 2 SPEAK Components.
In part 3 Rendering Parameters.
In part 4 Getting Data.
In part 5 Display The Data.
In part 6 Custom SPEAK Component.
In part 7 Rendering Parameters for Custom Component
In part 8 Initialize & Bind Rending Parameter Using Knockout.js
In part 9 Getting Data For Custom SPEAK Component.

If you any question/suggestion, please write in comments.
You can also connect with me on Twitter.