JSON to HTML Table
Introduction and Rational
So we have the app connect generator? why this?
Put simply, you can think of this as a simplified server connect version of the bootstrap generator.
Working dynamically in a server environment where benefiots like classes and bootstrap are unavailable, it is necesary to fall back on inline styles to style the tables.
Why do this?
This is an intial iteration of a much larger projecrt i am working on relating to document management.
Are sure many of you have wanted to embed tables like invoices or product lists into emails in table form.
This extension can talke a server conenct json output (typically from a database query) and output an HTML table for direct injection into other modules like mailer.
This is a precursor to smernding my Intelligence Merge extension to allow automatic table insertion from codes like [TableInsert:jsontotable] (where json2table is the module name which generatred the table)
Overview
the Data Source
Adding the data source is as simple as passing a query to the extension.
Styling
This can be the trickier bit.
While outputting treh table fro use in an HTML page is reasonably simple, I feel obliged to warn users that embnedding styled html into an email can be problematic.
Sadly some email clinets do not render html style as well as they should. The worse offender is Microsoft Outlook which your cutomers are very likely to use.
Outlook has a nasty habit of ignoring some style declarations, particulary in the table headers and footers so test carefully.
The Interface
The extension is loaded to the "Data Transformations" group
Dont be scared by the interface and amount of CSS, In reality you can leave them all blank although the output would be pretty boring. The example is heavy on CSS as this is my testing setup.
Add the desired classes to th appropriate table elements. Note there is not "style =" code, these are added programatically. I recommend using coloer HEX codes rather than names as some parsers, email in particular dont always understand them.
So i have a querry with output:
querydata: [
{
id: 1,
surname: 'English',
forename: 'Brian',
email: 'brian@hyperbytes.co.uk'
},
{
id: 2,
surname: 'Smith',
forename: 'Jimmy',
email: 'jimmy@smith.com'
},
{
id: 3,
surname: 'Williams',
forename: 'Robert',
email: 'robbie@williams.com'
}
]
I feed this into the extension as configured above and return the content in a browser:
I see
The APi action also sends this in email form to me:
Notice the slight difference in table pressntation due to Outlooks rendering engine. Hence my resommendation to always check email formatting in common browsers.
Adding footer
You may have noticed a checkbox to make the last row a footer
If i check this i see:
and email appears as:
As always, any issues contact me