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)
How is the primary view of the page configured to expect these values/parameters? This will dictate how you send them.
I have not made any configurations in the primary view
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.
- Bind the dropdown to the session variable:
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.
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.
1 Like
Thanks a lot
It worked.