Trigger Flow When Viewport Width Passes a Threshold

Wappler General
1

Hey you Wappler Wonder Dudes…

How can I trigger a Flow when the viewport width passes a threshold value?

Happy Wappling,
Antony.

2

This is a huge guess and leap of faith but have you tried something like:

{{browser1.viewport.width < 250 :flow1 : false}}

3

I could certainly try that… But where do I put it so as to trigger as the viewport width passes the threshold?

4

What is actually the whole idea behind this? What do you want to do?

5

For xl and lg screen sizes, my user interface design has two sections side by side:

big
big1198×611 73.1 KB

And for md, sm and xs sizes, one screen replaces the other - so when the left side is visible the right is hidden, and vice-versa:

small1
small1561×607 39.3 KB

small2

In the ideal world, if the user manually makes the browser narrower, I would like the left side to become hidden - hence the need for the trigger to detect when the viewport width has just gone below 768px.

I hope that helps!

Antony.

6

So what flow needs to be run? And how is it related to the layout changes on the page?

7

The flow will change the values of two variables which determine the content and visibility of the left and right “windows”… the variables will be changed depending on their existing values, so there will be a bit of logic involved.

8

Couldn’t you achieve this using media queries in css? If it only are two variables that needs to be updated, then just trigger the flow on the resize event, optionally with a debounce so that it doesn’t trigger too often.

9

Thanks for your thoughts @patrick!

My question is `What do I do in Wappler to just trigger the flow on the resize event?

10

Can’t you just change the visibility of the element directly using show/ hide based on browser1.viewport.width like dmx:show=“browser1.viewport.width >500” or similar

11

Hmmm... yes, maybe I could dream up some clever way to manipulate the variables like that...

But my real question is:

Is it possible in Wappler to trigger a flow when the viewport width passes a threshold?

12

Such custom trigger is not possible at this moment in App Connect and Wappler, I could post some javascript code that would do it. I think when you already are using some variables then with the browser component and the correct expressions you could already solve it.

13

Thanks for the update @patrick!