# Navigation between two views based on a template and parameters

**URL:** <https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 17, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041 "2025-01-17T14:09:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jose\_Lopez](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@Jose\_Lopez](https://forum.inductiveautomation.com/u/Jose_Lopez)\
**Post date:** [January 17, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/1 "2025-01-17T14:09:00Z")

</div>

First, I apologize if my English is not very good, I am writing this query with the help of Google Translate because I do not speak English perfectly... and here is the query where I will try to explain it as simply as possible since I have been around 6 months driving ignition and studying on my own but I still consider myself a beginner in this world...

I am looking for an easy and practical way to navigate between a main screen (I have called it overview) that contains different Embedded in which if we select one it directs us to a second view in which we will obtain different variables or information from the one we select...

_Overview with two embedded_

 ![Captura de pantalla ''OVERVIEW''](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75293ad2bea897fc24c39a9b6f4d1a3c176bf007.png)

_The second view is made up of different embedded but we will only focus on the upper left part_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d09c34a2b211ef4a34944f1999876a81ad37d23.png)  
_Secondary View, if we selected 'Velocidad' for example_  
 ![Captura de pantalla ''Secondary View''](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/800b41359e2fd4ad720ba7af659edde4ad21a146.png)

My intention is that when a different embedded is selected in the 'overview' it brings me all the information, labels or variables that correspond to that embedding that was selected (What is seen in the secondary view)... I am using navigation events in the embedded of the overview to move me to the second view but as you know I can't get that information to change.

_As you can see, I created these parameters for the second view that have to do with the content of this view_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7ab35cc96f9a70fcee3a7a177a5f70b9bb37b58.png)  
_There have to be 9 sets of parameters for the nine spaces you see in the second view but I have decided to start with two_

and

_These are the embedded parameters that we are interested in changing in the second view_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/783212303b4edc9006484c2242e3497287326625.png)

---

<div class="post-metadata">

**Author:** ![Fran\_Dujmovic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fran_dujmovic/32/70280_2.png) [@Fran\_Dujmovic](https://forum.inductiveautomation.com/u/Fran_Dujmovic)\
**Post date:** [January 17, 2025, 2:19pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/2 "2025-01-17T14:19:13Z")

</div>

I'm not sure I fully understand what you're asking, but if you want to navigate between different embedded views you can set up a view param and configure the page URL to include said view param.  
An example would be `/overview/nombre-variable/:varNum`;

The `varNum` would be your view param which you would define previously and cycle through all of your variables using that. You would also have to set the correct target of your embedded views to match which variable you're trying to open.

As far as the information, labels and variables you've mentioned, you can set up a popup view that shows the details that you want to show using an instance param which would be linked to your view param.

---

<div class="post-metadata">

**Author:** ![Jose\_Lopez](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@Jose\_Lopez](https://forum.inductiveautomation.com/u/Jose_Lopez)\
**Post date:** [January 17, 2025, 3:04pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/3 "2025-01-17T15:04:36Z")

</div>

Ok I'll try to explain what I want to do with more specific images...

_This is my overview in which there are different embedded, if I select one..._

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8bb46b49c04d8f804ea94e386f9f3858d4f0a21.png)

_In this case I select 'velocidad' and it takes me to a second screen that we will call 'Details view'_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1110f687487ae78f02faebe9603217ad9f44b48.png)

As you can see, if I select a different variable (Embedded), it takes me to the second view (Details View) and contains information regarding the embedded that was previously selected. This is exactly what I'm looking for but I would like to find a better and more practical way to do it, since for now I have only done it with other views which fills the project with many views and we don't want that.

_Here we can see again the second view (details view) that comes from another embedded of the overview, in this case we are seeing the details of the embedded of 'Cuba Level'_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d15e53ec5d84e0743703f32fffc5fa02c5704df.png)

Different information, same template or view...

---

<div class="post-metadata">

**Author:** ![Fran\_Dujmovic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fran_dujmovic/32/70280_2.png) [@Fran\_Dujmovic](https://forum.inductiveautomation.com/u/Fran_Dujmovic)\
**Post date:** [January 17, 2025, 3:17pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/4 "2025-01-17T15:17:00Z")

</div>

> [@Jose\_Lopez](#):
>
> As you can see, if I select a different variable (Embedded), it takes me to the second view (Details View) and contains information regarding the embedded that was previously selected.

Well if you're trying to navigate to a different embedded view by clicking on different embedded variables, you can use an onClick() action handler and use the system.perspective.navigate function. If you want a separate view to display your information you can set up a dedicated popup view that opens the page you configured using the aforementioned instance param.

> [@Jose\_Lopez](#):
>
> This is exactly what I'm looking for but I would like to find a better and more practical way to do it, since for now I have only done it with other views which fills the project with many views and we don't want that.

As far as I know, navigating between different views using view params is the most effective way of doing so. It's also good practice to organize your views in adequately named folders and subfolders. Be careful your view path is listed correctly in your embedded view target destinations.

Could you post more screenshots of the current view params you have set up as well as your embedded view configurations?

---

<div class="post-metadata">

**Author:** ![Jose\_Lopez](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@Jose\_Lopez](https://forum.inductiveautomation.com/u/Jose_Lopez)\
**Post date:** [January 17, 2025, 4:11pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/5 "2025-01-17T16:11:43Z")

</div>

> [@Fran\_Dujmovic](#):
>
> It's also good practice to organize your views in adequately named folders and subfolders. Be careful your view path is listed correctly in your embedded view target destinations.

_Well here I leave you a screenshot of how I have distributed the project_

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/46029d0cdad48f85666873ef36ec18663e8f2321.png)

> [@Fran\_Dujmovic](#):
>
> Could you post more screenshots of the current view params you have set up as well as your embedded view configurations?

_I hope you are referring to this, if not let me know and I will find more screenshots._

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/6/c64889eedc833efb40c74632ef741bcec64a2681.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c77a5d18e6494bc6a20e6c7bd60db50c2cfcd8c7.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 17, 2025, 5:06pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/6 "2025-01-17T17:06:48Z")

</div>

@Jose_Lopez, tips for forum Markdown syntax:  
Use the ” button or `>` for quotations and the \</\> button for code as show here: [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

---

<div class="post-metadata">

**Author:** ![Fran\_Dujmovic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fran_dujmovic/32/70280_2.png) [@Fran\_Dujmovic](https://forum.inductiveautomation.com/u/Fran_Dujmovic)\
**Post date:** [January 17, 2025, 8:28pm UTC](https://forum.inductiveautomation.com/t/navigation-between-two-views-based-on-a-template-and-parameters/101041/7 "2025-01-17T20:28:03Z")

</div>

> [@Jose\_Lopez](#):
>
> I hope you are referring to this, if not let me know and I will find more screenshots.

Yes, that what I wanted to see. From your onClick action handler configuration there are no instance params configured. Take a look at this rough example I created:  
 ![Example_JoseLopez](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8be9e92942f22381719475bc753b388500bb336.gif)

I'm using a tab container to cycle through all of my tabs (A, B & C). The tab container is embedded in a popup view which has a view param defined called `viewParam`. The tab container has a defined property binding to said view param:

 ![Details View](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b5337d3590bc1ed4904ad59e3e5bf9106d1ef9d.png)

On my Overview I created a view param called `varNum` which cycles through all of my tabs by calling an instance of `viewParam` in the popup view configuration:

 ![Overview](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a10e584183c71825cea070ed42779b5b8aef0da9.png)

And here's the instance being called:

 ![onActionPerformed](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/dfd787b48b8fbed6683c977457790ed55c768d1d.png)

This is a dummy example of what I understood you were asking for, you can apply this logic for your embedded view navigation.
