SPEAK Up! Building Applications for the Sitecore Backend

What is SPEAK?

Sitecore Process Enablement & Accelerator Kit is a set of standard tools that allow developers to build custom applications for Sitecore users inside the familiar Sitecore backend.
SPEAK attempts to provide most of the tools a developer needs to build quickly and efficiently. SPEAK follows a convention-over-configuration paradigm, bringing together common JavaScript, HTML, CSS, and Sitecore tools that can be utilized without much customization. The full Sitecore API and databases are available on the server side, while Knockout, Backbone, and other JS libraries are available for client side development.

If you’ve ever used the “Select Media” dialog box in Sitecore, you’ve used code built on SPEAK. Bonus points: the Sitecore Launchpad itself is a SPEAK application.

What can SPEAK do?

Ideally, a SPEAK application extends Sitecore backend functionality or provides a unique perspective on existing data (for example: reporting). The base page types provided by SPEAK support this idea:

• Dashboard Page: displays an overview of data (graphs, images, maps etc.) and may provide a way to drill down into data
• List Page: provides data in a list format, and typically includes search/find functionality to narrow results
• Task Page: acts on data, either with a create, edit, or delete interface – this is where most data manipulation would take place

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

There is a large library of components that provide functionality for many type of actions. Any kind of custom functionality that benefits backend Sitecore users is ideal for a SPEAK app – especially since users can interact with apps without leaving the familiarity of the Launchpad, Content Editor, or Experience Editor.

Hello, World

Let’s get a super-simple “hello world” example set up. Our goal: configure a blank SPEAK application in Sitecore, add a text label, and create a shortcut on the Launchpad.
Sitecore Rocks for Visual Studio is required for building SPEAK applications. All of the following screenshots were taken in Sitecore Rocks.
A quick note: Sitecore 8.1 recently introduced SPEAK 2.0, but this tutorial features SPEAK 1.1 examples. Because this example is so simple, I will gloss over the differences between 1.1 and 2.0. In the future, as we dive further into SPEAK, I’ll highlight some of the advantages of 2.0.
Step 1 – Add a New Application Item
A SPEAK application, like most of Sitecore’s configuration, is stored in the core database. A SPEAK application requires certain sub-items and presentation items to be set up, and thankfully branch templates are available that have this configuration done for you. To create a List Page type:
Create a new item of branch template type ListPage (/sitecore/client/Business Component Library/version 1/Templates/Branches/Applications). Add this under /sitecore/client/Your Apps (although it can live elsewhere in the tree if you so desire).

At this point you can actually navigate to the new page using the item’s path:

Step 2 – Update Presentation
A SPEAK application is constructed from Sitecore layouts, renderings, etc., so new content and functionality is wired-up via presentation details:

Notice the existing renderings provided by the branch template. We will discuss these in a future post.

Let’s add a new text label. First, click “Add Rendering,” then search for “Text”:

If you’re using Sitecore 8.1 (as in the screenshot above), you’ll notice that there are “Version 1” and “Version 2” of the each component – these are not cross-compatible. I’m using version 1.1 renderings here.
Open the rendering properties dialog on the newly-added Text rendering and edit the following properties:

• Text: Hello, World!
• Placeholder Key: ApplicationContent.Main

Just like any Sitecore rendering, you need to add this to a placeholder. ApplicationContent.Main is the default “body” placeholder of the page.

Step 3 – Create a Lanchpad Shortcut
Let’s quickly add a link to the new SPEAK application via the Launchpad. This will allow Sitecore users to launch the app as soon as they log in.
Under /sitecore/client/Applications/Launchpad/PageSettings/Buttons, add a new LaunchPad-Group item. This defines a new icon group for the Launchpad. Under that, add a new LaunchPad-Button item.

Fill in this item’s fields: give it a label with Text, select an Icon, and copy the URL to the application from Step 2 into the Link field. OpenNewTab is useful as well. Save this item and return to you the Launchpad:

And that’s it – your first SPEAK application! Stay tuned for future articles that cover layout, adding functionality, and understanding available renderings.