Pages in Perspective

Page Configuration

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, allowing multiple pages to use the same docked views and corner priority settings. 

You can open the Page Configuration from any view in the Perspective workspace by clicking on the Perspective icon at the bottom 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. 

Creating a Page Configuration

Pages can be manually created by pressing the Add  icon under the Page Configuration area of the Perspective Workspace. Pages created this way will need to have a primary view specified. 

Alternatively, whenever a new view is added to a project, a page can be created automatically by opting into the Page URL setting and typing value for the Page URL. Note that all Page URLs should start with a forward slash character ( "/" ). Creating a page through this method will automatically set the newly created view as the primary view on the new page. 

Initial Page URL

Perspective assumes the initial page within a project will be located at page URL "/". When a session is launched, the session will start at the "/" page. It's recommended that the "home" or starting view for your project uses a page URL of just "/".

Page Properties

Like most objects in Perspective, pages have their own properties. However, since pages aren't selectable in the Designer, page properties can't appear in the Perspective Property Editor. However, pages do have properties that can be accessed via component property bindings and scripts.

Page Layout

Page layout has  specific UI regions where you can place instances of your views. Depending on screen size and orientation, the UI regions have different behavior. There are six primary content regions: Center area, Top Dock, Bottom Dock, Left Dock, and Right Dock. There is also the Popup region that floats on top of the other content regions.

The Primary View is in the center of each page taking all available space in the browser window. Each page must have a single view configured to be its primary view.

Docked views, "docked" or positioned towards the edges of the Primary View. In a session, docked views can appear permanently along the edges or the browser, or be opened an dismissed by the user. 

Page URLs

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 "/". Although users can directly navigate to any page in a project if you know the URL. 

Corner Priority

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.

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: MyProject.

URL Query Parameters

You may pass query parameters to a Perspective URL by manipulating the URL in your browser, or by a navigation call using system.perspective.navigate()

system.perspective.navigate(url= "http://localhost:8088/data/perspective/client/MyProject/view?<key>=<value>"