Creating navigation in an application
A SPEAK page has a URL like any other webpage. You navigate to a SPEAK page by navigating to the URL. This topic outlines how you can use these URLs to add navigation to your SPEAK application:
-
You can use controls for navigation. For example, you can use the
HyperlinkButtoncontrol and specify the destination URL that SPEAK navigates to when a user clicks theHyperlinkButtoncontrol. The URL is static and you know what it is when you create the page. -
You can construct the destination URL programmatically. You do this when you are creating the page and you do not know the URL, for example, if the URL contains a query string that is based on an action by the user.
Using Controls for Navigation
You can configure controls to provide navigation. For example, many controls have a Click property. You can use the JavaScript that SPEAK executes when this event is raised to navigate to a specific SPEAK page. Some controls have the NavigateUrl property that directly supports defining a navigation URL.
The following table shows how to use different controls to let users navigate to /sitecore/client/YourApps/HelloWorld:
|
Control |
Property |
Value |
|---|---|---|
|
|
NavigateUrl |
|
|
|
NavigateUrl |
|
|
|
Click |
|
|
|
Click |
|
You can also add a HyperlinkButtonGroup control to give users a group of navigation links. You do this by adding a HyperlinkButtonGroup control to the page and creating a folder of HyperlinkButton Parameter items. You use the NavigateUrl fields of these items to specify the destination URLs.
Creating Navigation Programmatically
You can construct a destination URL programmatically.
For example, you have a search result page with a list of items. When users select an item in the list, they can click an Edit button to go to a new SPEAK page where they can edit the item details.
The Edit page needs to know the Sitecore ID of the item. You can pass this ID in the URL as a query string.
You need to do two things to make this work:
-
Create a function in the PageCode of the search result page. Call it OnEdit. This function constructs a URL that has the ID of the selected item in the query string, and it uses JavaScript
window.location.replaceto navigate to the Edit page. -
Call this method in the Click property of the Edit button.
You can enhance this in many ways. For example, you can keep the Edit button disabled until the user selects an item.