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

How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

SOLVED
Highlighted
Participant

How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

Hello together,

 

i would like to create a Mashup which shows different tiles for different functionalities.

 

The PTCCovergeConsole, see attachement, is doing this. My question is how do I make those tiles and can I link a mashup to each tile?

 

Thanks for your help.

 

Regards Felix

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

Create an Infotable Property in a Thing.  For the infotable, create a datashape with a Mashup column. Also add a number or string column and set this column as a primary key.  Once the datashape and infotable is made, populate the infotable with your list of mashups to select in the mashup column and set a unique identifier in the number/string column.

1.pngCreate Infotable with Mashup and Number List

Next, in your Collection Mashup, add a GetProperties service call for your Infotable Thing.  Bind your infotable list to the Data of your Collection.  Select MashupHeight and MashupWidth values for your mashups.  Select number or string column for your UIDField dropdown.  Select the mashup column for the MashupNameField dropdown.

 

Add a Navigation widget to your Collection Mashup.  Under your GetProperties list, click on the + next to your Infotable.  A [Selected Row(s)] field should display.  Click on the + next to [Selected Row(s)].  You shoud see the column names of your Infotable.  Bind the Infotable[Selected Row(s)].Mashup to the MashupName field of the Navigation Widget.  Bind the CellWasClicked binding field of the Collection Widget to the Navigate field of the Navigation Widget.  Turn off the Navigate Widget Visibility checkbox.2.png

 

There are numerous other settings that you can play with in both the Collection and Navigation Widgets, but this should get you started.  I also found a few more instruction guides from the Developer website.

 

https://developer.thingworx.com/en/resources/guides/collection-widget-how-to

https://developer.thingworx.com/resources/webinars/reimagine-your-application-UI

 

Hope this helps,

Tim

 

View solution in original post

3 REPLIES 3

Re: How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

Hi Felix,

 

You can use the standard Collection widget to do this.  You would need to create a different mashup for each tile style. PTC Marketplace has an extension that gives some good examples of how to use the collection widget called: Web Design Kit

 

Attached is an example of a mashup that I made using the collection widget.

 

I hope this helps.

 

Tim

Re: How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

I have a Landing page for each function which should be represented by a tile.

 

But how do I bind these Mashups to the Collection widget?

 

Thank your for your help by the way.

 

Regards Felix

Re: How to create an own Dashboard, Mashup or Console like the PTCConvergeConsole?

Create an Infotable Property in a Thing.  For the infotable, create a datashape with a Mashup column. Also add a number or string column and set this column as a primary key.  Once the datashape and infotable is made, populate the infotable with your list of mashups to select in the mashup column and set a unique identifier in the number/string column.

1.pngCreate Infotable with Mashup and Number List

Next, in your Collection Mashup, add a GetProperties service call for your Infotable Thing.  Bind your infotable list to the Data of your Collection.  Select MashupHeight and MashupWidth values for your mashups.  Select number or string column for your UIDField dropdown.  Select the mashup column for the MashupNameField dropdown.

 

Add a Navigation widget to your Collection Mashup.  Under your GetProperties list, click on the + next to your Infotable.  A [Selected Row(s)] field should display.  Click on the + next to [Selected Row(s)].  You shoud see the column names of your Infotable.  Bind the Infotable[Selected Row(s)].Mashup to the MashupName field of the Navigation Widget.  Bind the CellWasClicked binding field of the Collection Widget to the Navigate field of the Navigation Widget.  Turn off the Navigate Widget Visibility checkbox.2.png

 

There are numerous other settings that you can play with in both the Collection and Navigation Widgets, but this should get you started.  I also found a few more instruction guides from the Developer website.

 

https://developer.thingworx.com/en/resources/guides/collection-widget-how-to

https://developer.thingworx.com/resources/webinars/reimagine-your-application-UI

 

Hope this helps,

Tim

 

View solution in original post