Sepasoft - MES Modules
Cirrus Link - MQTT Modules
Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples
Ignition 8.1. Offline Version (04/2021)
Ignition 8 Online Version
Ignition 7.9 Online Version
Ignition 7.8 Online Version
Pages are the main method of navigation in Perspective. When talking about pages, there are two distinct objects to be aware of.
Thus, Page Configurations are used to define pages that can be opened in the session, while Pages are running instances that are defined by the Page Configuration.
Users will travers the various views in a project by navigating to different pages. There are many ways to navigate to a page in Perspective.
Furthermore, all of the methods mentioned above can be used to navigate to arbitrary web addresses, allowing you to add links to popular sites that might be useful to your users.
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.
| Property | Description | Property Type | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| pageId | The unique identifier associated with the page. Can be used with other features to identify the page, such as the system.perspective.navigate function. Note, that the value of of this property in the Designer will match the name of the active view. However, during a session the value will return a uniquely generated string, such as "2bf737f8". | value: string | ||||||||||||||||||||||||||||||||||||||||||||||||
| path | Represents a string "path" to the page. Effectively the same as the Page URL. | value: string | ||||||||||||||||||||||||||||||||||||||||||||||||
| primaryView | Represents a path leading to the page's primary view. The "path" is based off of the view's location in the Project Browser, starting under the Views item, and including folders. | value: string | ||||||||||||||||||||||||||||||||||||||||||||||||
| appBarVisible | A Boolean value representing whether or not the app bar is visible on the current page. Writing to this value will hide or show the app bar. | value: boolean | ||||||||||||||||||||||||||||||||||||||||||||||||
| dimensions |
The following feature is new in Ignition version 8.1.6
Click here to check out the other new features
| object | ||||||||||||||||||||||||||||||||||||||||||||||||
| title | The title shown in the browser's tab. The value of this property defaults to the project's title if there is one. The property falls back to the projects name if a title isn't configured. The property is writeable, so scripts and bindings can be used to create a unique title. | value: string |
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.
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 your project by clicking on the Perspective 
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.
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.
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.
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.
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.
Note: 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: MyProject.
| Original Page URL Property | Parameter Name | New Page URL | Sample URL in Browser |
|---|---|---|---|
| / | param | /:param | http://localhost:8088/data/perspective/client/MyProject/value |
| /new-page | param | /new-page/:param | http://localhost:8088/data/perspective/client/MyProject/new-page/value |
| /new-page | areaNumber and lineNumber | /new-page/:areaNumber/:lineNumber | http://localhost:8088/data/perspective/client/MyProject/new-page/100/101 |
