cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need help navigating or using the PTC Community? Contact the community team. X

How to make a custom widget as responsive?

rpatil-21
2-Guest

How to make a custom widget as responsive?

Hello,

We have created a custom widget which opens an image & we are doing some operations on that image.

We want that widget should be responsive. It should take all available space.

Can anyone please tell me how to do it?

Thanks & Regards,

Renuka Patil

1 ACCEPTED SOLUTION

Accepted Solutions
jkaczynski
4-Participant
(To:rpatil-21)

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.

View solution in original post

5 REPLIES 5
jkaczynski
4-Participant
(To:rpatil-21)

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.

Hello Jakub,

Thanks for the reply.

I tried your suggestion, it is working fine.

Thanks & Regards,

Renuka

jkaczynski
4-Participant
(To:rpatil-21)

Hi Renuka Patil​,

Glad that I could help. In case of any further questions, don't hesitate to ask here on Community.

Regards,

J.

Hello Jakub, could you share a link where to find documentation on getting started with custom widgets in Thingworx ?

Thank you,

Tom

jkaczynski
4-Participant
(To:TomDecock)

Hello,

Sure: https://marketplace.thingworx.com/-/media/Marketplace/Download%20Item/Related%20Content/E/ThingWorx%20Extension%20Develo…

You can find it on the marketplace under the Eclipse Plugin.

Regards,

J.

Top Tags