Layout properties in Web Component controller

Classic Servoy
1

What is the proper command for accessing properties of an element’s layout from Web Component “controller”? Attached are screenshots of properties in Servoy designer and result of console.log($scope) from browser window. I need to get for example “height=“172px”” from “console.log(??)”.

Sorry this may seem like a simple question, I wasn’t able to look up relevant documentation.

Thanks.

srv2.png
srv2.png426×251 7.94 KB

srv1.png
srv1.png460×827 41.8 KB

2

I think it’s easiest you expose them on the model in your spec file. For example add something like this

"size": { "type" :"dimension", "default" : {"width": 600, "height": 400} }

@see https://wiki.servoy.com/display/DOCS/Property+Types

3

This will also allow you to specify the defaults used when you drag your component to a form…

4

I was aware of this one. Web component I’m coding has special API call to set height/width, it doesn’t respond to Servoy settings. Thus I was wondering if there was a way to access Layout properties in “controller” so the size can be set programmatically.

Any suggestions?

5

Hi,

Which is your use case, why do you need to retrieve height and width ?

In non-responsive form components are wrapped within a div which automatically gets the proper posizion/size depending on the Layout settings of the element.
Most of the time would be enough to style properly your component so that will use 100% of height and width of it’s container: (width:100%, height:100%).

Each webcomponents in non responsive form supports the API elements.yourComponent.setSize(x,y);
You will see a warning in the code editor but this API is available for all components since operate with the container of the component, not with the component itself.

In rare occasion you may need to know the exact width and height; for example if your webcomponent contains a canvas, a chart or similar.
In this case you can retrieve the exact width/height from it’s parent wrapper.

You may want to listen for changes in the window size to recalculate the height width.

    function resize() {
     if ($element.parent().hasClass('svy-wrapper')) { // if doesn't have a .svy-wrapper class you are not in an anchored form.
      var height =  $element.parent().height();
      var width =  $element.parent().width();
      // do something with width and height
     }
    }

// width/height changes when the window is resized.
$(window).on('resize', resizeButton);

// remove the resize listener when the component is destroyed
$scope.$on("$destroy", function() {
      $(window).off('resize', resize);
});

Regards,
Paolo

6

paronne:
Hi,

Which is your use case, why do you need to retrieve height and width ?

If I can retrieve w/h - I can call appropriate functions in controller to set the size. Imo it ought to be possible to get Layout properties, for example through $scope. In fact they are visible in $scope as shown in attachment in first message. Maybe Servoy will include such functionality if it isn’t there already?

7

I was looking for this:

$scope.$parent.layout[$attrs.name].height

All works well now.