Sitecore SPEAK For Beginners – Part 8 – How to use Custom Component’s Rendering Parameters

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

In our last post we created the Rendering Parameters template for for Custom Component & defined one JobItems property on it.

In this post we will see how we can use this Rendering Parameter to render some value on our Custom Component.

To use this JobItems property in our component’s view rendering (.cshtml) file, please follow below steps:
1. Open the SitecoreJobsList.cshtml file.
2. Locate the below code:

 var htmlAttributes = rendering.HtmlAttributes; &

3 Paste below line just before it:

 rendering.GetString("jobitems", "jobitems");

Jobs_Listing_51

The GetString() method here is used to read the parameters of the component & stores in a variable((in our case jobitems).

At this stage I would recommend to read & try some basic getting started examples of “knockout js“.

I hope you have gone through the basics of “knockout js” & now let’s have an example here as well.
Let’s keep it very simple to render some static text within the <span> tag first using the “knockout js“.
To do so I’ll define one empty span tag:

<span></span>

Now to bind this tag with “knockout js“, we will add an attribute called “data-bind” on the span tag.

<span data-bind=""></span>

The value of this attribute is used to set the properties of html tags (such as text & visible properties) with static data (see example below) or with “knockout js” model properties (will show example later).

Alright enough talk, let me know show how we can bind knockout js with html tag:

<span data-bind="text:Say Hello to knockout!"></span>

The example above will render the “Say Hello to knockout!” text within the tag(will add screen shot later :-)).
What if we want to bind our jobitems Rendering Parameter?
I’ve alter the above example to bind the jobitems parameter:

<span data-bind="text:jobitems"></span>

Jobs_Listing_54

Here we are setting the text attribute to the value of the jobitems variable.

Save the view rendering & lets check if this renders something or not.
When I hit our app’s SitecoreJobsListing page in the browser, nothing I got one javascript error :

Jobs_Listing_52

To get rid of this error we would need to initialize our jobitems var in the SitecoreJobsList.js as below:

Jobs_Listing_53

Let me explain what we we are doing here:
1. We are defining our code in the initialize method.

initialize: function (options) {
}

2. In next line we are caching the reference of this into another variable named app, which represent our component.

app = this;

3. Finally we are initializing model’s jobitems property with empty value.

app.set("jobitems", "");

The javascript error on our page should be gone now.

Now instead of  initializing the jobitems with the empty value, let’s put some static text:

app.set("jobitems", 'Initial Value');

And I can see this text is rendered after the Hello World!:

Jobs_Listing_56

That’s it for now.
We will continue to build our custom SPEAK component in next  blog.

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.