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:

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%2Eblack%0A%2F%2F%20solid%20properties%0Agraphic%2EfillColor%20%3D%20Color%2Ewhite%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%2Eblack%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%2Eblack%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.black // solid properties graphic.fillColor = Color.white graphic.fillType = FillType.Solid // solid text properties graphic.text = 'PLACEHOLDER' graphic.textSize = 14 graphic.textColor = Color.black 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.black x = x + 1 }) }
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
*Clean Technica

(table only page)

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:

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.

 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.

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].textContent; 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); }

 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.

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:

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

 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.

function executeTableTransferScript(tableID){ tableData = getTableData(tableID); scriptDiv = document.getElementById(tableID + 'Code'); scriptCode = scriptDiv.textContent; encodedTableData = encodeURIComponent(tableData); scriptCode = scriptCode.replace("TABLEDATA",encodedTableData); var targetURL = "omnigraffle:///omnijs-run?script=" + scriptCode; window.location = targetURL; }

 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:

macOS_deviceTo 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.

macOS_deviceTo 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!

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