HTML Forms

Omni Automation is based upon the JavaScriptCore framework found within the WebKit open source web browser engine that Apple includes with its iOS and macOS devices.

JavaScript is also used by web browsing applications like Safari, Chrome, and Microsoft Edge, to provide an interactive experience when viewing HTML-based content, like the pages found on this and many other websites.

And since JavaScript and Omni Automation are both stored in files and within web pages as text that is dynamically loaded and executed, they can easily be used together to provide the ability to insert and manipulate data from webpages into Omni application documents. The following example demonstrates this cooperative potential.

An HTML Form

In the simple HTML form shown below, the user chooses both the fill and stroke colors to be applied to an OmniGraffle shape created when the image of a shape type is tapped or clicked by the user.

In this example, standard HTML elements and browser JavaScript are used to present and extract the user’s preferences, transfer that data into an Omni Automation script, and execute the script to perform addition of a new graphic in an OmniGraffle document.

Try it yourself using your copy of OmniGraffle, and the form below:

Add a Shape:

TAP|CLICK popup menus to select a fill color and a stroke color:

Fill:  Red Green Blue Yellow Stroke:  Yellow Blue Green Red

TAP|CLICK a shape to add it to the current OmniGraffle document:

(TAP|CLICK to view the above example form on its own webpage)

Very cool! Now that you’ve seen “Omni-Interactive HTML” in action, let’s examine the webpage elements that make this dynamic interplay possible.

The Shape Creation Function

To begin with, here’s the Omni Automation script function used for creating a shape on the current cavas in an open OmniGraffle document. This function is passed along with the form choices as arguments for the function, to the targeted Omni application (OmniGraffle) for execution by the app. A line-by-line explanation is placed below the script.

IMPORTANT: The createStyledShape() function is placed in the HTML of the webpage HEAD section within a pair of SCRIPT tags.

IMPORTANT: Since the createStyledShape() function will stored in the HTML of the hosting webpage, each script statement is ended with the standard JavaScript semi-colon delimiter.

Next, let’s examine the webpage’s HTML elements that enable the user to select color and shape options to use with the encoded Omni Automation script.

The Popup Menus HTML

In this example, the user selects both the fill and stroke colors for the created shape. This selection is done by choosing from lists of color names presented on menus.

A standard HTML form is created to hold the two drop down menus.

Note that each of the menus (the select elements) are assigned a unique name and id. This enables them to be easily identified by the main JavaScript function in order to retrieve their current user-chosen values.

Also note that the color values are in two formats, either as the names of standard colors (like red, yellow, etc.), or as RBG color values comprised of an array of four numbers. Omni Automation color values are described in detail on this page.

Now that you’ve examined how the create the HTML for choosing color values, let’s examine how to create the HTML that enables the user to choose the shape to create.

The Buttons HTML

A logical way for the user to select the type of shape to create, it to have them tap or click an image representing the type of shape they wish to create.

The following is the HTML code for creating a table containing the four images. Note that each image is assigned the JavaScript onClick() event handler that is triggered when the image is tapped (iOS) or clicked (macOS). The name of the shape type to create is passed into the called main JavaScript function addChosenGraphic(). Also note the shape type begins with a capital letter.

The Main JavaScript Function

Added to the HEAD section of the webpage within a pair of SCRIPT tags, the function addChosenGraphic() performs the task of gathering the form data, generating and executing the Omni Automation script URL that passes the createStyledShape() function and its corresponding arguments to the targeted Omni app to be processed. A line-by-line description of the function statements appears below the function code.

IMPORTANT: The addChosenGraphic() function is placed in the HTML of the webpage HEAD section within a pair of SCRIPT tags.

IMPORTANT: Since the addChosenGraphic() function will stored in the HTML of the hosting webpage, and executed locally by the document, each script statement is ended with the standard JavaScript semi-colon delimiter.

The generated script URL looks something like this:

Summary

As this example shows, you can add “Omni-Interactive” HTML elements to your webpages, enabling your viewers to quickly select and create styled content.

And, it works on both macOS and iOS! Here's this example performed on an iPad Pro: