Make docked view responsive

Ignition
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")