From 8e83364a32ce5ba611b4c98dcb66cca371bf7690 Mon Sep 17 00:00:00 2001
From: Stephen Montes De Oca <s.montesdeoca@tableau.com>
Date: Tue, 16 Aug 2022 10:30:22 -0700
Subject: [PATCH] Fix TFSID 1212136: Updated sample with dialog style

---
 .../UINamespace-sandboxed/uiNamespace.html    | 21 ++++++++++++++++
 Samples/UINamespace-sandboxed/uiNamespace.js  | 15 ++++++++++-
 Samples/UINamespace/uiNamespace.html          | 25 +++++++++++++++++--
 Samples/UINamespace/uiNamespace.js            | 15 ++++++++++-
 4 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/Samples/UINamespace-sandboxed/uiNamespace.html b/Samples/UINamespace-sandboxed/uiNamespace.html
index 37240347..0a9dcc2a 100644
--- a/Samples/UINamespace-sandboxed/uiNamespace.html
+++ b/Samples/UINamespace-sandboxed/uiNamespace.html
@@ -29,6 +29,27 @@
           Configure extension to proceed.
         </div>
       </p>
+      <div class="container" style="border:1px solid #cecece">
+        <h6>Dialog Style</h6>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
+          <label class="form-check-label" for="modalStyle">
+            Modal
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
+          <label class="form-check-label" for="modelessStyle">
+            Modeless
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
+          <label class="form-check-label" for="windowStyle">
+            Window
+          </label>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/Samples/UINamespace-sandboxed/uiNamespace.js b/Samples/UINamespace-sandboxed/uiNamespace.js
index c35ffe1c..dae4e6bc 100644
--- a/Samples/UINamespace-sandboxed/uiNamespace.js
+++ b/Samples/UINamespace-sandboxed/uiNamespace.js
@@ -39,6 +39,19 @@
     // to be updated if the extension is deployed to a new location.
     const popupUrl = 'uiNamespaceDialog.html';
 
+    // This checks for the selected dialog style in the radio form.
+    let dialogStyle;
+    const dialogStyleOptions = document.getElementsByName('dialogStyleRadio');
+    if (dialogStyleOptions[0].checked) {
+      dialogStyle = tableau.DialogStyle.Modal;
+    }
+    else if (dialogStyleOptions[1].checked) {
+      dialogStyle = tableau.DialogStyle.Modeless;
+    }
+    else {
+      dialogStyle = tableau.DialogStyle.Window;
+    }
+
     /**
      * This is the API call that actually displays the popup extension to the user.  The
      * popup is always a modal dialog.  The only required parameter is the URL of the popup,
@@ -51,7 +64,7 @@
      * default interval of refresh.
      */
     tableau.extensions.ui
-      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 })
+      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle })
       .then((closePayload) => {
         // The promise is resolved when the dialog has been expectedly closed, meaning that
         // the popup extension has called tableau.extensions.ui.closeDialog.
diff --git a/Samples/UINamespace/uiNamespace.html b/Samples/UINamespace/uiNamespace.html
index 8dddd423..8fa6e943 100644
--- a/Samples/UINamespace/uiNamespace.html
+++ b/Samples/UINamespace/uiNamespace.html
@@ -10,8 +10,8 @@
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
     <!-- Bootstrap -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
     <script src="../../lib/tableau.extensions.1.latest.js"></script>
@@ -29,6 +29,27 @@
           Configure extension to proceed.
         </div>
       </p>
+      <div class="container" style="border:1px solid #cecece">
+        <h6>Dialog Style</h6>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
+          <label class="form-check-label" for="modalStyle">
+            Modal
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
+          <label class="form-check-label" for="modelessStyle">
+            Modeless
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
+          <label class="form-check-label" for="windowStyle">
+            Window
+          </label>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/Samples/UINamespace/uiNamespace.js b/Samples/UINamespace/uiNamespace.js
index 52263433..c0f692bc 100644
--- a/Samples/UINamespace/uiNamespace.js
+++ b/Samples/UINamespace/uiNamespace.js
@@ -40,6 +40,19 @@
     // to be updated if the extension is deployed to a new location.
     const popupUrl = `${window.location.origin}/Samples/UINamespace/uiNamespaceDialog.html`;
 
+    // This checks for the selected dialog style in the radio form.
+    let dialogStyle;
+    const dialogStyleOptions = document.getElementsByName('dialogStyleRadio');
+    if (dialogStyleOptions[0].checked) {
+      dialogStyle = tableau.DialogStyle.Modal;
+    }
+    else if (dialogStyleOptions[1].checked) {
+      dialogStyle = tableau.DialogStyle.Modeless;
+    }
+    else {
+      dialogStyle = tableau.DialogStyle.Window;
+    }
+
     /**
      * This is the API call that actually displays the popup extension to the user.  The
      * popup is always a modal dialog.  The only required parameter is the URL of the popup,
@@ -52,7 +65,7 @@
      * default interval of refresh.
      */
     tableau.extensions.ui
-      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 })
+      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle })
       .then((closePayload) => {
         // The promise is resolved when the dialog has been expectedly closed, meaning that
         // the popup extension has called tableau.extensions.ui.closeDialog.