Skip to main content
F
FelixRie1-Visitor
1-Visitor
February 21, 2019
Solved

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

  • February 21, 2019
  • 1 reply
  • 3477 views

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

    Best answer by Timo697

    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.

    Create Infotable with Mashup and Number ListCreate 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

     

    1 reply

    T
    Timo69713-Aquamarine
    13-Aquamarine
    February 21, 2019

    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

    F
    FelixRie1-VisitorAuthor
    1-Visitor
    February 24, 2019

    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

    T
    Timo69713-AquamarineAnswer
    13-Aquamarine
    February 25, 2019

    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.

    Create Infotable with Mashup and Number ListCreate 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

     

      Terms & ConditionsAccessibility statement