All page configuration happens on the Perspective Page Settings tab. Any number of pages can be created for a project each with their own Primary View and Docked Views. When configuring a docked view in Page Configuration, you can choose to dock the view on a specific Page URL with a set primary view, or you can choose to share the view across all pages under Shared Settings. Each project can configure a Shared Settings that will be “inherited” by all pages in that project, such as docked views and corner priority settings. This is intended to provide an easy way to configure a project such as using a docked header across all pages in the project without having to configure a header on each page individually.
You can open the Page Configuration from any view in your project by clicking on the Settings icon at the bottom left of the Designer window. Here you can assign the Page URLs to your primary views and add docked views to your pages. You can even create a new view without going to the Project Browser.
Below is an image of a Page Configuration screen. The Page Configuration column on the left side shows all the Page URLs assigned to views in your project. You can click on the Shared Settings to see all docked views that are shared across all pages of your project. To see docked views that are specific to a Page, navigate through each page of your project. In the following example, you'll notice that the TopNav view is a shared view across all pages, and the Plant 1 view has one docked view called, RightNav, which is specific to this page and only visible when this page is open in your browser.
The Corner Priority setting determines which docked sides push all the way to the corners when the user navigates to that page: whether the top and bottom docked views get the full width of the page or whether the left and right docked views get the full height of the page. Whichever sides have priority, those docked views will extend on those sides to the edges of the page, thus shrinking the opposing sides down to fit within the page. If the Inherited option is selected, then the page will inherit the Corner Priority setting from the Shared Settings.
Perspective is designed to operate in a web browsing environment. A Page is the main navigational element in a Perspective Session, so when a Perspective Session starts, it typically begins at the page mounted to the Page URL "/". The exception to this being cases where the user manually enters a different Page's URL into the address bar of their browser.
The primary view on the Page Configuration screen denotes that it's the main view attached to the Page URL. Everything else surrounding the primary view are docks if they are set. If you have Shared settings selected, these settings are shared for all pages. If you have a particular page selected, these settings are page-specific. In the following section, you'll see how to configure a view to a Page URL and create docked views.
In version 8.0.4 a page.props.title property has been added. You can use the pages.props.title in a script to set a different title for the page. By default, the browser tab displays the project title (or the project name if the title is blank). You can also create bindings to the page title by selecting it as a Property Binding under the page properties on the Edit Binding screen.
Configuring a View to a Page URL
To configure a view to a Page URL, follow these simple steps. Note that this example requires that you have a view created.
If you configured a Page URL at the time you created your view, you're done. The Page URL is already configured for your view.
- Open the Page Configuration by clicking the Settings icon at the bottom of your Designer window.
- Under the Page Configuration column, click the Add icon to add a new page.
- In the Page URL field, enter the name of your Page URL (i.e., test).
- Select the Primary View from the dropdown list (i.e., Production/test).
Configuring Docked Views
You have the option of making a docked view shared across all pages of your project or only on specific pages.
Let's configure a docked view under Shared Settings so it is shared across all pages of your project.
This example requires that you have one or more primary views created with an assigned Page URL(s), and a docked view.
- Open your Page Configuration if it's not already open.
- Under the Page Configuration area, select Shared Settings.
- Click the Add icon on the Top Dock. From the dropdown, select the view you want to be displayed on all pages of your project (i.e., TopNav).
- Click OK.
- If you want to customize your view, click on the TopNav pencil to open the Configure Dock View window.
Page-Specific Docked Views
You can choose to dock a view on a specific page URL with a set primary view. Let's add a view to the right dock.
This example requires that you have one or more primary views created with assigned Page URL(s), and a docked view.
- Open your Page Configuration if it's not already open.
- Select a primary page from the Page Configuration column to add a docked view (i.e., /Plant 1).
- Click the Add icon on the Right Dock. From the dropdown, select the view you want to be displayed on the specific page of your project.(i.e., RightNav).
- Click OK.
- If you want to customize your view, click on the Edit icon next to TopNav to open the Configure Dock View window.
Here is an example of Docked Views. Plant 1 and Plant 1 Report are two different pages displayed in a browser. The Top Dock view is shared across both pages. The Right Dock view shows only on the Plant 1 page because it is specific to this one page.
Plant 1 Report
We configured our project to have a page, and set the page’s primary view to Towers. We now need to configure the page’s URL so that a user can navigate to any Tower using their browser’s URL bar. To do this, we mount the page at a special URL using a parameter replacement syntax as follows: <page> /:towerNumber. Our dynamic URL mounting uses a colon to signify that a portion of the URL is meant to by dynamic and map to an input parameter on the page’s primary view.
Perspective understands this URL format. Therefore if the user were to navigate to the <URL> /Tower2, Perspective would display our page and render "/" as the primary view with an input parameter mapping of towerNumber = Tower2 .
Using the example above, the primary view contained a parameter named towerNumber, and the value in the URL (i.e., Tower2 ) was passed to the parameter. Now, all the information about Tower2 is shown in the image below.
Adding parameter passing to an existing set of pages follows a strict formula. The table below assumes your project is named: ProjectName.
|Original Page URL Property||Parameter Name||New Page URL||Sample URL in Browser|
|/new-page||areaNumber and lineNumber||http://localhost:8088/data/perspective/client/ProjectName/new-page/100/101|