Sitecore SPEAK For Beginners – Part 7 – Creating Rendering Parameters for Custom Component

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

In our  last post, we created our own custom SPEAK component & rendered the “Hello World” text using that custom component on our SPEAK app’s SitecoreJobsListing page.

One of the post in this blog series talks about the importance of Rendering parameters in SPEAK & how we can make use of those Rendering Parameters which ships with Sitecore SPEAK.

In this post we will create Rendering Parameters template for our custom component.

I’ll create the Rendering Parameters template under the custom component item, which is located at :
/sitecore/client/Your Apps/ViewSitecoreJobs/SitecoreJobsListing/Renderings/SitecoreJobsList

Navigate to the above path in Sitecore Rocks & press CTRL+A (shortcut to add new item(s)).
Now type ‘template‘ to filter items in the opened window & select the option ‘Template‘  as shown in below image:

Jobs_Listing_48

Let’s name it ‘SitecoreJobsList-Parameters‘ as it will serve Parameters for our custom SitecoreJobsList component.

We will now define a new field JobItems on the just created Rendering Parameters template.
This field will serve as a rendering parameter to our component & we will later use this parameter to hold the information about Sitecore jobs.

Jobs_Listing_49

Tip: Since this is a blank template item, you won’t see the Data field section unless you define it.

Notice that JobItems is a single-line text field & it’s a shared field which means the value of this field will be same across all the language versions.

Next step is to refer this Rendering Parameters template to our custom component.
To link the custom component to the Rendering parameters follow these steps:

  • Copy the item id of ‘SitecoreJobsList-Parameters‘ template.
  • Double click the custom component (SitecoreJobsList) to edit it’s fields.
  • Scroll down & find the field ‘Parameters Template‘ & paste that copied id.
    If you didn’t copy the id of the Parameters template item, you can use the ‘Browse‘ button to select the rendering parameter template.Jobs_Listing_50See when we paste the id Sitecore retrieves the path of our rendering parameters template.

Alright we have done too much & it’s time to review what we have done so far:

  • Created Rendering Parameters template under the custom component.
  • Defined one single-line text field ‘JobItems‘ on that Rendering Parameters template.
  • Referred the Rendering Parameters to the custom component by assigning the id in the component’s Parameters Template field.

If you performed all above steps correctly, this JobItems property should be now available on the SitecoreJobsList component.

To verify, navigate to SitecoreJobsListing page & open the Design Layout(CTRL+U) & see the properties of SitecoreJobsList component:

Jobs_Listing_57

If you see the JobItems property under data section, Congratulations you have successfully created the Rendering Parameters template & linked it on our custom component.

In next post we will see how we can make use of this rendering parameters template.

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.