SPEAK 2.0 Part 4 - Structures

SPEAK Structure rendering creates a structure/layout for the SPEAK applications.

There are mainly four types of Structure renderings,

1. DashboardPageStructure
2. ListPageStructure
3. TaskPageStructure
4. DialogPageStructure

NOTE: There are 3 more Lagecy Structures available in Sitecore 9.3. These structures might get removed in next versions of Sitecore.

• LagecyDashboardPageStructure
• LagecyListPageStructure 
• LagecyTaskPageStructure

 

1.  DashboardPageStructure & ListPageStructure

The DashboardPageStructure requires a SPEAK-FlexLayout. This structure also include the content layout of the page. That means as compared to the previus version LagecyDashboardPageStructure , it does not require any further substructure component such as ApplicationContentNM for example. 

The layout content provides 3 placeholders: Navigation, Content and Context. 

The Navigation and Context areas will not be displayed if no content is assigned to them. 

The layout exposes the following placeholders: 

• GlobalHeader 
• Navigation
• ApplicationHeader
• Content
• Context

This is how the structure looks

 

 

NOTE: ListPageStructure is exactly same as DashboardPageStructure 

2.  TaskPageStructure

The TaskPageStructure also requires SPEAK-FlexLayout.

This layout exposes following placeholders,

1. GlobalHeader
2. ApplicationHeader
3. Content
4. Context

So, removing the Navigation placeholder from DashboardPageStructure (or ListPageStructure) makes it TaskPageStructure in above wire frame.

The Context area won't be visible when no content is assigned to it.

3.  DialogPageStructure

NOTE: There will be a separate article dedicated to DialogPageStructure

Example App Continuation...

Let's add DashboardPageStructure to our example app from previous article,

• Right click on the DemoSpeakApp item and open layout details wizard.

• Click on Add Rendering button and search for DashboardPageStructure rendering and select DashboardPageStructure and click OK. 

 

 

• Make sure the DashboardPageStructure is added in Page.Body placeholder.  

 

 

• Save the layout of the page and browse the app in browser. You should see the structure is added on the page and a black header strip.

 

 

• If you want to hide the header strip, DashboardPageStructure has a rendering property IsHeaderHidden. You can set this property to True to hide this header strip.

 

TIP: Most SPEAK renderings have one default Placeholder configured on Default Parameters field on Rendering Item. This default placeholder is taken by default when you drop that rendering on a SPEAK page.  

E.g., when you drop DashboardPageStructure on any SPEAK page, it will go straight into Page.Body placeholder because this placeholder is specified as the default placeholder on DashboardPageStructure rendering item. 

Next, we will add some Global controls in GlobalHeader placeholder.