SPEAK 2.0 Part 2 - Page Layouts

Sitecore provides three layouts to create SPEAK applications. You can find these layouts in core database at this location  /sitecore/client/Speak/Layouts/Layouts

NOTE: All examples and screenshots are taken from Sitecore 9.3 initial release

• SPEAK-EmptyLayout

• This is the simplest layout with just one placeholder Page.Body
• Select this layout when you want to design the application layout on your own. E.x. SPEAK app which doesn't have header, footer or navigation etc.
  

• SPEAK-FlexLayout

• FlexLayout has following placeholders
• Page.Stylesheets, Page.Scripts, Page.Code, Page.Body

• SPEAK-Layout

• This layout also has similar set of placeholders. i.e.
• Page.Stylesheets, Page.Scripts, Page.Code, Page.Body

SPEAK-FlexLayout is the most commonly used layout. The SPEAK-FlexLayout and SPEAK-Layout are almost similar. The only difference that I found between the two is, FlexLayout has additional class selector in html root element sc-flx giving designers control to customize the styling of the layout.

Let's create an app and add SPEAK-FlexLayout to it.

TIP: Prefer to Use Sitecore Rocks for creating SPEAK Applications

1. Create a folder structure to add demo page to it.

• Open Sitecore Rocks and switch to core database.
• Create a folder DemoApp under /sitecore/client/Applications folder.
• Create another folder Pages under the DemoApp folder. The tree should look like below
  

2.  Add a page named DemoSpeakApp under Pages folder created above.

•  Right click on the Pages folder and on the context menu select Add > New Item...

    

• This will open an add item wizard. Search ListPage on the add item wizard and select SPEAK-ListPage template from the search results. Specify the item name as DemoSpeakApp. This will create a page under Pages folder. 

3.  Add layout to the DemoSpeakApp page created in previous step.

•     Right click on DemoSpeakApp page and click Tasks > Design Layout...

 

• This will open Presentation Details wizard. Click Layout Browse button, select SPEAK-FlexLayout from the window and Save the Presentation Details of this page by pressing Ctrl+S

Here, we are done with setting up the layout for the DemoSpeakApp page. You can browse this page in browser using below url, you should see a blank page.

https://sitecorehostname/sitecore/client/Applications/DemoApp/Pages/DemoSpeakApp

Next we will see how to add page structure rendering on the page.