Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


Overview

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

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



On this page ...

IULocgo


Creating Pages


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, 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 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. 


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.

Configure Docked View

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).

IULocgo


Docked Views in Perspective

Configure Docked View Properties

Property NameDescription
ViewThe 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:

OptionDescription
visibleThe docked view is always expanded/displayed.
onDemandThe docked view is collapsed, but allows the user to display the view by clicking on the docked view's handle.
autoAutomatically shows or hides the docked view depending on how much space is available in the session: showing the view if the page is wider than the width specified in the auto-breakpoint setting. (Works in conjunction with the Auto Breakpoint property).
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.

OptionDescription
pushOpening or closing the docked view causes the content in the center to resize: the center view will be 'pushed' out of the way.
coverWhen opening the dock, it slides in front of the center view, obscuring part of the center view: the dock will 'cover' part of the center view.
Anchor

Allow you to make a view always visible while scrolling. Only available on North docked view configurations.

OptionDescription
fixedThe docked view will remain in a fixed position, relative to the page. Useful when a north-docked view should stay at the top of a page. Select this option if a docked view is acting as a header that should always be present.
scrollable

The docked view will not stay in a fixed position as the user scrolls down in the page. Select this option if the north dock should move along with the page as the user scroll down.

Size

If true, allows the user to resize the docked view.

  • If the view is docked to the North or South edge, then resizing determines the height.
  • If the view is docked to the East or West edge, then resizing determines the width.
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.
Hide handle

Allows you to show or hide a handle for users to expand/collapse the view.

OptionDescription
ShowShow handle at all times.
HideHide handle at all times.
AutoHideHide handle when page is not active.
Handle iconPath to an icon used to identify the view when the view is hidden.
View ParametersAllows specific parameters to be passed to the view when the page is called.
DeleteDeletes the view from the page.


IULocgo


Docked View Properties

Configure Docked View Parameters

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. 

Docked View Parameter Example

  1. Click on Perspective node in the Project Browser to view the Page configuration.
  2. Click on the Edit 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. 
  3. Under View Parameters, click Add Object Member. 



  4. You will see a popup allowing you to select the type of the property. Ideally, this should match the property type on the view. Additionally, the property should be located under the Params category.
  5. Enter the name of the view parameter.
  6. Enter a value, for example, "one." Then click OK.
  7. Save the Project.
  8. Under Page Configuration, right click on the Page and click on Launch Url .



  9. When the page opens, any components bound to the view parameter will now use the value "one". 

IULocgo


Docked View Parameters


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 "/". 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. 

This feature is new in Ignition version 8.0.4
Click here to check out the other new features

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. 

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.

  1. Open the Page Configuration by clicking the Settings  icon at the bottom of your Designer window.
  2. Under the Page Configuration column, click the Add  icon to add a new page. 
  3. In the Page URL field, enter the name of your Page URL (i.e., test).
  4. 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.

Shared Views

Let's configure a docked view under Shared Settings so it is shared across all pages of your project.  Note: This example requires that you have one or more primary views created with an assigned Page URL(s), and a docked view.

  1. Open your Page Configuration if it's not already open. 
  2. Under the Page Configuration area, select Shared Settings.
  3. 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). 
  4. Click OK
  5. 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. Note: This example requires that you have one or more primary views created with assigned Page URL(s), and a docked view.

  1. Open your Page Configuration if it's not already open. 
  2. Select a primary page from the Page Configuration column to add a docked view (i.e., /Plant 1). 
  3. 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). 
  4. Click OK
  5. If you want to customize your view, click on the TopNav pencil 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. Toggle between Plant 1 and Plant 1 Report links to see the difference between the docked views.

Plant 1

Plant 1 Report


Passing Parameters (URL Parameters)

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.



IULocgo


Passing Parameters to Pages


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 like so:  <page> /:towerNumberOur 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 fomula. The table below assumes your project is named: ProjectName.

Original Page URL PropertyParameter NameNew Page URLSample URL in Browser
/param/:paramhttp://localhost:8088/data/perspective/client/ProjectName/value
/new-pageparam/new-page/:paramhttp://localhost:8088/data/perspective/client/ProjectName/new-page/value1
/new-pageareaNumber and lineNumber/new-page/:areaNumber/:lineNumberhttp://localhost:8088/data/perspective/client/ProjectName/new-page/100/101



  

  • No labels