"Advanced HTML Previews"


Table of Contents

  1. About HTML Previews
  2. Example Actions
  3. Presenting HTML Previews
  4. Generating HTML Content
  5. Controlling Flow
  6. Sending Data from Preview

About HTML Previews

The HTML preview action step provides a way to display HTML in a local in-app web browser. The primary use of this step is to preview content intended for the web, and is typically used along with content created in Markdown to preview the HTML output. HTML Previews are not limited to this purpose. The content displayed can be dynamically generated, use all the tools of the browser (HTML/CSS/JavaScript), load remote content (images, scripts, stylesheets, run scripts, and even send data back to Drafts from HTML forms or other dynamic content in the page - allowing the HTML Preview step to be used to generate custom user interfaces for Drafts actions. If you have basic skills in HTML and related technologies, this article is designed to help you utilize some of these advanced features in your actions. Possible use cases:

Example Actions

Like to learn by example? We have provided a couple of example actions demonstrating use of techniques discussed in this article:

Presenting HTML Previews

HTML Previews can be presented either using the HTML Preview action step or in script using the [HTMLPreview object](https://scripting.getdrafts.com/classes/htmlpreview). By default, previews are presented in a window, and contain toolbars with buttons to “Continue” or “Cancel”. HTML Previews can optionally be configured to “Hide interface”, in which case these toolbars will not be displayed. This option is useful when using the preview to generate user interface where you control the flow. See controlling flow section below for details.

Generating HTML Content

Whether presenting via the action step or script, the preview requires an HTML document to display. The content displayed should be a complete HTML document. When using HTML Previews to display content from the current draft, one would typically use Drafts template tags to insert dynamic content, but this information could also be loaded from files, include static content, be built by scripts…there are many possibilities. Like any browser display, your generated HTML can:

Controlling Flow

When an HTML Preview is displayed, it is displayed modally and pauses the execution of the action until it is closed by the user. Drafts makes the following JavaScript functions available to be called from script in the HTML document loaded in the preview:

Sending Data from Preview

If using an HTML Preview to gather input, JavaScript in the HTML document can send data back to Drafts using the following function: