Transfer Webpage Table Data to New OmniGraffle 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.
| 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:
| 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 table cell must have a CSS style class assigned to it, as shown in lines 4 through 7 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> | |
01-06 CSS style attributes for the “state” table cell.
03 The horizontal alignment attribute for the cell text is set to align to the left.
07-12 CSS style attributes for the “data” table cell.
03 The horizontal alignment attribute for the cell text is set to align to the right.
04-07 In this snippet of the table HTML code, each of the cells of the table row are assigned a corresponding CSS style class (“state” or “data”).
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.
| 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].textContent; | |
| 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 | } | |
01-26 The getTableData() JavaScript function retrieves the cell data and horizontal text alignment settings of the cells of the HTML table whose unique id is passed into the function. The results are returned as a JSON array of arrays converted into a string.
02-03 Store a reference to the source table and create a new array in which to place the retrieved table data.
05-24 Iterate each row of the table to extract data from the row’s cells.
10-21 Iterate each cell of the row.
17-20 Get the value of the CSS alignment attribute assigned to the cell, and add the value to the cell data using the key “halign”
25 Use the JSON.stringify() method to convert the JSON data to string before returning the result.
Here is the resulting JSON created by the JavaScript function prior to it being converted into a string. Again, note that the key halign is 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:
| Hidden DIV Containing Omni Automation Code | ||
| 01 | <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.
| 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 | } | |
02-04 Create a new shape on the current canvas.
06-18 Set graphic and text properties for the created shape.
20 Before this script is executed, the placeholder TABLEDATA is replaced with the extracted JSON table data that was converted into a string.
21 Using the JSON.parse() method, the JSON string is converted from a string into a JSON data object.
22 Get the number of rows by counting the elements in the JSON.
23 Get the number of columns by counting the number of elements in the the first JSON element.
24 Create a new table object in OmniGraffle.
25-26 Assign the corresponding number of rows and columns to the created table object.
27-47 Iterate each element of the JSON data.
28 Each JSON element (row) is an array containing objects representing the cells of the row.
30-46 Iterate each cell of the row, using the stored data to fill the content of the cell and to assign its text alignment.
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.
| Table Transfer Function | ||
| 01 | function executeTableTransferScript(tableID){ | |
| 02 | tableData = getTableData(tableID); | |
| 03 | scriptDiv = document.getElementById(tableID + 'Code'); | |
| 04 | scriptCode = scriptDiv.textContent; | |
| 05 | encodedTableData = encodeURIComponent(tableData); | |
| 06 | scriptCode = scriptCode.replace("TABLEDATA",encodedTableData); | |
| 07 | var targetURL = "omnigraffle:///omnijs-run?script=" + scriptCode; | |
| 08 | window.location = targetURL; | |
| 09 | } | |
01-09 The executeTableTransferScript(tableID) function performs the task of extracting the table data, inserting it into the stored encoded Omni Automation script, and creating and running the Omni Automation script URL. The function takes as input the id of the HTML table object to be used as the source for the data used to generate a new table object in OmniGraffle.
02 Use the getTableData(tableID) function to extract the data from the HTML table.
03-04 Extract the encoded Omni Automation script from the hidden DIV page element.
05 Encode the table data
06 Replace the placeholder "TABLEDATA" with the encoded table data.
07 Create an Omni Automation script URL by appending the encoded script code with the Omni Automation URL schema.
08 Execute the script URL by assigning it to be the value of the location property of the browser window.
Table Styling Actions
Once the table has been created, you may wish to apply some styling to the table. Here are Omni Automation actions for performing some example styling procedures to a selected table:
To install on macOS, download and unpack the archives from the links below. Choose “Plug-Ins…” from the OmniGraffle automation menu, and place the unpacked files in the PlugIns folder now opened on the desktop. The actions will now be available from the OmniGraffle automation menu.
To install on iOS, tap each link, choosing the “Open” option in forthcoming dialog. Then tap “More…” and choose the “Copy to OmniGraffle” option. The installed action will appear in the Plug-Ins view on your device, and will be available from the OmniGraffle automation menu:
Table A|B Style will style the cells of the selected table to be either white text on black background or black text on white background.
Table A|B Left Header Style will style the cells of the leftmost column of the selected table to be either white text on black background or black text on white background.
Table A|B Top Header Style will style the cells of the topmost row of the selected table to be either white text on black background or black text on white background.
Works on iPads too!
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.
DISCLAIMER