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

Ignition
,
1

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

2

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

3

Or at least a custom property at the View level.

1 Like
4

Ah yes, or that too :+1:

5

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

6

The breakpoint view

7

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...

8

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.

9

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 (3.7 KB)

2 Likes
10

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

1 Like