# \[SOLVED\] How can I retain the dropdown value selected on a Perspective view when the breakpoint container gets resized?

**URL:** <https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 31, 2023, 6:52pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229 "2023-01-31T18:52:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [January 31, 2023, 6:52pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/1 "2023-01-31T18:52:04Z")

</div>

I have a Main breakpoint view with two embedded views (one for the large breakpoint; one for the small breakpoint. These embedded views essentially show the same information but in a different visual format. Each view (large and small) have a drop-down component on them. What I want to happen is I select a value from the drop-down component, I resize the main breakpoint view, and the opposite view receives the selected value in its own drop-down component.

What would be a good way to accomplish this in Perspective?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/5055f84262119200bef86ddc641f105853d7a356.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 31, 2023, 8:10pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/2 "2023-01-31T20:10:53Z")

</div>

You'd need to bind the value in the dropdown menus to something, a tag or session prop

---

<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:** [January 31, 2023, 9:28pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/3 "2023-01-31T21:28:21Z")

</div>

> [@nminchin](#):
>
> a tag or session prop

Or at least a custom property at the View level.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 31, 2023, 9:29pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/4 "2023-01-31T21:29:18Z")

</div>

Ah yes, or that too 👍

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [January 31, 2023, 9:55pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/5 "2023-01-31T21:55:04Z")

</div>

Do you mean on Main, Large, or Small view?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 31, 2023, 10:01pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/6 "2023-01-31T22:01:06Z")

</div>

The breakpoint view

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [January 31, 2023, 10:27pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/7 "2023-01-31T22:27:59Z")

</div>

Hmmm, the answer was a bit more complicated.

1. I added a custom property on the root of the breakpoint called SelectedValue.
2. On each embedded view I added params called SelectedValue.
3. On the dropdown of views Large and Small I created a binding on the dropdown value to the SelectedValue param.
4. On each dropdown value I added a message handler to send the current value to my-handler which resides on the same page.
5. On the root of breakpoint I added a message handler called my-handler that updates the custom property created in step 1.

If there is a simpler way I'd love to hear it though...

---

<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:** [January 31, 2023, 10:40pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/8 "2023-01-31T22:40:18Z")

</div>

You should be able to bind each Embedded View's param value against the custom property of the View or `root`. Making such a binding bi-directional would write the Embedded View param value back to the property if the param of the Embedded View is changed internally, by perhaps some component. As a result of using a Message Handler, you've now disconnected the Embedded Views from knowing about the value, so they won't reflect the updated value if you change the breakpoint.

---

<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:** [January 31, 2023, 10:52pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/9 "2023-01-31T22:52:40Z")

</div>

In this example, The "Embedded" View contains a Dropdown. `Dropdown.props.value` is bi-directionally bound against a `SelectedValue` in/out param. The "Demo" View is a Breakpoint layout where both breakpoints happen to use the same View as their Embedded View, but that doesn't matter in the grand scheme. Both Embedded Views have their `SelectedValue` param bi-directionally bound against `root.custom.SelectedValue`.

As the Dropdowns change their value, the custom property on the `root` is updated. As the breakpoints are entered, the "new" View picks up the binding against the `root` and reflects that value.

[Example.zip](https://forum.inductiveautomation.com/uploads/short-url/3isvyVZts0ZxT75pwzTkBZXqeg4.zip) (3.7 KB)

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [February 1, 2023, 2:25pm UTC](https://forum.inductiveautomation.com/t/solved-how-can-i-retain-the-dropdown-value-selected-on-a-perspective-view-when-the-breakpoint-container-gets-resized/69229/10 "2023-02-01T14:25:46Z")

</div>

Thank you. Once I made my connections bi-directional, on the bindings and params, I was able to make this work as I needed.
