Transfer Webpage Table Data to New Table
This next example shows off Omni Automation’s unique ability to integrate with webpages to deliver an unprecedented level of interactivity and convenience. A single tap (iOS) or click (macOS) on the OmniGraffle logo at the top right in the table below, will create a new OmniGraffle table with the contents of the webpage table!
This process is accomplished by JavaScript functions written into the HTML of this webpage, that do the following:
- Extract the data from the table, and convert it into a JSON string object.
- Read the encoded Omni Automation script from an a hidden div in this webpage, and replace the text placeholder in the encoded script with the JSON string.
- Creates an Omni Automation URL using the embedded Omni Automation code, and opens the Omni Automation URL, causing the OmniGraffle application to respond.
- Upon receiving user approval, the OmniGraffle application decodes the encoded Omni Automation script and runs it, creating a new styled table populated with the table data contained in the passed JSON.
Give it a try yourself. It’s magic! (table only page)
cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Arect%20%3D%20new%20Rect%2872%2C%2072%2C%20120%2C%2036%29%0Agraphic%20%3D%20cnvs%2EaddShape%28%22Rectangle%22%2C%20rect%29%0A%2F%2F%20graphic%20properties%0Agraphic%2EstrokeThickness%20%3D%202%0Agraphic%2EstrokeColor%20%3D%20Color%2Ewhite%0A%2F%2F%20solid%20properties%0Agraphic%2EfillColor%20%3D%20Color%2EdarkGray%0Agraphic%2EfillType%20%3D%20FillType%2ESolid%0A%2F%2F%20solid%20text%20properties%0Agraphic%2Etext%20%3D%20%27PLACEHOLDER%27%0Agraphic%2EtextSize%20%3D%2014%0Agraphic%2EtextColor%20%3D%20Color%2Ewhite%0Agraphic%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ECenter%0Agraphic%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2EMiddle%0Agraphic%2EtextHorizontalPadding%20%3D%206%0Agraphic%2EtextVerticalPadding%20%3D%202%0A%2F%2F%20create%20the%20table%0Avar%20JSONstr%20%3D%20%27TABLEDATA%27%0Adata%20%3D%20JSON%2Eparse%28JSONstr%29%0ArowCount%20%3D%20data%2Elength%0AcolumnCount%20%3D%20data%5B0%5D%2Elength%0Atable%20%3D%20new%20Table%28graphic%29%0Atable%2Ecolumns%20%3D%20columnCount%0Atable%2Erows%20%3D%20rowCount%0Afor%20%28var%20i%20%3D%200%3B%20i%20%3C%20data%2Elength%3B%20i%2B%2B%29%7B%0A%09var%20rowArray%20%3D%20data%5Bi%5D%3B%20%2F%2F%20row%0A%09var%20x%20%3D%200%20%2F%2F%20column%20index%0A%09rowArray%2EforEach%28function%28cellObj%29%7B%0A%09%09dataValue%20%3D%20cellObj%5B%27data%27%5D%0A%09%09alignValue%20%3D%20cellObj%5B%27halign%27%5D%0A%09%09graphic%20%3D%20table%2EgraphicAt%28i%2Cx%29%0A%09%09graphic%2Etext%20%3D%20dataValue%0A%09%09if%20%28alignValue%20%3D%3D%20%27left%27%29%7B%0A%09%09%09alignValue%20%3D%20HorizontalTextAlignment%2ELeft%0A%20%20%20%20%20%20%20%20%7D%20else%20if%20%28alignValue%20%3D%3D%20%27right%27%29%7B%0A%20%20%20%20%20%20%20%20%20%20%09alignValue%20%3D%20HorizontalTextAlignment%2ERight%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%09alignValue%20%3D%20HorizontalTextAlignment%2ECenter%0A%20%20%20%20%20%20%20%20%7D%0A%09%09graphic%2EtextHorizontalAlignment%20%3D%20alignValue%0A%09%09graphic%2EtextSize%20%3D%2014%0A%09%09graphic%2EtextColor%20%3D%20Color%2Ewhite%0A%09%09x%20%3D%20x%20%2B%201%0A%09%7D%29%0A%7D
// add a shape to the current canvas
cnvs = document.windows[0].selection.canvas
rect = new Rect(72, 72, 120, 36)
graphic = cnvs.addShape("Rectangle", rect)
// graphic properties
graphic.strokeThickness = 2
graphic.strokeColor = Color.white
// solid properties
graphic.fillColor = Color.darkGray
graphic.fillType = FillType.Solid
// solid text properties
graphic.text = 'PLACEHOLDER'
graphic.textSize = 14
graphic.textColor = Color.white
graphic.textHorizontalAlignment = HorizontalTextAlignment.Center
graphic.textVerticalPlacement = VerticalTextPlacement.Middle
graphic.textHorizontalPadding = 6
graphic.textVerticalPadding = 2
// create the table
var JSONstr = 'TABLEDATA'
data = JSON.parse(JSONstr)
rowCount = data.length
columnCount = data[0].length
table = new Table(graphic)
table.columns = columnCount
table.rows = rowCount
for (var i = 0; i < data.length; i++){
var rowArray = data[i]; // row
var x = 0 // column index
rowArray.forEach(function(cellObj){
dataValue = cellObj['data']
alignValue = cellObj['halign']
graphic = table.graphicAt(i,x)
graphic.text = dataValue
if (alignValue == 'left'){
alignValue = HorizontalTextAlignment.Left
} else if (alignValue == 'right'){
alignValue = HorizontalTextAlignment.Right
} else {
alignValue = HorizontalTextAlignment.Center
}
graphic.textHorizontalAlignment = alignValue
graphic.textSize = 14
graphic.textColor = Color.white
x = x + 1
})
}
Top Solar Power States Per Capita
| STATE | Cap Per Capita | Power(MW) | POPULATION |
| Arizona | 166.9 | 1093.5 | 6,553,225 |
| Hawaii | 136.5 | 190.0 | 6,553,225 |
| Nevada | 122.9 | 339.1 | 2,758,931 |
| New Jersey | 109.6 | 971.4 | 8,864,590 |
| New Mexico | 88.4 | 184.4 | 2,085,538 |
| California | 66.7 | 2537.4 | 38,041,430 |
How it Works
In order to enable the transfer of table data to a newly created table in the current OmniGraffle document, this webpage contains the following HTML, CSS, JavaScript, and Omni Automation code:
- A multiple-row HTML table with each cell having a CSS style (class) applied to it.
- A JavaScript function (getTableData) for extracting the data and style information from the specified table.
- An encoded Omni Automation script for creating a table on the current canvas of the front OmniGraffle document. This script is placed in a hidden HTML div whose ID matches the name of the specified table.
- A JavaScript function, triggered by clicking the table button, that extracts the table data, adds it to the Omni Automation script, and then executes the Omni Automation script.
NOTE: As an alternative to adding these JavaScript and Omni Automation routines to your webpage code, you can download this JavaScript file (table-transfer.js) that contains the functions, and place the file with your other webpage files. Then add this link to the JavaScript file in the HEAD section of the webpage containing the table:
<script type="text/javascript" src="table-transfer.js"></script>
| JavaScript File Link | ||
| 01 | <script type="text/javascript" src="table-transfer.js"></script> | |
CSS Styles
In order for the Omni Automation script to be able to replicate the horizontal text alignment of the table cells, each cell must have a CSS style class applied to it, as shown in the example below. The CSS styles can be stated in the HTML file HEAD section or be contained in linked CSS files.
| CSS Styles and Table Row with Styled Cells | ||
| 01 | td.state | |
| 02 | { | |
| 03 | text-align: left; | |
| 04 | background-color: #09F; | |
| 05 | color: white; | |
| 06 | } | |
| 07 | td.data | |
| 08 | { | |
| 09 | text-align: right; | |
| 10 | background-color: #69F; | |
| 11 | color: white; | |
| 12 | } | |
| 01 | <table class="data-table" style="width:100%;"> | |
| 02 | <tBody id="solarPowerPerCaptita"> | |
| 03 | <tr name="AZ"> | |
| 04 | <td name="state" class="state">Arizona</td> | |
| 05 | <td name="TSPCPC" class="data">166.9</td> | |
| 06 | <td name="TSPC" class="data">1093.5</td> | |
| 07 | <td name="POPULATION" class="data">6,553,225</td> | |
| 08 | </tr> | |
| 09 | </tBody> | |
| 10 | </table> | |
Getting the Table Data
When the JavaScript function for extracting table data is executed, it will query for the CSS style class of each cell (lines 17 - 19) and store the value of the CSS text-align property of the cell’s CSS style. This stored information is used by the Omni Automation table creation script to apply the appropriate horizontal text alignment.
function getTableData(tableID){
var table = document.getElementById(tableID);
tableData = new Array();
var elem, style;
for (var r = 0, n = table.rows.length; r < n; r++) {
rowData = new Array();
rowName = table.rows[r].getAttribute('name');
if (rowName != ""){
rowData.id = rowName;
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
cellObj = new Object();
cellName = table.rows[r].cells[c].getAttribute('name');
cellData = table.rows[r].cells[c].innerHTML;
cellObj.name = cellName
cellObj.data = cellData
cellClass = table.rows[r].cells[c].getAttribute('class');
elem = document.querySelector('.' + cellClass);
style = getComputedStyle(elem);
cellObj.halign = style.textAlign
rowData.push(cellObj)
}
tableData.push(rowData);
}
}
return JSON.stringify(tableData);
}
| Get Contents of Table as JSON | ||
| 01 | function getTableData(tableID){ | |
| 02 | var table = document.getElementById(tableID); | |
| 03 | tableData = new Array(); | |
| 04 | var elem, style; | |
| 05 | for (var r = 0, n = table.rows.length; r < n; r++) { | |
| 06 | rowData = new Array(); | |
| 07 | rowName = table.rows[r].getAttribute('name'); | |
| 08 | if (rowName != ""){ | |
| 09 | rowData.id = rowName; | |
| 10 | for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { | |
| 11 | cellObj = new Object(); | |
| 12 | cellName = table.rows[r].cells[c].getAttribute('name'); | |
| 13 | cellData = table.rows[r].cells[c].innerHTML; | |
| 14 | cellObj.name = cellName | |
| 15 | cellObj.data = cellData | |
| 16 | cellClass = table.rows[r].cells[c].getAttribute('class'); | |
| 17 | elem = document.querySelector('.' + cellClass); | |
| 18 | style = getComputedStyle(elem); | |
| 19 | cellObj.halign = style.textAlign | |
| 20 | rowData.push(cellObj) | |
| 21 | } | |
| 22 | tableData.push(rowData); | |
| 23 | } | |
| 24 | } | |
| 25 | return JSON.stringify(tableData); | |
| 26 | } | |
Here is the resulting JSON created by the JavaScript function for extracting the table data. Note that the key halign has be included with the table data. This key/value pair will be used by the Omni Automation scrpt to set the horizontal text alignment of the created table cells.
| Table Data as JSON | ||
| 01 | [[{"name":"state","data":"STATE","halign":"center"},{"name":"TSPCPC","data":"Cap Per Capita","halign":"center"},{"name":"TSPC","data":"Power(MW)","halign":"center"},{"name":"POPULATION","data":"POPULATION","halign":"center"}],[{"name":"state","data":"Arizona","halign":"left"},{"name":"TSPCPC","data":"166.9","halign":"right"},{"name":"TSPC","data":"1093.5","halign":"right"},{"name":"POPULATION","data":"6,553,225","halign":"right"}],[{"name":"state","data":"Hawaii","halign":"left"},{"name":"TSPCPC","data":"136.5","halign":"right"},{"name":"TSPC","data":"190.0","halign":"right"},{"name":"POPULATION","data":"6,553,225","halign":"right"}],[{"name":"state","data":"Nevada","halign":"left"},{"name":"TSPCPC","data":"122.9","halign":"right"},{"name":"TSPC","data":"339.1","halign":"right"},{"name":"POPULATION","data":"2,758,931","halign":"right"}],[{"name":"state","data":"New Jersey","halign":"left"},{"name":"TSPCPC","data":"109.6","halign":"right"},{"name":"TSPC","data":"971.4","halign":"right"},{"name":"POPULATION","data":"8,864,590","halign":"right"}],[{"name":"state","data":"New Mexico","halign":"left"},{"name":"TSPCPC","data":"88.4","halign":"right"},{"name":"TSPC","data":"184.4","halign":"right"},{"name":"POPULATION","data":"2,085,538","halign":"right"}],[{"name":"state","data":"California","halign":"left"},{"name":"TSPCPC","data":"66.7","halign":"right"},{"name":"TSPC","data":"2537.4","halign":"right"},{"name":"POPULATION","data":"38,041,430","halign":"right"}]] | |
The Table Creation Script
The following Omni Automation script creates the table in the OmniGraffle document using the data extracted from the webpage table. An encoded version of this script is placed within an HTML div whose display property is set to none and ID includes the name of the source table: <div id="solarPowerPerCaptitaCode" style="display:none;" class="script-content">cnvs%20%3D%20etc.
When the main JavaScript function (bottom) is triggered, the placeholder TABLEDATA (line 20) is replaced with the JSON object containing the table data.
cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Arect%20%3D%20new%20Rect%2872%2C%2072%2C%20120%2C%2036%29%0Agraphic%20%3D%20cnvs%2EaddShape%28%22Rectangle%22%2C%20rect%29%0A%2F%2F%20graphic%20properties%0Agraphic%2EstrokeThickness%20%3D%202%0Agraphic%2EstrokeColor%20%3D%20Color%2Ewhite%0A%2F%2F%20solid%20properties%0Agraphic%2EfillColor%20%3D%20Color%2EdarkGray%0Agraphic%2EfillType%20%3D%20FillType%2ESolid%0A%2F%2F%20solid%20text%20properties%0Agraphic%2Etext%20%3D%20%27PLACEHOLDER%27%0Agraphic%2EtextSize%20%3D%2014%0Agraphic%2EtextColor%20%3D%20Color%2Ewhite%0Agraphic%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ECenter%0Agraphic%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2EMiddle%0Agraphic%2EtextHorizontalPadding%20%3D%206%0Agraphic%2EtextVerticalPadding%20%3D%202%0A%2F%2F%20create%20the%20table%0Avar%20JSONstr%20%3D%20%27TABLEDATA%27%0Adata%20%3D%20JSON%2Eparse%28JSONstr%29%0ArowCount%20%3D%20data%2Elength%0AcolumnCount%20%3D%20data%5B0%5D%2Elength%0Atable%20%3D%20new%20Table%28graphic%29%0Atable%2Ecolumns%20%3D%20columnCount%0Atable%2Erows%20%3D%20rowCount%0Afor%20%28var%20i%20%3D%200%3B%20i%20%3C%20data%2Elength%3B%20i%2B%2B%29%7B%0A%09var%20rowArray%20%3D%20data%5Bi%5D%3B%20%2F%2F%20row%0A%09var%20x%20%3D%200%20%2F%2F%20column%20index%0A%09rowArray%2EforEach%28function%28cellObj%29%7B%0A%09%09dataValue%20%3D%20cellObj%5B%27data%27%5D%0A%09%09alignValue%20%3D%20cellObj%5B%27halign%27%5D%0A%09%09graphic%20%3D%20table%2EgraphicAt%28i%2Cx%29%0A%09%09graphic%2Etext%20%3D%20dataValue%0A%09%09if%20%28alignValue%20%3D%3D%20%27left%27%29%7B%0A%09%09%09alignValue%20%3D%20HorizontalTextAlignment%2ELeft%0A%09%09%7D%20else%20if%20%28alignValue%20%3D%3D%20%27right%27%29%7B%0A%09%09%09alignValue%20%3D%20HorizontalTextAlignment%2ERight%0A%09%09%7D%20else%20%7B%0A%09%09%09alignValue%20%3D%20HorizontalTextAlignment%2ECenter%0A%09%09%7D%0A%09%09graphic%2EtextHorizontalAlignment%20%3D%20alignValue%0A%09%09graphic%2EtextSize%20%3D%2014%0A%09%09graphic%2EtextColor%20%3D%20Color%2Ewhite%0A%09%09x%20%3D%20x%20%2B%201%0A%09%7D%29%0A%7D
| Re-Create Table in OmniGraffle (decoded) | ||
| 01 | // add a shape to the current canvas | |
| 02 | cnvs = document.windows[0].selection.canvas | |
| 03 | rect = new Rect(72, 72, 120, 36) | |
| 04 | graphic = cnvs.addShape("Rectangle", rect) | |
| 05 | // graphic properties | |
| 06 | graphic.strokeThickness = 2 | |
| 07 | graphic.strokeColor = Color.white | |
| 08 | // solid properties | |
| 09 | graphic.fillColor = Color.darkGray | |
| 10 | graphic.fillType = FillType.Solid | |
| 11 | // solid text properties | |
| 12 | graphic.text = 'PLACEHOLDER' | |
| 13 | graphic.textSize = 14 | |
| 14 | graphic.textColor = Color.white | |
| 15 | graphic.textHorizontalAlignment = HorizontalTextAlignment.Center | |
| 16 | graphic.textVerticalPlacement = VerticalTextPlacement.Middle | |
| 17 | graphic.textHorizontalPadding = 6 | |
| 18 | graphic.textVerticalPadding = 2 | |
| 19 | // create the table | |
| 20 | var JSONstr = 'TABLEDATA' | |
| 21 | data = JSON.parse(JSONstr) | |
| 22 | rowCount = data.length | |
| 23 | columnCount = data[0].length | |
| 24 | table = new Table(graphic) | |
| 25 | table.columns = columnCount | |
| 26 | table.rows = rowCount | |
| 27 | for (var i = 0; i < data.length; i++){ | |
| 28 | var rowArray = data[i]; // row | |
| 29 | var x = 0 // column index | |
| 30 | rowArray.forEach(function(cellObj){ | |
| 31 | dataValue = cellObj['data'] | |
| 32 | alignValue = cellObj['halign'] | |
| 33 | graphic = table.graphicAt(i,x) | |
| 34 | graphic.text = dataValue | |
| 35 | if (alignValue == 'left'){ | |
| 36 | alignValue = HorizontalTextAlignment.Left | |
| 37 | } else if (alignValue == 'right'){ | |
| 38 | alignValue = HorizontalTextAlignment.Right | |
| 39 | } else { | |
| 40 | alignValue = HorizontalTextAlignment.Center | |
| 41 | } | |
| 42 | graphic.textHorizontalAlignment = alignValue | |
| 43 | graphic.textSize = 14 | |
| 44 | graphic.textColor = Color.white | |
| 45 | x = x + 1 | |
| 46 | }) | |
| 47 | } | |
The Main JavaScript Function
This is the embedded JavaScript function that is triggered by clicking the OmniGraffle icon in the table header. This function gathers the table data, encodes it, replaces the placeholder in the encoded Omni Automation script with the encoded table data, and then creates an Omni Automation script URL, which is executed to create a new table in OmniGraffle using the extracted data from the table in the webpage.
function executeOmniGraffleScript(tableID){
table = document.getElementById(tableID);
tableData = getTableData(tableID);
scriptDiv = document.getElementById(tableID + 'Code');
scriptCode = scriptDiv.innerHTML;
text = encodeURIComponent(tableData);
scriptCode = scriptCode.replace("TABLEDATA",tableData);
var targetURL = "omnigraffle:///omnijs-run?script=" + scriptCode;
window.location = targetURL;
}
| Execute OmniGraffle Script | ||
| 01 | function executeOmniGraffleScript(tableID){ | |
| 02 | table = document.getElementById(tableID); | |
| 03 | tableData = getTableData(tableID); | |
| 04 | scriptDiv = document.getElementById(tableID + 'Code'); | |
| 05 | scriptCode = scriptDiv.innerHTML; | |
| 06 | text = encodeURIComponent(tableData); | |
| 07 | scriptCode = scriptCode.replace("TABLEDATA",tableData); | |
| 08 | var targetURL = "omnigraffle:///omnijs-run?script=" + scriptCode; | |
| 09 | window.location = targetURL; | |
| 10 | } | |
UNDER CONSTRUCTION
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.
DISCLAIMER