tableau · d45 · Oct 22, 2018 · Aug 29, 2018 · Aug 30, 2018 · Aug 30, 2018
diff --git a/_includes/docs_menu.html b/_includes/docs_menu.html
@@ -7,6 +7,9 @@
         </li>
 		<li>
             <a href="{{ site.baseurl }}/docs/trex_overview.html">What is a Dashboard Extension</a>
+        </li>
+        <li>
+            <a href="{{ site.baseurl }}/docs/ux_design.html" target="_blank">Design Guidelines for Dashboard Extensions</a>
         </li>
 		<li>
             <a href="{{ site.baseurl }}/docs/trex_create.html">Create a Dashboard Extension</a>
@@ -55,7 +58,10 @@
             <a href="{{ site.baseurl }}/docs/trex_error_handling.html">Error Codes for Extensions</a>
         </li>
         <li class="nav-header">Publishing and Distribution</li>
-	<li>
+        <li>
+            <a href="{{ site.baseurl }}/docs/trex_publish.html">Publishing a Dashboard Extension</a>
+        </li>
+        <li>
             <a href="{{ site.baseurl }}/docs/trex_contributing.html">Hosting and Contributing to the Community Portal</a>
         </li>
 

diff --git a/_includes/guide_menu.html b/_includes/guide_menu.html
@@ -0,0 +1,37 @@
+<div class="well docs-menu col-xs-12 col-sm-4 col-md-3">
+    {% include search_form.html %}
+    <ul class="nav nav-list">
+        <li>
+            <a href="{{ site.baseurl }}/docs/ux_design.html">Design Guidelines for Dashboard Extensions</a>
+        </li>
+        <li class="nav-header">Interaction Guidelines</li>
+		<li>
+            <a href="{{ site.baseurl }}/docs/Interaction_Guidelines/ux_build_test.html">Build, Test, Share</a>
+        </li>
+		<li>
+            <a href="{{ site.baseurl }}/docs/Interaction_Guidelines/ux_components_modes.html">Extension Components and Modes</a>
+        </li>
+		<li>
+            <a href="{{ site.baseurl }}/docs/Interaction_Guidelines/ux_controls_ui_patterns.html">Controls and UI Patterns</a>
+        </li>
+        <li class="nav-header">Style Guidelines</li>
+        <li>
+            <a href="{{ site.baseurl }}/docs/Style_Guidelines/ux_branding.html">Branding your Extension</a>
+        </li>
+        <li>
+                <a href="{{ site.baseurl }}/docs/Style_Guidelines/ux_layout.html">Layout</a>
+            </li>
+        <li>
+                <a href="{{ site.baseurl }}/docs/Style_Guidelines/ux_color.html">Color</a>
+            </li>
+            <li>
+                <a href="{{ site.baseurl }}/docs/Style_Guidelines/ux_fonts.html">Fonts</a>
+            </li>
+        <li class="nav-header">Deploying your Extension</li>
+        <li>
+        <li>
+            <a href="{{ site.baseurl }}/docs/ux_extension_gallery.html">Submitting your Extension to the Extension Gallery</a>
+        </li>
+
+    </ul>
+</div>
diff --git a/_includes/header.html b/_includes/header.html
@@ -14,10 +14,11 @@
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li><a href="{{ site.baseurl }}/docs/trex_getstarted.html">Docs</a></li>
+            <li><a href="{{ site.baseurl }}/docs/ux_design.html "target="_blank">Design Guidelines</a></li>
             <li><a href="{{ site.baseurl }}/docs/index.html" target="_blank">API Reference</a></li>
             <li><a href="{{ site.baseurl }}/docs/trex_examples.html">Samples</a></li>
             <li><a href="{{ site.baseurl }}/community/">Community Extensions</a></li>
-            <li><a target="_blank" href="https://community.tableau.com/community/developers/">Forum</a></li>
+            <li><a target="_blank" href="https://community.tableau.com/community/developers/extensions-api">Forum</a></li>
             <li><a href="{{ site.baseurl }}/docs/trex_release-notes.html">Release Notes</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">

diff --git a/_layouts/guide.html b/_layouts/guide.html
@@ -0,0 +1,32 @@
+---
+layout: guide
+---
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% include head.html %}
+</head>
+
+<body>
+    <div class="container">
+        {% include header.html %}
+        {% include guide_menu.html %}
+
+        <div class="content .col-xs-12 .col-sm-8 .col-md-9">
+            <h1>{{ page.title }}</h1>
+            <div class="edit-container">
+                <a href="https://github.com/tableau/projectfrelard/edit/master/{{ page.path }}" class="edit-links"><span class="glyphicon glyphicon-pencil"></span> Edit this page</a>
+                &nbsp;
+                <a href="https://github.com/tableau/projectfrelard/issues" class="edit-links"><span class="glyphicon glyphicon-flag"></span> Submit an issue</a>
+            </div>
+            <br />
+
+            {{ content }}
+            {% include footer.html %}
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/assets/design_guidelines.png b/assets/design_guidelines.png
diff --git a/assets/frelard_share_twb.png b/assets/frelard_share_twb.png
diff --git a/assets/online_blocked_extension.png b/assets/online_blocked_extension.png
diff --git a/assets/tableau_ui_logo.png b/assets/tableau_ui_logo.png
diff --git a/assets/trex_gallery.png b/assets/trex_gallery.png
diff --git a/community/index.md b/community/index.md
@@ -3,9 +3,8 @@ title: Community Portal
 layout: community
 ---
 
-The following extensions have been written by the Tableau Community and made available to use. Click on the extension to download the `.trex` file, then copy that file to `~\Documents\My Tableau Repository (Beta)\Extensions` to use the extension in Tableau.  If you write an extension, [please contribute!]({{ site.baseurl }}/docs/trex_contributing)
-
+The following extensions have been written by the Tableau Community and made available to use. Click to download the manifest file (`.trex`) file for the extension, or click the link to the source code and follow the instructions for the extension there.
 
+To use the extensions in Tableau, add an extension object to the dashboard, click **My Extensions** and select the `.trex` file for the extension. If you write an extension, [please contribute!]({{ site.baseurl }}/docs/trex_contributing)
 
 **Important:** These extensions are not written by or supported by Tableau.  If you encounter an issue with one of the extensions here, please reach out to the developer.
-
diff --git a/docs/Interaction_Guidelines/.gitkeep b/docs/Interaction_Guidelines/.gitkeep
diff --git a/docs/Interaction_Guidelines/imgs/.gitkeep b/docs/Interaction_Guidelines/imgs/.gitkeep
diff --git a/docs/Interaction_Guidelines/imgs/1-lifecycle.png b/docs/Interaction_Guidelines/imgs/1-lifecycle.png
diff --git a/docs/Interaction_Guidelines/imgs/2-about_dialog.png b/docs/Interaction_Guidelines/imgs/2-about_dialog.png
diff --git a/docs/Interaction_Guidelines/imgs/2-about_dialog_annotated.png b/docs/Interaction_Guidelines/imgs/2-about_dialog_annotated.png
diff --git a/docs/Interaction_Guidelines/imgs/2-chrome_menu.png b/docs/Interaction_Guidelines/imgs/2-chrome_menu.png
diff --git a/docs/Interaction_Guidelines/imgs/2-chrome_menu_annotated.png b/docs/Interaction_Guidelines/imgs/2-chrome_menu_annotated.png
diff --git a/docs/Interaction_Guidelines/imgs/2-config_dialog.png b/docs/Interaction_Guidelines/imgs/2-config_dialog.png
diff --git a/docs/Interaction_Guidelines/imgs/2-config_dialog_annotated.png b/docs/Interaction_Guidelines/imgs/2-config_dialog_annotated.png
diff --git a/docs/Interaction_Guidelines/imgs/3-activity_spinner-cover.png b/docs/Interaction_Guidelines/imgs/3-activity_spinner-cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-buttons-button_placement.png b/docs/Interaction_Guidelines/imgs/3-buttons-button_placement.png
diff --git a/docs/Interaction_Guidelines/imgs/3-buttons-cover.png b/docs/Interaction_Guidelines/imgs/3-buttons-cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-buttons-one_primary_button.png b/docs/Interaction_Guidelines/imgs/3-buttons-one_primary_button.png
diff --git a/docs/Interaction_Guidelines/imgs/3-buttons-specs.png b/docs/Interaction_Guidelines/imgs/3-buttons-specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-buttons-variations.png b/docs/Interaction_Guidelines/imgs/3-buttons-variations.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-side_tabs_specs.png b/docs/Interaction_Guidelines/imgs/3-dialogs-side_tabs_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-standard.png b/docs/Interaction_Guidelines/imgs/3-dialogs-standard.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-standard_specs.png b/docs/Interaction_Guidelines/imgs/3-dialogs-standard_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-tabs_specs.png b/docs/Interaction_Guidelines/imgs/3-dialogs-tabs_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-top_tabs_header_specs.png b/docs/Interaction_Guidelines/imgs/3-dialogs-top_tabs_header_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dialogs-top_tabs_specs.png b/docs/Interaction_Guidelines/imgs/3-dialogs-top_tabs_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-control_variations.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-control_variations.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-controls_and_standard_menu_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-controls_and_standard_menu_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-controls_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-controls_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-cover.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-icon_controls_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-icon_controls_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-line_controls_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-line_controls_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_align.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_align.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_and_flyout_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_and_flyout_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_variations.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_variations.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_variations_spec.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-menu_variations_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-dropdowns-stacking.png b/docs/Interaction_Guidelines/imgs/3-dropdowns-stacking.png
diff --git a/docs/Interaction_Guidelines/imgs/3-selectors-cover.png b/docs/Interaction_Guidelines/imgs/3-selectors-cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-selectors-pickers_spec.png b/docs/Interaction_Guidelines/imgs/3-selectors-pickers_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-selectors-sliders_spec.png b/docs/Interaction_Guidelines/imgs/3-selectors-sliders_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-selectors-steppers_spec.png b/docs/Interaction_Guidelines/imgs/3-selectors-steppers_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-selectors-toggle_spec.png b/docs/Interaction_Guidelines/imgs/3-selectors-toggle_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-side_tabs_labeled.png b/docs/Interaction_Guidelines/imgs/3-side_tabs_labeled.png
diff --git a/docs/Interaction_Guidelines/imgs/3-standard_dialog_widths.png b/docs/Interaction_Guidelines/imgs/3-standard_dialog_widths.png
diff --git a/docs/Interaction_Guidelines/imgs/3-tabs_cover.png b/docs/Interaction_Guidelines/imgs/3-tabs_cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-text_field_default_specs.png b/docs/Interaction_Guidelines/imgs/3-text_field_default_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-text_field_search_specs.png b/docs/Interaction_Guidelines/imgs/3-text_field_search_specs.png
diff --git a/docs/Interaction_Guidelines/imgs/3-text_fields_cover.png b/docs/Interaction_Guidelines/imgs/3-text_fields_cover.png
diff --git a/docs/Interaction_Guidelines/imgs/3-text_fields_stacking.png b/docs/Interaction_Guidelines/imgs/3-text_fields_stacking.png
diff --git a/docs/Interaction_Guidelines/imgs/3-tooltips.png b/docs/Interaction_Guidelines/imgs/3-tooltips.png
diff --git a/docs/Interaction_Guidelines/imgs/3-tooltips_content.png b/docs/Interaction_Guidelines/imgs/3-tooltips_content.png
diff --git a/docs/Interaction_Guidelines/imgs/3-tooltips_placement.png b/docs/Interaction_Guidelines/imgs/3-tooltips_placement.png
diff --git a/docs/Interaction_Guidelines/imgs/3-tooltips_spec.png b/docs/Interaction_Guidelines/imgs/3-tooltips_spec.png
diff --git a/docs/Interaction_Guidelines/imgs/3-top_tabs_labeled.png b/docs/Interaction_Guidelines/imgs/3-top_tabs_labeled.png
diff --git a/docs/Interaction_Guidelines/imgs/gifs/2-config_popup.gif b/docs/Interaction_Guidelines/imgs/gifs/2-config_popup.gif
diff --git a/docs/Interaction_Guidelines/imgs/gifs/3-Large.gif b/docs/Interaction_Guidelines/imgs/gifs/3-Large.gif
diff --git a/docs/Interaction_Guidelines/imgs/gifs/3-Large_on_Dark_Background.gif b/docs/Interaction_Guidelines/imgs/gifs/3-Large_on_Dark_Background.gif
diff --git a/docs/Interaction_Guidelines/imgs/gifs/3-Large_with_Underlay.gif b/docs/Interaction_Guidelines/imgs/gifs/3-Large_with_Underlay.gif
diff --git a/docs/Interaction_Guidelines/imgs/gifs/3-Small)on_Dark_Background.gif b/docs/Interaction_Guidelines/imgs/gifs/3-Small)on_Dark_Background.gif
diff --git a/docs/Interaction_Guidelines/imgs/gifs/3-Small.gif b/docs/Interaction_Guidelines/imgs/gifs/3-Small.gif
diff --git a/docs/Interaction_Guidelines/ux_build_test.md b/docs/Interaction_Guidelines/ux_build_test.md
@@ -0,0 +1,64 @@
+---
+title: Build, Test, Share
+layout: guide
+---
+
+
+This section serves as a broad overview of the developer experience and considerations of making extensions. 
+
+&nbsp;
+
+![lifecycle](./imgs/1-lifecycle.png)
+
+&nbsp;
+
+## Build
+The first thing to do is start running sample extension code from the Extensions API Documentation. **Make sure that your sample code works** and your environment is set up properly before jumping into building a new extension. 
+
+Once you're ready to go, you can start building and customizing your extension. Expect to iterate through cycles of developing and designing your extension using our API documentation and these design guidelines.
+
+#### Get started with these resources:
+
+* [Extensions API Documentation](https://tableau.github.io/extensions-api/)<br>The Extensions API includes all the information you need to build an extension.
+
+* [Community Forums](https://community.tableau.com/community/developers/extensions-api/overview)<br>Participate in a community of developers that are passionate about creating extensions.
+
+* [Extension Gallery (beta)](https://extensiongallery.tableau.com/)<br>Explore and use some of the extensions our partners have created.
+
+* [Developer Preview](https://prerelease.tableau.com/extensions-api)<br>Participate in the Developer Preview for our Extensions API. Be invited to bi-weekly sprint demos with Tableau's development team and have the opportunity to give ongoing feedback.
+
+&nbsp;
+
+## Test
+Ensure that your extension works properly for different test cases. Try it on your own dashboards, test it with others, and uncover possible edge cases. 
+
+Consider that dashboard extensions can be both **configured** and **viewed** in Tableau. These terms refer to two usage modes we recommend for extensions. To read about these modes and their audiences, learn more at **[Extension Components and Modes]({{ site.baseurl }}/docs/Interaction_Guidelines/ux_components_modes.html)**.
+
+
+&nbsp; 
+
+## Share
+After you've completed making your extension, you may want to share your extension for others to use. Here are some places you might think about sharing your extension.
+
+
+##### Extension Gallery
+Tableau has released the [Extension Gallery](https://extensiongallery.tableau.com/), a place to explore and download some extensions that our partners have created. If you would like to share your extension to our gallery, learn more at [Sharing to the Extension Gallery]({{site.baseurl}}/docs/ux_extension_gallery.html).
+
+##### Community Forums
+Tableau also has a [Community Forum](https://community.tableau.com/community/developers/extensions-api/overview) for developers to discuss extensions and the Extensions API.
+
+----- &nbsp;
+
+While you might not choose to share your extension directly with Tableau, we encourage you to share your extension through other platforms of your choice! Use it internally at your company or for yourself, consider open source platforms, share over social media channels. How you go about sharing your extension with the world is entirely up to you.
+
+&nbsp;
+
+&nbsp;
+
+---
+<!-- 
+### <div id="expand-box"><div id="expand-box-header">[<span style="float: right;">2 – Extension Components and Modes &#8594;</span>](2 - Extension Components and Modes.md)</div></div>
+
+##### <div id="expand-box"><div id="expand-box-header">[<span style="float: left;">Interaction Guidelines</span>](Interaction Guidelines)</div></div>
+
+-->
diff --git a/docs/Interaction_Guidelines/ux_components_modes.md b/docs/Interaction_Guidelines/ux_components_modes.md
@@ -0,0 +1,178 @@
+---
+title: Extension Components and Modes
+layout: guide
+---
+
+
+This section outlines the overall experience of using an extension in a dashboard. 
+
+**In this section**
+
+* TOC
+{:toc}
+
+<!---
+#### Foundation
+Every dashboard extension has two general user experiences and three main components. 
+
+* [User Types](#user-types)
+* [Extension Container](#extension-container)
+* [Configuration Dialog](#configuration-dialog)
+* [About Extension Dialog](#about-extension-dialog)
+
+#### Modes
+After acquainting yourself with the user types and components, read about use modes for extensions.
+
+* [Configuration Mode](#configuration-mode)
+* [Viewing Mode](#viewing-mode)
+
+-->
+&nbsp;
+
+---
+# Foundation
+Every dashboard extension has two general user experiences (or *user types*) and three main components. 
+
+
+## User Types
+Extensions must be designed with two types of dashboard users in mind: authors and viewers (consumers). 
+
+#### Dashboard Author
+Dashboard Authors are users that create dashboards and work directly with data in Tableau, both on Desktop and Online authoring modes. Authors get full editing capability over an extension’s configuration settings. 
+
+On dashboards, authors primarily use **[Configuration Mode](#configuration-mode)** and can access **[Viewing Mode](#viewing-mode)**.
+
+#### Dashboard Viewer
+Dashboard Viewers are users that can only use dashboards with extensions on Tableau Online. Viewers usually don't set up a workbook or extension themselves, so they don’t have editing capability over an extension’s configuration settings.
+
+On dashboards, viewers interact with extensions only in **[Viewing Mode](#viewing-mode)**. 
+
+&nbsp;
+
+&nbsp;
+
+
+## Extension Container
+The extension container lives in a dashboard, and is the primary place to display content for both dashboard authors and viewers. For example, this area could be used for displaying a custom visualization or user input controls to further customize dashboard data. 
+
+This is where authors can access the dropdown menu for more options, such as configuration and information about the extension.
+
+![extension container](imgs/2-chrome_menu.png)
+
+<i>Learn more about branding your extension container at [Branding your Extension]({{site.baseurl}}/docs/Style_Guidelines/ux_branding.html#extension-container).<i>
+
+&nbsp;
+
+&nbsp;
+
+## Configuration Dialog
+The configuration dialog is the primary way that dashboard authors can customize an extension in their dashboards. 
+
+This dialog is only available to dashboard authors, It is primarily accessible through the dropdown menu present on the Extension Container. It is not visible to regular dashboard viewers. Learn more below at **[Configuration Mode](#configuration-mode)**.
+
+![configuration dialog](imgs/2-config_dialog.png)
+
+<i>Learn more about branding your configuration dialog at [Branding your Extension]({{site.baseurl}}/docs/Style_Guidelines/ux_branding.html#configuration-dialog).
+</i>
+&nbsp;
+
+&nbsp;
+
+
+## About Extension Dialog
+The about extension dialog exists for dashboard authors to access support and version information about the extension in the dashboard. Currently, this dialog is not available for regular dashboard viewers on Tableau Online. Learn more below at **[Configuration Mode](#configuration-mode)**
+
+![about extension dialog](imgs/2-about_dialog.png)
+
+&nbsp;
+
+&nbsp;
+
+&nbsp;
+
+
+# Modes
+After acquainting yourself with the user types and components, read about use modes for extensions.
+
+&nbsp;
+
+## Configuration Mode
+This mode is available only to dashboard authors. Here, we describe how configuration mode works across the extension components.
+
+#### Extension Container
+The extension container offers a high level of functionality for dashboard authors. This is where authors can access the extension menu to reach the configuration dialog and other information about the extension.
+
+![extension container](imgs/2-chrome_menu_annotated.png)
+
+&nbsp;
+
+#### Configuration Dialog
+The configuration dialog allows dashboard authors to customize extensions in their dashboards. These are some general components that a configuration dialog should ideally include.
+
+![config dialog example](imgs/2-config_dialog_annotated.png)
+
+|     | Details |
+| --- | ------- |
+| **Extension Name** | The name of the extension is clearly displayed at the top of the configuration dialog in title case. |
+| **Instructions** (optional) | Write 1-2 lines of simple instructions for a user to successfully set up the extension. |
+| **User Input Sections** | This is the main zone where user input fields and controls live. You can create multiple sections to separate content from each other. Ensure that sections are clearly titled and spaced apart from each other. |
+| **Help Tag** | This dialog is activated by hovering one's cursor over the icon, and helps the user learn more about the extension.|
+| **Tagline**  | The tagline is one sentence in the help tag that explains what the extension does. The maximum character limit is 96 characters.|
+| **Confirmation** | Make sure there is a clear way for users to apply changes made while configuring the extension. |
+
+<i>Learn more about [Controls and UI Patterns]({{site.baseurl}}/docs/Interaction_Guidelines/ux_controls_ui_patterns.html) to use in your configuration dialog.</i>
+
+&nbsp;
+
+##### Automatic Configuration Popup
+Many extensions require an author to configure the extension before using it in the dashboard. The configuration dialog is accessible through the extension dropdown menu, but to speed up the process, you can skip directly to the configuration dialog. You can set a configuration dialog to pop up automatically after an author adds your extension into their dashboard. 
+
+![automatic configuration popup](imgs/gifs/2-config_popup.gif)
+
+While this is optional, **we strongly recommend using this popup pattern** because when an author is configuring the extension for the first time, there often isn't any content present in the extension container until the extension has been configured. Using this popup pattern will allow authors to start configuring the extension right away.
+
+<i>Learn more about how to implement this popup at [Add a Configuration Popup Dialog (Extensions API Documentation)](https://tableau.github.io/extensions-api/docs/trex_configure.html).</i>
+
+&nbsp;
+
+#### About Extension Dialog
+The About Extension Dialog is automatically created using the content from your .trex manifest, which includes items such as your extension’s name, developer info, support, source ID, version info, etc. This is also accessible through the dropdown menu in the extension container.
+
+![about extension dialog](imgs/2-about_dialog_annotated.png)
+
+<i>Learn more about the manifest file at [Tableau Extension Manifest File (Extensions API Documentation)](https://tableau.github.io/extensions-api/docs/trex_manifest.html).</i>
+
+
+
+
+&nbsp;
+
+&nbsp;
+
+&nbsp;
+
+## Viewing Mode
+This mode is available to both dashboard authors and viewers. 
+
+* **Authors** have access to configuration mode and viewing mode in both Tableau Desktop and Online.
+* **Viewers** only have access to viewing mode on Tableau Online. Viewers can't access configuration and about dialogs, but can use an extension as it appears in a dashboard on Tableau Online.
+
+#### Extension Container
+Viewers can only interact with dashboard extensions in Tableau Online. When viewing, there are no settings around containers or zones that viewers can access. The extension container appears just as other containers in the dashboard.
+
+However, if viewers have permission to edit the workbook on Tableau Online or download the workbook to their local machine, they can access all of the same settings described above in **[Configuration Mode](#configuration-mode)**. 
+
+
+&nbsp;
+
+&nbsp;
+
+
+---
+<!-- 
+
+### <div id="expand-box"><div id="expand-box-header">[<span style="float: right;"> 3 – Controls and UI Patterns &#8594;</span>](3 - Controls and UI Patterns.md)</div></div>
+
+##### <div id="expand-box"><div id="expand-box-header">[<span style="float: left;">&#8592; 1 – Build, Use, Share</span>](1 - Build, Use, Share.md)</div></div>
+
+-->