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

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

Scrollable mashups in Thingworx 8.5

jMachovec
4-Participant

Scrollable mashups in Thingworx 8.5

Have you ever wondered if its possible to create a responsive scrollable mashup in Thingworx?

 

While creating an application you might run into an issue where you want to fit too much content to a single responsive page. Let's say you want to create a nice looking modern homepage or about page in Thingworx for your application. It might be challenging to do so but its very well possible. Let me show you a workaround.

 

1. In the Mashup builder select Layout tab, change Positioning to Static and set Fixed size to your desired Height. Leaving the Width field blank will allow Thingworx to set the Width automatically and stay responsive.

jMachovec_0-1580200703723.png

2. Now you need to plan in advance a little bit. Select a Layout widget and drag it to the blank page. A window similar to the one shown below will appear. Switch to Vertical orientation, choose your desired number of rows and click Done.

jMachovec_1-1580200894976.png

3. Your panel is now divided into equally spaced rows. Now you can change the proportions in the Layout widget properties. 

jMachovec_2-1580201112652.png

4. If you want to leave spacing around the sides of a widget, you can simply add another Layout inside of the existing one and create multiple columns. You can add more rows this way as well.

jMachovec_3-1580201852281.png

 

 

I have also included an example mashup, you can simply import it to your Thingworx instance and view all the settings etc.

 

PS: Please note this will not work in older versions of Thingworx!

1 ACCEPTED SOLUTION

Accepted Solutions
jMachovec
4-Participant
(To:jMachovec)

Here is a screenshot of an example mashup with the scrollbar clearly visible.

jMachovec_0-1580202317775.png

 

View solution in original post

1 REPLY 1
jMachovec
4-Participant
(To:jMachovec)

Here is a screenshot of an example mashup with the scrollbar clearly visible.

jMachovec_0-1580202317775.png

 

Top Tags