Set Breakpoint container breakpoint through scripting

Intro

As the title says, I’m trying to modify a view I have as part of my project so that it behaves responsively in most situations BUT also has the ability to show the large view when on mobile, for example. This is part of a process visualization screen that shows a complex SVG with many components, which switches to a card view on mobile that lists some KPIs per area. Most of the time, this is the desired behavior, but the customer asked if we can also include a way to view the Large view on mobile.

Setup

I have a Breakpoint container view that has the Small / Large views defined as another Column and Flex container, respectively. The main view displays the complex graphic (the Flex container) until the screen width is less than 640px (the breakpoint) - then it switches to the Column container, which itself defines different layouts based on screen widths < 640px.

Breakpoint 
    |
    ---> Flex (large)
    |
    ---> Column (small)

What I tried

I added a button to the Column container that has this onActionPerformed script:

def runAction(self, event):
	self.view.getChild("root").props.breakpoint = 8000 # or some other arbitrary large #

The breakpoint does change (because when I resize back to large displays, I still get the Column view) but it doesn’t automatically switch to the Flex container like I want it to. How can I programmatically trigger the view to switch to the main Breakpoint’s Large view?

the way I’ve solved this in the past is putting a binding on the property accounting for view width and another boolean flag to swap to the desktop mode (pulling from memory here):

if({page.props.dimensions.primaryView.width} > 640 || {showDesktopMode}, '8000', 'something else')

Kind of a pain because you have to create multiple bindings but it works.

Would be really cool to be able to do it via scripting instead of bindings :thinking:

Would you bind this on the Breakpoint’s breakpoint property? Also, what does {showDesktopMode} refer to?

Yep!

{showDesktopMode} is just a boolean indicator to force the breakpoint to show the “Desktop” mode

Here’s how i set it up:
image

with this binding on BreakpointContainer.props.breakpoint:

if({page.props.dimensions.primaryView.width} > 640 || {../ToggleSwitch.props.selected}, 1, 640)

So if the width is greater than your default breakpoint, or the toggle switch is selected, show the larger view (by setting the breakpoint to 1) or show your default breakpoint value

Toggle switch off:
image

Toggle switch on:
image

1 Like

This script works just fine for me, so long as the new breakpoint is smaller than the current actual width of the view.

I was able to put a button in each of the breakpoint containers and toggle between them by changing the breakpoint.

That may have been my problem, that I was setting the breakpoint to 8000 instead of 1…