Change view Docked View depending on viewport height

Ignition
1

Greeting everyone,

I am trying to change the view of an embedded view located on a docked view using a custom parameter on the component, but I can't make it to work.

As you can see on the screenshot, i have a principal view called Alarm Menu that has the view on it, and two additional views that serves as the view to show if the viewport size is bigger than the stablished point and if smaller.

image

Using a custom parameter on the View component, a binding has been made with the height parameter of the viewport, using a script of transformation:

image

image
image1134×591 37 KB

However, when viewing the project on the browser and adjusting its height, the view doesn't seem to change and stays the same everytime. What could be the problem for not working properly?

2

Are you looking to adjust the size of your dock view or just the embedded view inside your dock view?

If you are looking to change the entire dock size then you can use alterDock. As of version 8.1.19, using Perspective, you can change the dock parameters via alterDock scripting function.

https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock

3

Hi there!

The idea is that based on the provided code, the "path" parameter on the embedded view would change depending on the height of the screen, changing between views based on the stablished point.

I tried to do the same coding on main views and it seemed to work. However, when trying to do that on docked views it wouldn't work, displaying always the same view

4

Breakpoint containers:

https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Breakpoint+Container

5

But isn't the breakpoint containers only used for width values?

6

You're right. I somehow thought you could configure the breakpoint direction.

edit: 200px is very small though, are you sure you're actually reaching that when testing ?

I tried this expression and it works just fine:

if ({page.props.dimensions.viewport.height} > 300,
	"path/to/viewA",
	"path/to/viewB"
)

Note that your binding seems weird: you should be binding the path, not changing the path as a side effect from a binding on another property.

1 Like
7

Hey that seemed to work perfectly. Thanks a lot!