Skip to content

Commit 8e83364

Browse files
stephendeocastephendeoca
committed
Fix TFSID 1212136: Updated sample with dialog style
1 parent 0a58e84 commit 8e83364

File tree

4 files changed

+72
-4
lines changed

4 files changed

+72
-4
lines changed

‎Samples/UINamespace-sandboxed/uiNamespace.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,27 @@
2929
Configure extension to proceed.
3030
</div>
3131
</p>
32+
<div class="container" style="border:1px solid #cecece">
33+
<h6>Dialog Style</h6>
34+
<div class="form-check">
35+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
36+
<label class="form-check-label" for="modalStyle">
37+
Modal
38+
</label>
39+
</div>
40+
<div class="form-check">
41+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
42+
<label class="form-check-label" for="modelessStyle">
43+
Modeless
44+
</label>
45+
</div>
46+
<div class="form-check">
47+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
48+
<label class="form-check-label" for="windowStyle">
49+
Window
50+
</label>
51+
</div>
52+
</div>
3253
</div>
3354
</body>
3455
</html>

‎Samples/UINamespace-sandboxed/uiNamespace.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,19 @@
3939
// to be updated if the extension is deployed to a new location.
4040
const popupUrl = 'uiNamespaceDialog.html';
4141

42+
// This checks for the selected dialog style in the radio form.
43+
let dialogStyle;
44+
const dialogStyleOptions = document.getElementsByName('dialogStyleRadio');
45+
if (dialogStyleOptions[0].checked) {
46+
dialogStyle = tableau.DialogStyle.Modal;
47+
}
48+
else if (dialogStyleOptions[1].checked) {
49+
dialogStyle = tableau.DialogStyle.Modeless;
50+
}
51+
else {
52+
dialogStyle = tableau.DialogStyle.Window;
53+
}
54+
4255
/**
4356
* This is the API call that actually displays the popup extension to the user. The
4457
* popup is always a modal dialog. The only required parameter is the URL of the popup,
@@ -51,7 +64,7 @@
5164
* default interval of refresh.
5265
*/
5366
tableau.extensions.ui
54-
.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 })
67+
.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle })
5568
.then((closePayload) => {
5669
// The promise is resolved when the dialog has been expectedly closed, meaning that
5770
// the popup extension has called tableau.extensions.ui.closeDialog.

‎Samples/UINamespace/uiNamespace.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
1111

1212
<!-- Bootstrap -->
13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
14-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
1515

1616
<!-- Extensions Library (this will be hosted on a CDN eventually) -->
1717
<script src="../../lib/tableau.extensions.1.latest.js"></script>
@@ -29,6 +29,27 @@
2929
Configure extension to proceed.
3030
</div>
3131
</p>
32+
<div class="container" style="border:1px solid #cecece">
33+
<h6>Dialog Style</h6>
34+
<div class="form-check">
35+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
36+
<label class="form-check-label" for="modalStyle">
37+
Modal
38+
</label>
39+
</div>
40+
<div class="form-check">
41+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
42+
<label class="form-check-label" for="modelessStyle">
43+
Modeless
44+
</label>
45+
</div>
46+
<div class="form-check">
47+
<input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
48+
<label class="form-check-label" for="windowStyle">
49+
Window
50+
</label>
51+
</div>
52+
</div>
3253
</div>
3354
</body>
3455
</html>

‎Samples/UINamespace/uiNamespace.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,19 @@
4040
// to be updated if the extension is deployed to a new location.
4141
const popupUrl = `${window.location.origin}/Samples/UINamespace/uiNamespaceDialog.html`;
4242

43+
// This checks for the selected dialog style in the radio form.
44+
let dialogStyle;
45+
const dialogStyleOptions = document.getElementsByName('dialogStyleRadio');
46+
if (dialogStyleOptions[0].checked) {
47+
dialogStyle = tableau.DialogStyle.Modal;
48+
}
49+
else if (dialogStyleOptions[1].checked) {
50+
dialogStyle = tableau.DialogStyle.Modeless;
51+
}
52+
else {
53+
dialogStyle = tableau.DialogStyle.Window;
54+
}
55+
4356
/**
4457
* This is the API call that actually displays the popup extension to the user. The
4558
* popup is always a modal dialog. The only required parameter is the URL of the popup,
@@ -52,7 +65,7 @@
5265
* default interval of refresh.
5366
*/
5467
tableau.extensions.ui
55-
.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 })
68+
.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle })
5669
.then((closePayload) => {
5770
// The promise is resolved when the dialog has been expectedly closed, meaning that
5871
// the popup extension has called tableau.extensions.ui.closeDialog.

0 commit comments

Comments
 (0)