Metawidget meets My Digital Structure

I've been working with the guys at My Digital Structure to create a 'proof of concept' integration between Metawidget and their REST APIs.

The project uses Stylus and Uglify (via Grunt), AngularJS, Bootstrap (which needs JQuery) and Metawidget to dynamically (and generically) render entities by accessing the My Digital Structure REST APIs for both data and metadata. You can download it at https://github.com/kennardconsulting/digitalstructure.

Exploring the Proof of Concept

You should be able to open the project's index.html directly in Firefox. For Chrome (which blocks local AJAX requests) you'll need to open it via HTTP. You'll then need to login using your My Digital Structure login:

This will take you to a home screen showing those My Digital Structure entities that have been upgraded to their new /rpc REST API:

Clicking on any home entity will take you to a search screen. The table on the search screen is rendered dynamically by Metawidget, based on the data returned by the REST API:

Clicking on any item will take you to a read-only screen. This screen is constructed from the REST metadata APIs, so that: the fields appear in their correct order; fields with no data still appear; fields that are drop downs have their values mapped to human-readable values (e.g. value 4 is mapped to 'Dr' in the screenshot):

Clicking Edit will take you to an edit screen where you can Save or Delete the entity. This screen includes drop downs. The values in the drop downs have been further sourced by secondary REST metadata calls.

Finally, the process is repeated for other My Digital Structure entities. The project uses the same two search.html and crud.html screens, just powered by different metadata. This saves enormous amounts of code:

My thanks to the My Digital Structure team for all their support!