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?