“Omni-Interactive” HTML: Web-Table to Outline

Transfer Webpage Table Data to OmniOutliner Outline

In the world of computers and imagination, data is meant to be examined, changed, morphed, interpreted, and reused to communicate concepts in ways that are clear and sometimes unexpected.

For example, the data from a table on a webpage could be used as the framework for creating an outline document in OmniOutliner.

In this section, we’ll examine how Omni Automation scripts can be integrated with standard HTML elements to make the transferal of table data to outline as simple as tapping or clicking an icon.

Try it yourself. TAP|CLICK the OmniOutliner icon at the top right of the table below to transfer the table data into an open OmniOutliner document.

Project	Description	Output (MW)
Grand Coulee	Grand Coulee Dam is a gravity dam on the Columbia River in the U.S. state of Washington, built to produce hydroelectric power and provide irrigation water. It was constructed between 1933 and 1942, originally with only two powerhouses. The third powerhouse, completed in 1974 to increase energy production, makes Grand Coulee the largest electric power-producing facility in the United States.	6809
Bath County PSP	The Bath County Pumped Storage Station is a pumped storage hydroelectric power plant, which is described as the “largest battery in the world,” with a generation capacity of 3,003 MW The station is located in the northern corner of Bath County, Virginia, on the southeast side of the Eastern Continental Divide, which forms this section of the border between Virginia and West Virginia. The station consists of two reservoirs separated by about 1,260 feet (380 m) in elevation. It is the largest pumped-storage power station in the world.	3003
Chief Joseph Dam	The Chief Joseph Dam is a concrete gravity dam on the Columbia River, 2.4 km (1.5 mi) upriver from Bridgeport, Washington. The dam is 877 km (545 mi) upriver from the mouth of the Columbia at Astoria, Oregon. It is operated by the USACE Chief Joseph Dam Project Office, and the electricity is marketed by the Bonneville Power Administration.	2620
Robert Moses Niagara Power Plant	The Robert Moses Niagara Hydroelectric Power Station is a hydroelectric power station in Lewiston, New York, near Niagara Falls. Owned and operated by the New York Power Authority (NYPA), the plant diverts water from the Niagara River above Niagara Falls and returns the water into the lower portion of the river near Lake Ontario. It uses 13 generators at an installed capacity of 2,525 megawatts (3,386,000 hp).	2515

(Example Webpage) (Table Transfer JavaScript)

Extracting the Table Data

The first step in the process of reusing data is to extract it from the source, which in this case is an HTML table on a webpage. To accomplish this procedure we’ll use a JavaScript script, integrated with the HTML content.

Extract Table Data

function getTableData(tableID){

var table = document.getElementById(tableID);

tableData = new Array();

for (var r = 0, n = table.rows.length; r < n; r++) {

rowName = table.rows[r].getAttribute('name');

if (rowName != "Header"){

rowData = new Object();

for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {

cellDataKey = table.rows[r].cells[c].getAttribute('name');

cellDataValue = table.rows[r].cells[c].innerText;

rowData[cellDataKey] = cellDataValue

}

tableData.push(rowData);

}

return JSON.stringify(tableData);

}

01-17 The getTableData(tableID) function extracts the cell data from the HTML table whose unique ID is passed into the function.

02 Use the passed ID to locate the source table and store a reference to it in the variable: table

03 Create an empty array to hold a data object for each table row.

04-15 Use a for loop to iterate each of rows of the source table.

05 Get the value of the row’s name attribute.

06-14 If the name of the row is not “Header,” create a new JavaScript object 07 and iterate each of the row’s cells 08-12 extracting each cell’s key 09 and value 10 and adding that key/value pair to the previously created object 11 . When all row cells have been processed, add the edited row object to the table data array 13

13 Use the JSON.stringify() method to convert the resulting JSON to a string and return the result.

The JSON Data

JavaScript Object Notation (JSON) is a text-based format for storing and exchanging data. The JSON syntax used in this example incorporates the use of a JavaScript array of JavaScript objects, which are comprised of key:value pairs with the cell content of the table column header becoming the keys. Each object contains the data of a table row, that is transfered to the OmniOutliner document as an outline row spanning multiple columns. Here is what the table data looks like as JSON:

[{"Project":"Grand Coulee","Description":"Grand Coulee Dam is a gravity dam on the Columbia River in the U.S. state of Washington, built to produce hydroelectric power and provide irrigation water. It was constructed between 1933 and 1942, originally with only two powerhouses. The third powerhouse, completed in 1974 to increase energy production, makes Grand Coulee the largest electric power-producing facility in the United States.","Output":"6809"},{"Project":"Bath County PSP","Description":"The Bath County Pumped Storage Station is a pumped storage hydroelectric power plant, which is described as the “largest battery in the world,” with a generation capacity of 3,003 MW The station is located in the northern corner of Bath County, Virginia, on the southeast side of the Eastern Continental Divide, which forms this section of the border between Virginia and West Virginia. The station consists of two reservoirs separated by about 1,260 feet (380 m) in elevation. It is the largest pumped-storage power station in the world.","Output":"3003"},{"Project":"Chief Joseph Dam","Description":"The Chief Joseph Dam is a concrete gravity dam on the Columbia River, 2.4 km (1.5 mi) upriver from Bridgeport, Washington. The dam is 877 km (545 mi) upriver from the mouth of the Columbia at Astoria, Oregon. It is operated by the USACE Chief Joseph Dam Project Office, and the electricity is marketed by the Bonneville Power Administration.","Output":"2620"},{"Project":"Robert Moses Niagara Power Plant","Description":"The Robert Moses Niagara Hydroelectric Power Station is a hydroelectric power station in Lewiston, New York, near Niagara Falls. Owned and operated by the New York Power Authority (NYPA), the plant diverts water from the Niagara River above Niagara Falls and returns the water into the lower portion of the river near Lake Ontario. It uses 13 generators at an installed capacity of 2,525 megawatts (3,386,000 hp).","Output":"2515"}]

The JSON Data

During the execution of the webpage’s main JavaScript function, the table data, extracted as JSON, is percent encoded and inserted into a pre-encoded Omni Automation script (shown below), and then run.

The Outline Creation Script

In this example, data from a JSON array of objects is inserted into an existing document by adding columns and applying types and formatters to them. Note the use of the addChild() function of the OmniOutliner Item class, and these column-related methods of the OmniOutliner Outline class: addColumn(); and Editor class: afterColumn(), setValueForColumn(), and setSortOrderingForColumn(); and the OmniOutliner Text Object class.

var data = DATAPLACEHOLDER tree = document.outline editor = document.editors[0] // title the topic column tree.outlineColumn.title = "Project" // create other columns var outputColumn = tree.addColumn( Column.Type.Number, editor.afterColumn(tree.outlineColumn), function(column){ column.title = "Output" column.formatter = Formatter.Decimal.plain } ) var descriptionColumn = tree.addColumn( Column.Type.Text, editor.afterColumn(tree.outlineColumn), function(column){column.title = "Description"} ) // populate outline with data for(i = 0; i < data.length; i++){ dataObj = data[i] project = dataObj.Project // text fields require text objects description = new Text(dataObj.Description, descriptionColumn.style) output = Number(dataObj.Output) rootItem.addChild( null, function(row){ row.topic = project row.setValueForColumn(description,descriptionColumn) row.setValueForColumn(output,outputColumn) } ) } // remove sorting editor.setSortOrderingForColumn(tree.outlineColumn, null)

JSON to Outline

var data = DATAPLACEHOLDER

tree = document.outline

editor = document.editors[0]

// title the topic column

tree.outlineColumn.title = "Project"

// create other columns

var outputColumn = tree.addColumn(

Column.Type.Number,

editor.afterColumn(tree.outlineColumn),

function(column){

column.title = "Output"

column.formatter = Formatter.Decimal.plain

}

)

var descriptionColumn = tree.addColumn(

Column.Type.Text,

editor.afterColumn(tree.outlineColumn),

function(column){column.title = "Description"}

)

// populate outline with data

for(i = 0; i < data.length; i++){

dataObj = data[i]

project = dataObj.Project

// text fields require text objects

description = new Text(dataObj.Description, descriptionColumn.style)

output = Number(dataObj.Output)

rootItem.addChild(

null,

function(row){

row.topic = project

row.setValueForColumn(description,descriptionColumn)

row.setValueForColumn(output,outputColumn)

}

)

}

// remove sorting

editor.setSortOrderingForColumn(tree.outlineColumn, null)

01 During the execution of the webpage’s main JavaScript function, the placeholder DATAPLACEHOLDER is replaced with the JSON data string extracted from the page’s HTML table.

03-04 Store references to the document’s outline and current editor.

07 Set the column title of the document’s outline column.

10-17 Add a new numeric column to the outline and store a reference to it in the variable: outputColumn Note that a call-back function is used 13-16 to set the title and formatter for the added column.

18-22 Add a new text column to the outline placed after the outline column, setting the column’s title, and then storing the resulting reference in the variable: descriptionColumn

25-39 Use a for loop to iterate the JSON data to add rows to the outline, placing the JSON data into the corresponding row column cell. Note the creation of a Text Object 29 to be used as content for the corresponding row column cell.

42 Clear the existing sort ordering for the outline’s main outline column.

var data = [ { "Project": "Grand Coulee", "Description": "Grand Coulee Dam is a gravity dam on the Columbia River in the U.S. state of Washington, built to produce hydroelectric power and provide irrigation water. It was constructed between 1933 and 1942, originally with only two powerhouses. The third powerhouse, completed in 1974 to increase energy production, makes Grand Coulee the largest electric power-producing facility in the United States.", "Output": "6809" }, { "Project": "Bath County PSP", "Description": "The Bath County Pumped Storage Station is a pumped storage hydroelectric power plant, which is described as the “largest battery in the world,” with a generation capacity of 3,003 MW The station is located in the northern corner of Bath County, Virginia, on the southeast side of the Eastern Continental Divide, which forms this section of the border between Virginia and West Virginia. The station consists of two reservoirs separated by about 1,260 feet (380 m) in elevation. It is the largest pumped-storage power station in the world.", "Output": "3003" }, { "Project": "Chief Joseph Dam", "Description": "The Chief Joseph Dam is a concrete gravity dam on the Columbia River, 2.4 km (1.5 mi) upriver from Bridgeport, Washington. The dam is 877 km (545 mi) upriver from the mouth of the Columbia at Astoria, Oregon. It is operated by the USACE Chief Joseph Dam Project Office, and the electricity is marketed by the Bonneville Power Administration.", "Output": "2620" }, { "Project": "Robert Moses Niagara Power Plant", "Description": "The Robert Moses Niagara Hydroelectric Power Station is a hydroelectric power station in Lewiston, New York, near Niagara Falls. Owned and operated by the New York Power Authority (NYPA), the plant diverts water from the Niagara River above Niagara Falls and returns the water into the lower portion of the river near Lake Ontario. It uses 13 generators at an installed capacity of 2,525 megawatts (3,386,000 hp).", "Output": "2515" } ] tree = document.outline editor = document.editors[0] // title the topic column tree.outlineColumn.title = "Project" // create other columns var outputColumn = tree.addColumn( Column.Type.Number, editor.afterColumn(tree.outlineColumn), function(column){ column.title = "Output" column.formatter = Formatter.Decimal.plain } ) var descriptionColumn = tree.addColumn( Column.Type.Text, editor.afterColumn(tree.outlineColumn), function(column){column.title = "Description"} ) // populate outline with data for(i = 0; i < data.length; i++){ dataObj = data[i] project = dataObj.Project // text fields require text objects description = new Text(dataObj.Description, descriptionColumn.style) output = Number(dataObj.Output) rootItem.addChild( null, function(row){ row.topic = project row.setValueForColumn(description,descriptionColumn) row.setValueForColumn(output,outputColumn) } ) } // remove sorting editor.setSortOrderingForColumn(tree.outlineColumn, null)

omnioutliner:///omnijs-run?script=var%20data%20%3D%20%5B%0A%09%7B%0A%09%09%22Project%22%3A%20%22Grand%20Coulee%22%2C%0A%09%09%22Description%22%3A%20%22Grand%20Coulee%20Dam%20is%20a%20gravity%20dam%20on%20the%20Columbia%20River%20in%20the%20U%2ES%2E%20state%20of%20Washington%2C%20built%20to%20produce%20hydroelectric%20power%20and%20provide%20irrigation%20water%2E%20It%20was%20constructed%20between%201933%20and%201942%2C%20originally%20with%20only%20two%20powerhouses%2E%20The%20third%20powerhouse%2C%20completed%20in%201974%20to%20increase%20energy%20production%2C%20makes%20Grand%20Coulee%20the%20largest%20electric%20power-producing%20facility%20in%20the%20United%20States%2E%22%2C%0A%09%09%22Output%22%3A%20%226809%22%0A%09%7D%2C%0A%09%7B%0A%09%09%22Project%22%3A%20%22Bath%20County%20PSP%22%2C%0A%09%09%22Description%22%3A%20%22The%20Bath%20County%20Pumped%20Storage%20Station%20is%20a%20pumped%20storage%20hydroelectric%20power%20plant%2C%20which%20is%20described%20as%20the%20%E2%80%9Clargest%20battery%20in%20the%20world%2C%E2%80%9D%20with%20a%20generation%20capacity%20of%203%2C003%20MW%20The%20station%20is%20located%20in%20the%20northern%20corner%20of%20Bath%20County%2C%20Virginia%2C%20on%20the%20southeast%20side%20of%20the%20Eastern%20Continental%20Divide%2C%20which%20forms%20this%20section%20of%20the%20border%20between%20Virginia%20and%20West%20Virginia%2E%20The%20station%20consists%20of%20two%20reservoirs%20separated%20by%20about%201%2C260%20feet%20%28380%20m%29%20in%20elevation%2E%20It%20is%20the%20largest%20pumped-storage%20power%20station%20in%20the%20world%2E%22%2C%0A%09%09%22Output%22%3A%20%223003%22%0A%09%7D%2C%0A%09%7B%0A%09%09%22Project%22%3A%20%22Chief%20Joseph%20Dam%22%2C%0A%09%09%22Description%22%3A%20%22The%20Chief%20Joseph%20Dam%20is%20a%20concrete%20gravity%20dam%20on%20the%20Columbia%20River%2C%202%2E4%20km%20%281%2E5%20mi%29%20upriver%20from%20Bridgeport%2C%20Washington%2E%20The%20dam%20is%20877%20km%20%28545%20mi%29%20upriver%20from%20the%20mouth%20of%20the%20Columbia%20at%20Astoria%2C%20Oregon%2E%20It%20is%20operated%20by%20the%20USACE%20Chief%20Joseph%20Dam%20Project%20Office%2C%20and%20the%20electricity%20is%20marketed%20by%20the%20Bonneville%20Power%20Administration%2E%22%2C%0A%09%09%22Output%22%3A%20%222620%22%0A%09%7D%2C%0A%09%7B%0A%09%09%22Project%22%3A%20%22Robert%20Moses%20Niagara%20Power%20Plant%22%2C%0A%09%09%22Description%22%3A%20%22The%20Robert%20Moses%20Niagara%20Hydroelectric%20Power%20Station%20is%20a%20hydroelectric%20power%20station%20in%20Lewiston%2C%20New%20York%2C%20near%20Niagara%20Falls%2E%20Owned%20and%20operated%20by%20the%20New%20York%20Power%20Authority%20%28NYPA%29%2C%20the%20plant%20diverts%20water%20from%20the%20Niagara%20River%20above%20Niagara%20Falls%20and%20returns%20the%20water%20into%20the%20lower%20portion%20of%20the%20river%20near%20Lake%20Ontario%2E%20It%20uses%2013%20generators%20at%20an%20installed%20capacity%20of%202%2C525%20megawatts%20%283%2C386%2C000%20hp%29%2E%22%2C%0A%09%09%22Output%22%3A%20%222515%22%0A%09%7D%0A%5D%0A%0Atree%20%3D%20document%2Eoutline%0Aeditor%20%3D%20document%2Eeditors%5B0%5D%0A%0A%2F%2F%20title%20the%20topic%20column%0Atree%2EoutlineColumn%2Etitle%20%3D%20%22Project%22%0A%0A%2F%2F%20create%20other%20columns%0Avar%20outputColumn%20%3D%20tree%2EaddColumn%28%0A%09Column%2EType%2ENumber%2C%0A%09editor%2EafterColumn%28tree%2EoutlineColumn%29%2C%20%0A%09function%28column%29%7B%0A%09%09column%2Etitle%20%3D%20%22Output%22%0A%09%09column%2Eformatter%20%3D%20Formatter%2EDecimal%2Eplain%0A%09%7D%0A%29%0Avar%20descriptionColumn%20%3D%20tree%2EaddColumn%28%0A%09Column%2EType%2EText%2C%0A%09editor%2EafterColumn%28tree%2EoutlineColumn%29%2C%20%0A%09function%28column%29%7Bcolumn%2Etitle%20%3D%20%22Description%22%7D%0A%29%0A%0A%2F%2F%20populate%20outline%20with%20data%0Afor%28i%20%3D%200%3B%20i%20%3C%20data%2Elength%3B%20i%2B%2B%29%7B%0A%09dataObj%20%3D%20data%5Bi%5D%0A%09project%20%3D%20dataObj%2EProject%0A%09%2F%2F%20text%20fields%20require%20text%20objects%0A%09description%20%3D%20new%20Text%28dataObj%2EDescription%2C%20descriptionColumn%2Estyle%29%0A%09output%20%3D%20Number%28dataObj%2EOutput%29%0A%09rootItem%2EaddChild%28%0A%09%09null%2C%0A%09%09function%28row%29%7B%0A%09%09%09row%2Etopic%20%3D%20project%0A%09%09%09row%2EsetValueForColumn%28description%2CdescriptionColumn%29%0A%09%09%09row%2EsetValueForColumn%28output%2CoutputColumn%29%0A%09%09%7D%0A%09%29%0A%7D%0A%0A%2F%2F%20remove%20sorting%0Aeditor%2EsetSortOrderingForColumn%28tree%2EoutlineColumn%2C%20null%29

The Main HTML JavaScript Function

A JavaScript function, embedded in the page HTML, is triggered when the user taps or clicks the app icon placed at the top right of the table. This function performs the task of:

extracting the data from the HTML table,
inserting the data into an Omni Automation script,
and executing an Omni Automation script URL created by prepending the Omni Automation code with the appropriate schema.

function executeTableTransferScript(tableID){ tableData = getTableData(tableID); tableData = encodeURIComponent(tableData); scriptCode = encodedOutlineCreationScriptCode(); scriptCode = scriptCode.replace("DATAPLACEHOLDER",tableData); var targetURL = "omnioutliner://localhost/omnijs-run?script=" + scriptCode; window.location = targetURL; }

The Main HTML JavaScript Function

function executeTableTransferScript(tableID){

tableData = getTableData(tableID);

tableData = encodeURIComponent(tableData);

scriptCode = encodedOutlineCreationScriptCode();

scriptCode = scriptCode.replace("DATAPLACEHOLDER",tableData);

var targetURL = "omnioutliner://localhost/omnijs-run?script=" + scriptCode;

window.location = targetURL;

}

01-08 The executeTableTransferScript(tableID) function performs the task of extracting the data from the HTML table, insert the data into an Omni Automation script, and execute an Omni Automation script URL created by prepending the Omni Automation code with the appropriate schema.

02 Call the getTableData(tableID) function to retrieve the table data and store the result in the variable: tableData

03 Percent encode the table data.

04 Retrieve the Omni Automation script code by calling the encodedOutlineCreationScriptCode() function which contains the encoded script code.

05 Replace the DATAPLACEHOLDER string in the Omni Automation script code with the encoded table data.

06 Construct an Omni Automation script URL by prepending the script code with the Omni Automation URL schema for targeting OmniOutliner.

X Execute the created URL by assigning it as the value for the browser window’s location property.

Note that the Table Transfer JavaScript file contains an alternate method for generating the Omni Automation encoded script code. With the alternate technique the Omni Automation script is placed within a function and stored in the JavaScript file loaded by the host webpage. When the encodedOutlineCreationScriptCode() function for provided the encoded script is called, the encodedOutlineCreationScriptCode() function converts the stored Omni Automation function into a string, appends a calling statement, and then encodes the composite string. This technique is annotated within the executeTableTransferScript() function in the Table Transfer JavaScript JavaScript file.

Webpage Table to Outline

And here is a video of the scripts in action on iOS:

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

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. OMNI-AUTOMATION.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. OMNI-AUTOMATION.COM provides this only as a convenience to our users. OMNI-AUTOMATION.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and OMNI-AUTOMATION.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from OMNI-AUTOMATION.COM and that OMNI-AUTOMATION.COM has no control over the content on that website. Please contact the vendor for additional information.