CMS

Sitecore SPEAK Basics

About Sitecore SPEAK

Introduction: 

Sitecore SPEAK is a component based framework for building applications in Sitecore. SPEAK stands for “Sitecore Process Enablement & Accelerator Kit”. It is a latest frame work to develop Sitecore applications with a consistent interface.

To build an application using SPEAK we need Sitecore Rocks and visual studio. Currently SPEAK does not support building web sites. Any application which can build on SPEAK will resides in sitecore core database. Sitecore provides rich set of library for building SPEAK Application. It enable reuse of UI elements.

Creating a sample application using SPEAK controls:

SPEAK applications resides in the core database, under /Sitecore/client. We can see a folder called Your Apps where our own applications can be created. We can also create our own applications root item under /Sitecore/Client.

There are three main page types available – Dashboard, List, and Task.

Creating a sample list page application – Current Openings using Sitecore Rocks.

Create a folder “Current Openings” under “Your Apps” and right-click on the “Current Openings” folder & select the New Item  option from Add menu or you can simple use CTRL+A to add the new item. Now type ListPage in the search bar & you can see results in the below area are filtered : Select the branch template of ListPage from this path: /sitecore/client/Business Component Library/Templates/Branches/Applications/ListPage. It is suggested to use the branch templates, as these will create a PageSettings item for us and provide some default presentation details. If we see Current Openings item’s presentation details (select the item in Sitecore Rocks and press ctrl+u). You will see that it has a layout and a bunch of components assigned to placeholders – just like a normal Sitecore page:

Because the page lives in the core database, there is no need to publish. To browse the page simply give the path of the core database item path after localhost http://yourhostname/sitecore/client/Your%20Apps/CurrentOpenings/Current Openings into my browser, I can see the my list page.

The PageCode component loads the base Javascript and CSS that a page needs. We can right-click on the rendering and choose Edit Rendering, which opens the .cshtml file – you can see that it adds the scripts to the top of the page.

Changing the Browser title:

There is a BrowserTitle field on my CurrentOpenings item which changes browser title.

Changing the header text:

Double-click on the rendering from presentation details and change Text property.

Creating list items in master database:

Create a new template Careers with following fields:

JobRole – SingleLine

Qualification – SingleLine

Experience – SingleLine

Create content items based on above template.

Adding Data Source rendering to our Speak Application:

Go to presentation details of our application and add SearchDataSource.

Provide values into Database=”master” and RootItemId=”ID” of the folder where we created list content items in master DB”. Add a ListControl to the ApplicationContent.Main placeholder and open its properties. In the Items dropdown, find {Binding Datasource.Items}. Datasource is the ID name of our data source item.

Adding ListControl and column fields for ListControl:

Add a list control under page settings and add column fields (using column template) under list control and mention the column text and data field for all the columns.

Give the ID of ListControl (where columns are created) to the ListControl (where we added in presentation details) as its data source.

Add an Icon to the Launch page to browse the SPEAK application:

Create a new item under /sitecore/client/Applications/Launchpad/PageSettings/Buttons/Tools.

Fill the fields, Text = TA Digital Openings and Link = /sitecore/client/Your Apps/CurrentOpenings/CurrentOpenings.

Finally content editor looks like this:

Dashboard having a link TA Digital Openings to open our Application:

This is how our application looks in browser:

Leave a Reply

*