# Using dropdown to change primary view content

**URL:** <https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 20, 2023, 1:16pm UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390 "2023-09-20T13:16:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pyrak](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@Pyrak](https://forum.inductiveautomation.com/u/Pyrak)\
**Post date:** [September 20, 2023, 1:16pm UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390/1 "2023-09-20T13:16:58Z")

</div>

Hi everyone,  
I'm having trouble configuring dropdown to change page content on selection of different items (A, B, C) in the list.  
I have a docked view with the dropdown set on top of the primary view  
I have three other views (A, B, and C; each for every item in the dropdown list) with dashboards that I want to be passed to the primary view.  
My goal is to pass dashboard on views A, B, and C to the primary view container when items A, B and C are selected from the dropdown.  
(I will greatly appreciate detailed information- I'm an amature)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 20, 2023, 2:52pm UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390/2 "2023-09-20T14:52:52Z")

</div>

How is the primary view of the page configured to expect these values/parameters? This will dictate how you send them.

---

<div class="post-metadata">

**Author:** ![Pyrak](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@Pyrak](https://forum.inductiveautomation.com/u/Pyrak)\
**Post date:** [September 21, 2023, 6:24am UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390/3 "2023-09-21T06:24:50Z")

</div>

I have not made any configurations in the primary view

---

<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:** [September 21, 2023, 7:39am UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390/4 "2023-09-21T07:39:33Z")

</div>

Let's say you want the Page Configuration with a banner across the top and the Primary View below that. The dropdown on the banner will allow you to switch the primary view between Home, Configuration and Overview. Here's how:

# Session variable

- On the Project Browser pane select Perspective.
- On the Perspective Property Editor pane scroll to the bottom and add a session custom variable, `selectedView : home`. We'll use this to track the selected view.

# Banner

- Create the banner view. I'd use a flex container.
- Set the dropdown options as shown below.  
 ![Dropdown navigation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/8034889c1cd91d6a5776fea3f163708b7b6f0a7b.png)
- Bind the dropdown to the session variable:  
 ![Dropdown binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7375b021c0572ca31a401bdb0db9e7b4ca6f3e7.png)  
The bidirectional property allows the dropdown to write to the session variable.

# Subviews

- Create your three flex container views, "home", "configuration" and "overview".

# Primary view

- Create one more view, "flexPrimary".
- Drop an Embedded View component onto the view and set `position.grow : 1` so that it fills the view.
- Select the embedded view component and create a binding on `props.view`. This is similar to what we did above but we don't need the bidirectional binding as the view won't be writing back to the session variable.  
 ![View binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e0f19c545cc686cc432340fdf47495aaed56dec0.png)

# Page Configuration

- Hit the Page Configuration icon (bottom left of the Views tabs).
- On Shared Settings click the top + Add button and set it to load your banner view.
- Below the Shared Settings click the '/' row. Set Primary View to 'flexPrimary'.

That should be enough to get you going.

---

<div class="post-metadata">

**Author:** ![Pyrak](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@Pyrak](https://forum.inductiveautomation.com/u/Pyrak)\
**Post date:** [September 22, 2023, 11:34am UTC](https://forum.inductiveautomation.com/t/using-dropdown-to-change-primary-view-content/79390/6 "2023-09-22T11:34:55Z")

</div>

Thanks a lot  
It worked.