Sitecore SPEAK For Beginners – Part 4 – Getting The Data

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

In our last post we saw the uses of Rendering Parameters for SPEAK components, if you missed that go ahead & check out here.

In this post I’ll show how we can get the content from master database.
I have few sample items under the ‘Home‘ item in the master db.

Jobs_Listing_21

Let’s try to fetch these items in our SPEAK app.
As we know that Sitecore ships with many SPEAK components & it’s time to use them.
In Sitecore Rocks, navigate to our app’s ListPage:
/sitecore/client/Your Apps/ViewSitecoreJobs/SitecoreJobsListing [in core db].

Open the Design Layout (press CTRL+U).
Now let’s add a SPEAK component called SearchDataSource.

Jobs_Listing_22

The SearchDataSource component can fetch the Sitecore items from the given Sitecore database.

Open the Edit Properties dialog & let’s update two of the properties:

  • Database &
  • RootItemId

The Database property used to define the name of the database from where we want to fetch items.
Let’s put master in it as our content items lives under the master database.
The RootItemId property contains the ID of the Sitecore item where from it should start fetching items,so I copied the Home item’s id from master db & put that into the RootItemId property’s value.

Jobs_Listing_23

Save the Design Layout & open the page in browser.

Do you see items?
We will not see any items which SearchDataSource fetched from the given db & defined RootItemId, because:
The SearchDataSource component is only used to fetch items (as the name suggests, it acts only as a datasource).
Then how we wil render those items on the page?
We would need another SPEAK component to consume the SearchDataSource items & display on the page.

Before we do that let’s first make sure that SearchDataSource is actually fetching items.

To do so let’s verify below:
1. It’s rendering on the page with all required parameters:
When we add a component to the SPEAK app,it generates some html blocks on the page which will have component properties defined as the attributes .
To check it,open the HTML Source(I use Chrome,so inspect element works for me).
We should see the something like the below html on the page:

Jobs_Listing_24

If we look the above image closely,it has many attributes with data-sc- prefix,which basically contains the values of the different different  properties of that SPEAK component.
Verify that data-sc-root-id and data-sc-database attributes are being populated.

2. Item Web API is returning items:
Many SPEAK components uses Sitecore’s Item Web API to communicate with the website & SearchDataSource is no exception.

Open the Network Tab & refresh the page & we should see the Item Web APIs call:

Jobs_Listing_25

So this is an Item Web API request to the master db to fetch items from the root defined in &root parameter.

As we move to complex Sitecore SPEAK applications,we could see many Item Web API calls.
Try to open this URL in new tab & see it should return JSON of items.

If you are able to get the JSON in new tab,congests you were able to get the data from master db.

In next post we will display this data(JSON collection of items) on our list page with the help of another SPEAK component.

Stay tuned & Happy coding.

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.