Ignition 8.1
Ignition 7.9
Ignition 7.8
Sepasoft - MES Modules
Cirrus Link - MQTT Modules
Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples
You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.
Pages are the main method of navigation in Perspective. A page represents a collection of views that are displayed in a single space. Just like a single tab of a web browser, this represents a single page (at a time). Each configured page specifies a primary view, which is the view which will fill the available space of the page. Other views may be configured to be displayed “docked” to the sides of the page, or “popups” floating on top of the other views. Each page has a URL associated with it, which is how the browser navigates to and displays that specific page.
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, on the other hand, can have multiple views on each side of the page or no views at all, but only one view may be shown at a time for a given dock position. In a session, docked views can appear permanently along the edges or the browser, as small handles that look like tabs on the edges of the browser, or the can auto auto-hide themselves.
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.
Once a view has been docked, it can be further customized via the Configure Docked View popup by left-clicking on the docked view's pencil icon next to the name (i.e., RightNav).
| Property Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| View | The currently selected view. Changing this will change which view is mounted to this position. | ||||||||
| Display | This property allows you to show or hide the docked view. Options are:
| ||||||||
| Resizable? | Determines whether the docked view may be resized or not. | ||||||||
| Modal? | Determines if the view should be modal, meaning users will not be able to directly interact with other views while the modal view is present. This property is only enabled when the Display property is set to onDemand. | ||||||||
| Content | Determines how the docked view interacts with other views on the page.
| ||||||||
| Anchor | Allows you to make a view always visible while scrolling. Only available on North docked view configurations.
| ||||||||
| Size | Determines the size, in pixels, of the view.
| ||||||||
| Auto Breakpoint | Controls the minimum page width for Auto docked views to be visible. When the session is smaller than this width, these views will be hidden and able to be displayed on demand. This property is enabled when the Display property is set to auto. | ||||||||
| Dock ID | An optional arbitrary string that can be used to reference a docked view through other parts of Perspective such as in an action or as a scripting call. | ||||||||
| Handle | Allows you to show or hide a handle for users to expand/collapse the view.
| ||||||||
| Handle Icon | Path to an icon used to identify the view when the view is hidden. | ||||||||
| View Parameters | Allows specific parameters to be passed to the view when the page is called. | ||||||||
| Remove | Deletes the view from the page. |
In Perspective, you can pass parameters to Docked Views. This basically enables you to specify one or more Params properties on the View that's docked, and pass a view to the docked view when the page is accessed. This is mostly used to modify content in a docked view based on the page it is being accessed from.
icon next to the docked view name (in our example it is named West Dock). If your project does not contain any docked views, refer to the corresponding section on this page. 
.
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.
To configure a view to a Page URL, follow these simple steps. Note that this example requires that you have a view created.
Note
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.
icon at the bottom of your Designer window.
icon to add a new page. 
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.
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). 
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.
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). 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
Plant 1 Report
Pages can be mounted at URLs that include parameters. These parameters are used to allow a page to be mounted at a dynamic URL, allowing information in the URL to be interpreted as input parameters to the page’s primary view. For example, suppose we had a page that displayed information about a Tower site and our system had many Tower sites. Each Tower has an ID number that uniquely identifies it.
Our Tower site view, called Towers, has an input parameter called towerNumber that is used in indirect bindings throughout the view configuration to allow this view to correctly display information about any Tower.
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 |
|---|---|---|---|
| / | param | /:param | http://localhost:8088/data/perspective/client/ProjectName/value |
| /new-page | param | /new-page/:param | http://localhost:8088/data/perspective/client/ProjectName/new-page/value1 |
| /new-page | areaNumber and lineNumber | /new-page/:areaNumber/:lineNumber | http://localhost:8088/data/perspective/client/ProjectName/new-page/100/101 |
Related Topics ...
