Xml-Csv-Viewer

Pure javascript web app(s) to read and display / print CSV or XML file content as HTML tables.

Run by launching xmlcsv.html or churchtrac.html from a directory containing all of the files, or launch any of the html files found in the standalone directory.

xmlcsv.html - XML / CSV Viewer

View the contents of an XML or CSV file.

The "Choose File" button will browse for a file. Checkmark desired columns / features, and press "(re)Display".

The selected content will appear as a table below the "(re)Display" button. See table-create.js for more details about the table display.

This tool was implemented to be generic, but while adapting it to process ChurchTrac budget data, several (pretty much) ChurchTrac-specific options were added.

In the case of XML, each 'table' in the XML File will be available under "Content".

standalone/XmlCsvViewer.html

This is a standalone (single file) version of xmlcsv.html generated by combine.bat

churchtrac.html - ChurchTrac Budget Report Tool

Create a budget report from a ChurchTrac budget report "Exported as CSV"

See the user guide

standalone/ChurchTracBudgetReport.html

This is a standalone (single file) version of churchtrac.html generated by combine.bat

Support files

table-create.js

function createTable(data, elem, title, columns, noHeader, showDetail, options);

Create a table with 'title' in HTML element 'elem' using 'columns' from each instance of 'data', applying selected 'options'

Data normally contains header info in first instance, but 'noHeader' is also supported.

For data instances containg the reserved '__highlight__' member, the included Column-Name:css-class values are applied to the relevant cells

If 'showDetail' is provided, row content is displayed as a form when the row is clicked

Complex fields are displayed as "[OBJECT]".

When a row's values are displayed in a form view. Any complex ([OBJECT]) columns are expanded in that form view.

options.js

Javascript support utility to present and query a set of options with selection checkboxes

Required html for tooltip:

Single id="tooltip-text" element for entire page) Example:

 <p id="tooltip-text">The tooltip text.</p>

Required html for options:

Example (Note - group DIV is optional):

<div class="group">Option Label
    <div id="<Container element ID>" class="container"></div>
</div>

Required CSS: p#tooltip-text, .container, .contained, (optional) .group

The functions in this module are:

function populateOptions(containerElem, list, scope, isChecked)

Populate 'containerElem' with options from 'list' using 'scope' to qualify element ID's, and initializing state to 'isChecked'

'list' is an array of objects containing 'name', 'text', and optional 'description'. If description is present, it is used for tooltip text.

Note that scope + name are transformed into valid HTML ID's

function getOptions(list, scope)

Get selected options of 'scope' in 'list' as an array of option names and Save as option settings to localStorage

function overrideOptions(list, scope)

Override checked state from values previously saved in localStorage

function setAllOptions(list, scope, isChecked)

Override checked state of all options of 'scope' in 'list' to 'isChecked'

function _createHtmlId(value)

Utility function to create properly formed ID

xml-convert.js

Convert decoded XML into a collection of 'tables' that are compatible with the table display mechanism

Tools

combine.py / combine.bat

The python script (typically executed from combine.bat) generates standalone (single file versions of the) html files into the standalone directory.

jacobvc/Xml-Csv-Viewer