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.

Prerequisites:

ThingWorx Server and a service that emits JSON data via standard REST requests.

Data Source

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:

https://public-api.wordpress.com/rest/v1/sites/www.davidjmcclelland.com/posts/

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)

To get the posts to appear in a Grid Widget in Thingworx, a service must be created on a Thing Object that can emit a request to the URL that returns the JSON. Thingworx supplies Javascript code snippets with the outline of the required code to accomplish this. The service editor provides a test feature that is very helpful in debugging the code and ensuring a connection occurs and expected data is returned.

ThingWorx 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 DataShape

ThingWorx Mashup (UI Layout)

Next, I created a Mashup in Composer to display the Grid Widget and an HTML Text Widget.

ThingWorx Mashup

Runtime

Mashup Runtime

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

Added Fields

Added Fields In Service

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.

Configure Column

Updated Mashup

Mashup Runtime