Responsive UI design using Thingworx Mashup

[nishantlokhande]

Hi All,

We are trying to create full responsive UI using Mashups, We are facing below issues with thingworx responsive widget.

1. Grid : As per PTC grid is responsive but when we test it with multiple resolution screen it will feel like responsive but always it last column lenght with changed other column lenght is always same. Take a look into attached screen shot.

2. List : If we place multiple lists on UI and test with different resolution then all list are not rearrange them self, it get shrink only..

3. Is it really possible to create full responsive UI by using responsive widget (except UI custom widget). 

[mneumann]

Hi

I think the Grid Widget is working in a way, that the last column gets expanded to the remaining space of the visible area - so it would always be larger than the rest, especially with a small number of columns and big sized display.

I'm not sure if the Advanced Grid Widget can handle these changes - the new version had just been released:

https://marketplace.ptc.com/apps/229413/grid-advanced---version-411#!overview

For the responsive design itself, this might be interesting as well:

https://community.ptc.com/t5/ThingWorx-Developers/responsive-layout-issue/m-p/584047/highlight/true#M32758

The issue is probably in the wording "responsive" - as a responsive Mashup does not mean responsive in a "Responsive UI Design" way, but more in a "dynamic (re) sizing" of the content based on the available screen size.

You could try with custom css styles and define a css grid for various media breakpoints (screen pixel sizes). I've never tried that myself, but it might be possible from a design point of view.

For this the elements should be placed in a static panel rather than a dynamic layout - e.g. a panel in a panel.

But it would be great to see more input on this from others as well...

That was just my experience / opinion on responsive UI design.

I hope that helps anyway.

Cheers,

Michael

[mneumann]

Thinking about it, a Dashboard might be more appropriate for dynamic resolutions and depending position changes, as the elements will be shuffled around according to the space they need.

It's based on a flex layout and overflows elements into the next row if there's not enough space.

Or if it needs to be a Mashup, the Collection Widget could somehow be utilized, which uses a flex layout as well.

[TanmeyTWX]

Hi mneumann,

Thanks for the input.

But the requirement is not gadget based dashboards but a responsive mashup with some fixed widgets like Grid,Graph,Button and Labels.

A user can login this Mashup on a standard Monitor display(1366x768) as well as Full HD display (1920×1080) and in both the scenarios, Mashup should cover-up the entire screen.

So far it's working fine till 1366x768 resolution.

[nishantlokhande]

If i go with a way like creating a custom responsive UI widgets , i need to treat whole mashup as a widget(it is a big task take more efforts). I will not able to create list, label as responsive widget. If i make a simple single text as custom widget and in some mashup i have requirement of placing 2 or 3 texts , they will not arrange by itself. Every time i need to create custom widget with 2 text or 3 text as per requirement.  

I have below more two ways to create responsive UI.

1. Create my own UI in Bootstrap and Place mashup inside it by using iframe(Though it is not full responsive UI it looks better than current mashup )

2. Create my own UI in Bootstrap and call Thingworks services from my Spring MVC to get data and display on my own UI.(It is full responsive application).

Please suggest your views.