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 : 1so 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.