THE HTML GENERATOR

OVERVIEW

Axure RP produces HTML, CSS, and JavaScript files—referred to collectively as the "HTML output"—for viewing via web browser. HTML generators are sets of options for controlling HTML outputs. A generator is used any time you publish your working RP file to a format viewable in a web browser—when previewing, when publishing to HTML, and when publishing to Axure Share.


To open your file's default HTML generator, go to "Publish > Generate HTML Files..." or click the "HTML" button in the Main Toolbar. (If you don't see the "HTML" button, right-click a blank spot on the toolbar and select "Customize Toolbar..." from the context menu. Then, check "HTML" under "Publish" on the right side of the dialog.)

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

MORE RESOURCES

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

THE GENERATE HTML DIALOG

THE "GENERAL" TAB

In the "General" tab of the Generate HTML dialog, enter the destination where the file will be saved when generating the HTML output, choose the browser in which it will open, and configure the HTML output sidebar.


The save location only applies when generating the HTML, not when previewing or when publishing to Axure Share. By default, on Windows, the generated HTML output files will be saved in <C:\Users\%username%\Documents\Axure\HTML>. You can find this folder using Windows's File Explorer by opening your "My Documents" folder, navigating to the "Axure" subfolder, and then picking "HTML". For the Mac version, the default folder is <~/Documents/Axure/HTML>.


In the "Open With" section you can choose whether the HTML output will open after being generated and, if it does, in which web browser. You can choose the default browser set in your operating system or you can explicitly select another from the list (which will include only browsers installed on your computer).


In the "Sidebar" section you can choose if the sidebar opens with the Pages tab open or closed, with the sidebar minimized (collapsed to the top-left corner of the page), or with the sidebar closed entirely.

THE "PAGES" TAB

In the "Pages" tab of the Generate HTML dialog, you can configure which pages will be included in the HTML output.


Click the "Generate All Pages" checkbox to include all pages in the RP file, or un-check this option and instead check checkboxes next to specific pages to include. Note that when you include a child page, its parent page will be included automatically.

THE "PAGE NOTES" TAB

In the "Page Notes" tab of the Generate HTML dialog, you can configure which page notes fields will be included and how they will be organized.


Click the "Include Page Notes" checkbox if you want page notes in the HTML output. Then, click the checkbox for each note field that should be included. Use the blue "up" and "down" arrows to set the order in which the note fields will appear. Page notes appear in the "Notes" tab of the HTML output sidebar.

THE "WIDGET NOTES" TAB

In the "Widget Notes" tab of the Generate HTML dialog, you can configure which widget notes fields will be included and how they will be organized.


Widget notes can be displayed in the prototype by clicking the footnote icon at the top-right of the widget or in the "Pages" tab of the prototype sidebar. Check the "Include Widget Notes Footnotes" checkbox if you want to be able to see each widget's notes by clicking its footnote icon. Check the "Include Widget Notes in Sidebar" checkbox if you want to see widget notes in the HTML output sidebar.


Check the "Use Name instead of Note Icon" option if you're including footnotes and want to show the widgets' names as part of their footnote icons.


In the main body of the dialog, click the checkbox for each note field that should be generated. Use the blue "up" and "down" arrows to set the order in which the note fields will appear.

THE "INTERACTIONS" TAB

In the "Interactions" tab of the Generate HTML dialog, you can configure interaction-related settings for the HTML output.


Click the checkbox "Include Console" if you want to include the Console tab of the HTML output sidebar, with its interaction-trace features.


In the "Case Behavior" section, you can make changes to the HTML output's behavior when an event is triggered. When a triggering event occurs (such as clicking a button with an OnClick interaction), you can choose from two options that will show a message containing the case name. If this is enabled, the person viewing the output will need to click the case name in order to fire the case. The options are "always show case names" and "show case names only when event has multiple cases". You can also choose "never show case names (use first case)".


The default option is "show case names only when event has multiple cases". This setting does not apply when the case uses conditional logic to choose which case should fire.


The section "Widgets with Reference Pages" determines how reference pages behave. Reference pages are most commonly used by shapes in flow diagrams and snapshot widgets. You can click to enable "clicking the widget opens the reference page" and "show icon to open the reference page in a new window".

THE "LOGO" TAB

In the "Logo" tab of the Generate HTML dialog, you can customize the HTML output's sidebar with a logo and caption text.


Click the "Logo" checkbox to include a logo if one has been uploaded. Click the "Import" button to add a logo image and the "Remove" button to remove a previously added image.


Click the "Caption" checkbox to include caption text, if any has been added. In the field, type the text that will appear below the logo in the sidebar.

THE "WEB FONTS" TAB

In the "Web Fonts" tab of the Generate HTML dialog, you can configure any web fonts used in the HTML output. Web fonts are an advanced feature that you can learn about in the Web Fonts and Font Mapping reference guide.

THE "FONT MAPPINGS" TAB

In the "Font Mappings" tab of the Generate HTML dialog, you can configure font mappings in the HTML output. Font mapping is an advanced feature (generally used alongside web fonts) that you can learn about in the Web Fonts and Font Mapping reference guide.

THE "MOBILE/DEVICE" TAB

The "Mobile/Device" tab of the Generate HTML dialog is used to configure the HTML output for viewing on a mobile device. Learn how to configure your mobile output.

THE "ADVANCED" TAB

In the "Advanced" tab of the Generate HTML dialog, you can add select additional customizations to your HTML output.


The setting "Use point (pt) instead of pixel (px) units for font size" is an advanced feature typically used in conjunction with changing the DPI of the project (Project > Project Settings > DPI Setting). If you have deliberately changed the DPI, you may wish to also check the checkbox to enable this feature.


Click the "Do not apply Sketch Effects" checkbox if you would like to see sketch effects when editing in Axure RP but show the non-sketchy version of the project in the browser.

MORE HTML GENERATORS

Add more generators to your RP file via "Publish > More Generators and Configurations…". This is useful if you regularly publish with different constraints (such as different included pages) for different audiences.


In the Generator Configurations dialog, click the "Add" dropdown and then choose "HTML". Name your new generator and then click the "Generate" button to configure and use it.

THE "DISCUSS" TAB

In the "Discuss" tab of the Generate HTML dialog, you can add the capability for viewers of the HTML output to have a conversation in the output's sidebar. Discussions are a standard feature when uploading a project to Axure Share, so if that's your intention then you can ignore this HTML generator option. If you're planning to host your HTML output elsewhere but would still like to include an Axure Share discussion in the sidebar, this option will allow for that. (The discussion content—text comments and screenshots of your HTML output's pages—will still be hosted on Axure Share's servers, though the RP file will not.)


To set up discussions, you must first create a six-character Axure Share ID. Go to share.axure.com and create or log in to your account. In the "My Projects" workspace or another workspace you create, click "New Project" in the toolbar. Do not upload an RP file. Name the project and click "Create".


Copy the six-character code in the "ID" column. Return to Axure RP, check the "Include Discussions" checkbox in the "Discuss" tab, and paste your copied code into the "AxShare ID" field.


Now, when you preview or generate and view in a web browser, you'll see the "Discuss" tab in the sidebar and can view discussions when you switch to that tab.