Sitecore SPEAK For Beginners – Part 3 – Rendering Parameters

This is a blog series to learn the Sitecore SPEAK for beginners.

In the last post, we updated the text property of the Header Title component(of Text type) from the Design Layout & now we will do the same task in a different way- with Rendering Parameters.


In SPEAK almost all the components make use of the Rendering Parameters.
How does SPEAK components make use of Rendering Parameters ?
Let’s understand it with the HeaderTitle component.
As we know, the HeaderTitle component is a Text component.
And a Text component in SPEAK is a view rendering,which ships under below path (with all other standard components):
/sitecore/client/Business Component Library/Layouts/Renderings/Common

Jobs_Listing_11

Go ahead & navigate to the Text component & double click it.
This component has a .cshtml file(Text.cshtml) defined in the Path field.
Think this .cshtml file as any Sitecore Sublayout, which we may use to render dynamic(data from Sitecore) or/and static(hard coded in the file itself) content.

Jobs_Listing_13

If I now expand the Text item node,we would see the Text Parameter item(it’s Rendering Parameters Template) underneath it.

Jobs_Listing_12

And this rendering parameter template has the TextType & Text properties under Appearance section.
This is why any Text component (such as HeaderTitle in our case)gets TextType & Text properties under Appearance section, when we double click the HeaderTitle component in the Design Layout.

But wait….how the Text component is linked to the Text Parameters?
To get the answer, navigate back to the Text component & double click it.
Now scroll down & you will find a field on this item named ‘Parameters Template‘,this is the place where we can define the rendering parameters template for components.

Jobs_Listing_14

Q Does Rendering Parameters just used to show some properties on the component?
No,they are also used to populate those properties on the component.
Rendering parameters know what properties a component have,so it can also populate them.
Q How?
A This is situation where we need the PageSettings folder under the SitecoreJobsListing.

Navigate back to our list page & expand the node to open the PageSettings item,which was created with the ListPage itself.
Now we will create an instance of the ‘Text Parameter‘ under the PageSettings.
To do so press ‘CTRL+A‘  & in the modal window type ‘text parameters’ & Sitecore should filter the templates for us as shown in below image:

Jobs_Listing_15

Let’s name the parameters item as HeaderTitle-Parameters.
As soon as we press OK,Sitecore Rocks will not just create the item but will also open it to edit the fields.

Jobs_Listing_16

Alright,let’s modify the text field here & put the ‘View Sitecore Jobs’ in it as this make sense for our application.
How we will link this Parameter item to our component?
-Copy the item id of this rendering parameters item & navigate to the ViewSitecoreJobs page.
Open the Design Layout & double click the HeaderTitle component.
Paste that item id in the DataSource field :

Jobs_Listing_17

At this moment don’t forget to clear the text property from the component.
Close the dialog & save the Design Layout.
Refresh the page in browser & it should still render the header title even we cleared the text property on the component.

Update the value in the rendering parameter item to validate that the value is coming from the parameters item like I did.

Jobs_Listing_19

Jobs_Listing_18

 

Benefits of using the rendering parameters:
Multilingual Support .
Easily setup by default values for components.

So rendering parameters are a good way to render content for components which renders the static content(such as Button component).

What about driving data from actual content items(from master database)?
Well that we will learn in the next post.
Till then good bye.

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.

Advertisements