Make docked view responsive

Ignition
1

is it possible to have two docked views, and display one or the other depending on the resolution?

I am trying to get something like what is shown in the picture:

jvict
jvict781×754 17.3 KB

2

any ideas?

3

I have an idea, but it requires a shared View (like a docked view for instance) which is ALWAYS present across every page, or the logic would need to be repeated in some view for any page which doesn’t have the “shared” View present. it also requires that you’ve properly supplied an id for the docked views in question through the Page Configuration.

Components/Views of pages actually now have access to the page dimensions via page.props.dimensions:

Screen Shot 2022-02-15 at 11.20.18 AM
Screen Shot 2022-02-15 at 11.20.18 AM556×790 68.8 KB

So you in the shared View you should set up a breakpoint width custom property, something like custom.breakpointWidth. now bind a second custom property against the viewport width (we’ll call this custom.viewportWidth).

Apply a change script to custom.viewportWidth and manage the docks you want open there:

if currentValue and currentValue.value < self.custom.breakpointWidth:
    system.perspective.closeDock("LeftDockedView")
    system.perspective.openDock("BottomDockedView")
else:
    system.perspective.closeDock("BottomDockedView")
    system.perspective.openDock("LeftDockedView")
4

@cmallonee Thanks for the idea, I’ll try it. the only drawback is that i have to have a third common dockd view. can i insert the same script in an event startup session using the device type property to detect if it is a browser or a mobile device?

5

Hi @lachguerabdallah, we’ve implemented something very similar to what @cmallonee has suggested. You can use any type of view that is always present, but a third ‘invisible’ docked view would work (for example 0px in height or opacity=0). It would be best to placed in the change script as @cmallonee suggested if you need it to constantly evaluate, or on the startup script of the view if you want to do it on first load of the session.

The issue with using the Session Startup Event script is that it runs in the Gateway scope (from what I remember), which means it doesn’t necessarily have reference to open the appropriate docked Views.

Another option we’ve used in the past is to always startup on an invisible view which has a startup script that sets up all the desired docked Views and then redirects to the desired main View depending on some logic (for example device type being mobile). Again, this only works on first load of the session, and is not re-evaluated.

2 Likes
6

@matthew.ayre I hadn’t thought of an invisible docked view.

thank you

1 Like
7

In theory you could place the same logic in only the docked views you're using and it should work, as long as you open the "new" docked view before you collapse the "old" one.

1 Like