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.
The Embedded view component allows you to include an entire view inside another. Using this component allows you to select a view to display, and to pass parameters into the view. Because of this, views can easily act as templates for information.
For example, you could create a tank view and embed several into another, larger view that shows an overview of the facility.
The embedded view is different than a container because you cannot alter the contents of a view using the Embedded View. A new container would allow you to create a new grouped set of components.
| Name | Description | Property Type |
|---|---|---|
| path | Path of the view to load in wrapper. | value: string |
| params | Parameters to be passed to the view. Options are Input, Output, or In/Out. | value: string |
| useDefaultViewWidth | Use of view's default width instead of adjusting based on the content's width. | value: boolean |
| useDefaultViewHeight | Use of view's default height instead of adjusting based on the content's width. | value: boolean |
| style | Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
In this example, there is a Map component and a Carousel component on the top of the page. Underneath them, we've placed an Embedded View component. The idea was to embed this overview to give users a quick visual reference to bigger picture trends for the site. This example assumes you have a view already created named "Pressure Trend Overview". Here are the properties for just the Embedded View:
| Property | Value | Style Category |
|---|---|---|
| props.path | Pressure Trend Overview | N/A |
| props.style.backgroundColor | #FFE8CC | background |
| props.style.borderStyle | groove | border |
| props.style.borderWidth | 6px | border |
