Populate a Grid Widget with JSON data in Thingworx
The Grid Widget is very useful for displaying and selecting tabular data. I will show how JSON data (from this site) can be processed in Thingworx to display existing content in different ways.
ThingWorx Server and a service that emits JSON data via standard REST requests.
For a source of JSON data, I decided to use this website. WordPress.com offers a free JSON API that will process any self-hosted site through a redirection request URL. The only requirement is to set up an application key to authenticate the self-hosted site to WordPress.com.
I tested the JSON API by entering a URL with my site URL designated as the source:
This request returns JSON text of all published posts on this site. It is a convenient way to examine the data structure in order to select data for specific displays and other purposes.
Thingworx Service (Web Service)
ThingWorx Datashape (Table Definition)
ThingWorx requires that external structured data such as JSON and XML conform to a table that you can define. This is called a DataShape in Thingworx nomenclature. I chose 4 fields, including post Title, Author, Content and URL. Title and URL are strings, Author is JSON and Content is a String
ThingWorx Mashup (UI Layout)
Next, I created a Mashup in Composer to display the Grid Widget and an HTML Text Widget.
Now that we have a populated grid and an HTML Text Box displaying the content of each selected row in the grid, we can add more fields and customize how they are displayed in the grid.
Add More Fields
Update Grid Columns
Customize column displays by selecting Configure Grid Columns from the widget context menu. The author avatar displays as an image because the column renderer tab settings were changed to use an IMAGELINK renderer.