How to make a custom widget as responsive?

Hello Renuka Patil​,

If I remember correctly you need to:

1. Add a property to your widget in the *.ide.js file:

this.widgetProperties = function () {
        return {
          // ...
          'supportsAutoResize': true,
          // ...
        }
}

2. Then in your *.runtime.js file you could relate to the property:

this.properties.ResponsiveLayout

Which should be equal to true, if the widget is placed in the responsive container.

3. And then you could:

• implement the logic to consider the container size in the afterRender():

if(this.properties.ResponsiveLayout) {
     var width= this.jqElement.width();
     // ...
}

• override the resize() function:

this.resize = function(width,height) {
     // invoked when widget is resized
}

Hope I don't forget something.

Regards,

J.