Sitecore SPEAK – A quick start

Posted on

SPEAK or Sitecore Process Enablement & Accelerator Kit is a framework to quickly and easily create a custom application in Sitecore Experience Platform. In this blog post, we are going to create an app that displays some Sitecore items in table format. Please note that the goal here is to get SPEAK App running as quick as possible and explanations are summarized to a link for further reading.

Prerequisite

  • Basic Sitecore development knowledge
  • Visual Studio 2013 and above
  • Sitecore Rocks
  • Up and running Sitecore instance – We are using  version 8.1 rev 160519(Update 3)

Let’s Get Rocks rolling

Launch Visual studio and head to Sitecore Explorer.

  • Right click on Connections and click new connection

1

  • Keep the data provider as Hard Rock Web Service and fill in the rest of the information

2

  • Click OK to establish the connection. If you are prompted to update, please do so before connecting to the website

Now that we have our connection ready let’s create the APP

Creating the App

Before we create the app, we need to know what type of SPEAK App suits our needs. You can read about them from here. For this blog, we favor ListPage because it best matches our requirement.

  • On your instance open Core database and navigate to /sitecore/client/Your Apps. This is the default location that Sitecore wants you to create your app (but you don’t have to)
  • Right click on the folder and select New Folder option and name it MyFirstApp – this will be our working directory
  • Now Right click on MyFirstApp folder and select add -> new item (or press Alt + Insert).
  • In the Add New Item dialog search for ListPage and select the ListPage item under /sitecore/client/Business Component Library/Templates/Branches/Applications. Name it LandingPage and press OK. (Why a branch? Because they have many default values that help us start faster)

3

  • Now open the newly created ListPage item and change the Appearance -> BrowserTitle field value to “This is where it all started”.

Since we all are fans of rewarding work, let’s head to http://YourInstanceName/sitecore/client/Your%20Apps/MyFirstApp/LandingPage and view the result of our hard work. Yeah, it’s pretty much nothing because there was no hard work. If you are wondering what is that “List Page Title” on your new app, proceed to the next session.

Let’s Beef it up

Now that we have the page, it’s time to add our stuff in there. The plan is to display a set of values in table format so let’s start with creating the items holding our values.

  • Using Sitecore Rockes, open master database and navigate to /sitecore/templates/User Defined folder. That’s where we add our custom templates
  • Press Alt + Insert to open the Add New Item Dialog
  • Search for Template and select the Template item under /sitecore/templates/System/Templates/Template category.

4

  • Name it ListItemsTemplate and Press OK
  • Give it a set of name and data type. Note that these Fields will be our actual columns in our table.

5

Now that we have our templates, we need to create a set of fake data to be displayed.

  • Using Sitecore Rockes, open master database and navigate to /sitecore/content/Home.
  • Right click on the Home Item and add a new folder. Name it ListControlData
  • Select the ListControlData folder and press Alt+Insert
  • Find the new template we just created by searching for ListItemsTemplate
  • Give it a name and press OK
  • Open the new item and set the fields values
  • Create multiple items using the ListItemsTemplate under the ListControlData folder

6

Now that we have our dummy data, we got to display them. We need two more items in our SPEAK app to be able to do so.

Firstly, we need a DataSource. If you don’t know what that is please take a look at this articleSearchDataSource is very useful. Currently, we need it to to feed our items into a ListControl (or simply our table). So let’s create it.

  • Open core database and navigate to /sitecore/client/Your Apps/MyFirstApp/LandingPage
  • Right-click on LandingPage and select Task ->Design Layout
  • Click on Add Rendering on top left corner
  • Search for SearchDataSource and select the item under /sitecore/client/Business Component Library/version 1/Layouts/Renderings/Data/SearchDataSource. We are using SPEAK version 1 for this post.

7

  • Click OK to close the dialog.

The SearchDataSource is now created and waiting to be configured. There are two ways of configuring a data source. The right way and the wrong way.

The right way is when we create a separate SearchDataSource Parameters item and set it as the data source for our SearchDataSource. This way we can make our item extensible and easy to maintain.

The wrong way is when we change the SearchDataSource properties without any Parameter item.

To keep this post simple, we follow the wrong way. It can be used for testing purpose but never use it in production.

  • Open master database and navigate to /sitecore/content/Home/ListControlData folder and copy it’s item id.
  • Double-click on the new SearchDataSource Item to open the item properties.
  • Past ListControlData folder item Id in Data->RootItemId properties.
  • Set the Data->Database property to master since our items are located in master database.
  • Save changes in LandingPage.layout

Done with data source. Now let’s create our ListControl which is our table

  • In LandingPage.layout click on add Rendering
  • Search for ListControl in Select Rendering Dialog
  • Select the ListControl Item under SPEAK Core 1-1 version

8

  • Click OK to Close the dialog

Unfortunately, there is no wrong way of configuring a ListControl. Therefore, we need to create a ListControl Parameter item for it

  • In Core database navigate to /sitecore/client/Your Apps/MyFirstApp/LandingPage/PageSettings
  • Press Alt+Insert and search for ListControl
  • Find the ListControl Parameters. Name it as MyListParam and press OK.

9

MyListParam will be our table column container. Now let’s add some column into it.

  • Select MyListParam and press alt+insert
  • Search for columnfield and Give it a name
  • Press OK to add the new Column
  • Open the new item and set HeaderText field value with the text you wish to display on column header
  • Set DataField value to the name of a field in your ListItemsTemplate (we created it earlier in this post). The value from the template will be displayed as you will see later on.

12

  • Create as many columnfield as you desire. Ideally, it should match the number of fields in your data template (ListItemsTemplate)

11

And finally, we need to tweak our ListControl property to read the parameters.

  • Navigate to /sitecore/client/Your Apps/MyFirstApp/LandingPage
  • Right click on LandingPage and selct Task->Design Layout
  • On LandingPage.layout select ListControl
  • Past MyListParam item id into Behavior->DataSource perporty of your ListControl
  • set the Data Bindings ->Items property to {Binding DataSource.Items} – This will tell ListControl your items are your data source items.
  • set the Behavior -> PlaceholderKey property to ApplicationContent.Main so the ListControl is placed at the right side of the page.

Yes. The moment we all were waiting for is here. Now head to http://YourInstanceName/sitecore/client/Your%20Apps/MyFirstApp/LandingPage and see the result of your effort.

One more thing,

List Page Title is still there and it’s annoying, right? let’s head back to LandingPage.layout and find the HeaderText Rendering. Change it’s Appearance->Text property to “My page, My title :p” and save the changes.

13

Notes

  • Do you see the extra empty line at the first row? That’s there because SearchDataSource returns the item container (ListControlerData folder) also as a data item. You need to use a SearchPanel Config item to fix that. Read Thomas Comment on this article.
  • Do you see the Date time value in basic format?

I am not gonna load you with more information here. This post is aiming to lift you up and leave exploring SPEAK capability to you. Try to create parameter item for renderings we created and Item and explore their fields to achieve more goals.

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *