Sitecore SPEAK For Beginners – Part 2 – Speak Components

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

In previous post we created our SPEAK app, which has one ListPage.

In this blog we will have a look to the Presentation Details of this ListPage.
To open the Presentation Details of an item in Sitecore Rocks, select the item & press CTRL+U or right-click the item & select the design layout from task menu.

Jobs_Listing_6


This will open the new tab in Visual Studio showing Layout & all the rendering defined on the item.

Jobs_Listing_7

By default a ListPage have below renderings defined:
PageCode
List
GlobalHeader
GlobalLogo
NavigationPanelToggleButton
GlobalFooter
ApplicationHeader
Text
ApplicationContentNM
Menu
Border

Many of these renderings are ‘scaffolding‘ & they define the overall structure of the page e.g. List ApplicationContentNM components.

These ‘scaffolding‘ renderings also define placeholders within them self, so we can put other renderings at the right place.

Other than these scaffolding components, we have one important rendering assigned here – the PageCode component.
The PageCode component is used to place all required css & javascript files.
This component is also used to communicate between different page components – we will learn more about this later.

Editing the Browser Title of our page:
If you navigate back to the ListPage in browser, you should see the browser title as below:

Jobs_Listing_8

To change the browser title, navigate to the ListPage item in Sitecore Rocks & open it by double-clicking.

This item has BrowserTitle field, as shown in the below image:

Jobs_Listing_9

Go ahead & update the value, save the item (CTRL+S).
Refresh the page in browser & we should see new browser title. (we do not need to publish Sitecore item changes as we are working with core db).

Editing the Page Heading:
I’m sure next thing you would want to update is the Page Heading.
The page heading text is rendered by a component called HeaderTitle.
This is a Text component, means it is used to render some static text like the page heading etc.

To edit the page heading text, open the Design Layout(Presentation Details) by selecting the ListPage item & press CTRL+U.
Now if you double click on the HeaderTitle component, it should open the Edit Rendering Properties dialog as shown in below image.

Jobs_Listing_10

The Header Title which is a Text component has a Text property under the ‘Appearance‘ section.
This property is used to render the text, so let’s update the value here.

The other highlighted property is the Id of the component, which we can modify if we wish to.
It’s useful in the case where we have bunch of Text components as Sitecore by default will use Text1, Text2 notation to name multiple components of same type.

Close the dialog & save the Presentation Details.
Refresh the page in browser & you should see the updated heading.

Enough for now, in next blog we will learn about Rendering Parameters & how we can drive data for our application.

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.