Show user-friendly keys/values on detail page

[rjrudin]

As a user of a slush-generated app I want to view HTML keys/values on the detail page in my slush-generated app So that I have a reasonable human-friendly detail page, preventing stakeholders from immediately saying, "Well the users aren't going to want to see XML or JSON", as well as something I can further customize

• Doesn't need to capture every element in a document
• I think a reasonable approach is to show every top-level element (every element under the document root element) as a key/value (perhaps using dl/dt/dd)
• For nested elements - perhaps ignore them by default
• I'm thinking this is done in the detail.controller.js - it'll take the JSON (if it exists) and construct this view
• This should be the default tab that's shown
• A reasonable humanize function would be nice to apply to the keys to generate human-friendly labels

[grtjn]

I suggest using angular-translate for the human-friendly labels. It also allows applying different ui-languages easily. Should be default part of slush I think.

Re nested structures: I think it would make sense to walk across nested structures too, and search for values on any depth. wrapping properties/elements could be shown as headings between the key/value pairs. Otherwise this mechanism would only work for simplest XML and JSON, which would be a bit pity..

[janmichaelyu]

how does this look? http://marianoguerra.github.io/json.human.js/

[janmichaelyu]

or this? http://brianpark.ca/projects/angular_json_human/demo/

[rjrudin]

Both of those look good. Is it worth adding one of them to the default slush UI, or maybe just a Wiki page providing references to these?

[grtjn]

Bit of a techy look. I have done something that looks more natural on a page, did that with a recursive angular template. Wasn't too complex actually.

Downside: could we come up with something that looks (pretty much) the same for JSON and XML, provided we are talking about data-centric XML..

[grtjn]

The new map theme (currently going through latest stages in ui-themes branch) has an infoWindow that was not showing our sample data very nicely. So I played around a little, and came up with this relatively simple recursive template:

https://github.com/marklogic/slush-marklogic-node/blob/ui-themes/app/themes/map/ui/app/map/infoWindow-details.html

Wondering if that could be a nice default for the details page..

[grtjn]

I took a bunch of ideas from several projects, included the map details code, and wrapped that in a new reusable component: https://grtjn.github.io/view-file-ng/#/

[grtjn]

Not fully finished yet, but working well enough to be published..

[grtjn]

We're adding view-file-ng together with cards theme..

[grtjn]

Fixed in cards branch..