Views in Perspective

Anatomy of a View

Watch the video

Perspective views are unique in that they can act as both a top level screen (taking up a whole page in your session) or a component (embedded in another view). Each view is a project resource, which are named and organized into folders in the Ignition Designer’s Project Browser tree. These folders/paths are important not only for organization and referencing, but also because these paths uniquely identify each view, and are used in the session (runtime) for navigation. Each view has a Container type that decides how the components inside it will behave.

While views themselves are not strictly components, there are components that can display an instance of a view, such as nesting views inside of other views. There are also repeater components that may dynamically create view instances at runtime.

Views can be mounted in a Page as a primary, docked, or popup views. For more information on how pages work, see Pages in Perspective.

View Properties

Views, like components, have properties. They are organized into a few types: props, params, and custom. Custom properties can be defined for views. They act just like custom properties of a component and are internal to the view, and can be referenced by all child components and containers in that view.

Each view contains exactly one “root” level container, which may be any of the available container types. Therefore, the design experience of a view is simply the design of the selected container type.

The view properties have three categories:

• Props - Properties used to configure the component's visual appearance, behavior, and data.
• Custom - Properties defined by the user. They have no direct effect on the component, but are used as variables for the application designer's convenience.
• Params - Properties only found on views. They define the parameters that may be passed in or out of that view.

For complete description of each of the view properties, see Perspective - View Object. To access the properties for a view, first select the view in the Project Browser.

The property types will now be displayed in the Perspective Property Editor.

Input/Output Parameters

The properties inside of the params collection define parameters for the view. This is how views interchange information with other entities, such as a parent view or the page. Parameters must be defined as "input", "output" or "in/out". The default direction will be "input".

• An input parameter is not bindable from within the configuration of a view. The purpose of an input parameter is to receive information from an external entity. For example, when a view is opened, it may receive parameter values which will become the values of its input parameters. Or, if a view is placed inside another container, that instance of the view will show the input properties, and they will be bindable.
• An output parameter is the opposite. These parameters are bindable from within the configuration of the view. If an instance of that view is then placed inside another container, the output values will appear as properties, but not be bindable; they will be read-only from the outside.
• An in/out parameter combines the features of both input and output. An in/out parameter is bindable from both inside the definition of a view, and from the outside. This can be useful when making a view that acts as a decorator around an input, for example. Suppose you had a view that contained a Text Field component and an Image component, and the image displayed whether or not the text in the Text Field meets some criteria. You would use an in/out parameter to mirror the text across the view boundary.

Configuring Views

Views can be configured in many different ways. They can be displayed as the entire browser window if it is configured to be the primary view of a page. Views can also be displayed across the top, bottom, or sides of the browser window if it is configured to be a docked view. A view can also be displayed floating on top of the page as a popup view. A view can also be embedded within another view in various ways using a variety of components that are able to display embedded views. Pages in Perspective talks more about page layout and how views are configured on a page.

When you start designing your project in Perspective, the first thing you'll do is create a view and how you want to configure it. You can configure it as a primary view attached to a Page URL, or as a docked view on a specific Page URL with a primary view, or you can choose your docked view to be shared across all pages in your project. You also have the option of creating folders for your views or simply leaving all your views in the Views folder.

1. In the Project Browser, right click on the Views folder and click New View.
   1. In the New View window, enter a name for your view.
   2. Select a root container type.
   3. Check the Page URL checkbox if you want your view attached to the Page URL. Perspective will match the Page URL with the view's folder structure upon creation.
   4. Click Create View.
      
      
      
      When creating additional views, the Page URL will automatically fill in if the Page URL option is checked. If you use a space in your view name, the Page URL will replace the space with a hyphen. For example, a View named Line A will have a page URL of /line-a.
      
      
2. Once you create your view, the view will open in the Designer workspace, and you can begin adding and configuring components.
   
   
3. If you want to add additional containers, simply select another container type and drag it to your workspace. The container type added in this example is a Flex container.
   
   
   note

   To add components to this container, deep select it and drag components into the container. Notice that the properties are now in the Flex container.

   

Once you create your view, the next step is to set up your navigation using Pages.