Skip to content

Commit 5ec7ed0

Browse files
laurent-miclaurent-mic
authored
Merge pull request #351 from Microsoft/laurent/new_showcases
Add Insights to action and Themes showcases
2 parents c88de82 + 335a683 commit 5ec7ed0

23 files changed

+1301
-36
lines changed

‎demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"fetch": "^1.0.0",
3636
"http-server": "^0.10.0",
3737
"jquery": "^3.1.0",
38-
"powerbi-client": "^2.6.6",
38+
"powerbi-client": "^2.6.9",
3939
"syntaxhighlighter": "4.0.1"
4040
},
4141
"devDependencies": {}

‎demo/v2-demo/images/closeWhite.png

262 Bytes
Loading

‎demo/v2-demo/images/insightToActionIcon.svg

Lines changed: 87 additions & 0 deletions
Loading

‎demo/v2-demo/images/themesIcon.svg

Lines changed: 28 additions & 0 deletions
Loading

‎demo/v2-demo/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@
7070

7171
<script src="live_showcases/custom_layout/showcase_custom_layout.js"></script>
7272
<script src="live_showcases/bookmarks/showcase_bookmarks.js"></script>
73+
<script src="live_showcases/themes/showcase_themes.js"></script>
74+
<script src="live_showcases/insight_to_action/showcase_insight_to_action.js"></script>
7375

7476
</body>
7577
</html>

‎demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h3>Capture & share bookmarks</h3>
2525
</div>
2626

2727
<div id="showcaseContent">
28-
<div id="bookmarksArea">
28+
<div id="leftShowcaseWindow">
2929
<div class="editorTitle">Bookmarks</div>
3030
<div id="bookmarksWrapper">
3131
<div id="bookmarksList">

‎demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function embedBookmarksReport() {
2828
// Get report Id from session
2929
var embedReportId = GetSession(SessionKeys.EmbedId);
3030

31-
// We give the user View permissions
31+
// Use View permissions
3232
var permissions = models.Permissions.View;
3333

3434
// Embed configuration used to describe the what and how to embed
@@ -85,7 +85,7 @@ function embedSharedBookmark(enableFilterPane, bookmarkState) {
8585
// Get report Id from session
8686
var embedReportId = GetSession(SessionKeys.EmbedId);
8787

88-
// We give the user View permissions
88+
// Use View permissions
8989
var permissions = models.Permissions.View;
9090

9191
// Get the bookmark name from url param
@@ -261,7 +261,7 @@ function getBookmarkByID(bookmarkId) {
261261
// Build bookmark radio button HTML element
262262
function buildBookmarkElement(bookmark) {
263263
var labelElement = document.createElement("label");
264-
labelElement.setAttribute("class", "bookmarkContainer");
264+
labelElement.setAttribute("class", "showcaseRadioContainer");
265265

266266
var inputElement = document.createElement("input");
267267
inputElement.setAttribute("type", "radio");
@@ -271,7 +271,7 @@ function buildBookmarkElement(bookmark) {
271271
labelElement.appendChild(inputElement);
272272

273273
var spanElement = document.createElement("span");
274-
spanElement.setAttribute("class", "bookmarkCheckmark");
274+
spanElement.setAttribute("class", "showcaseRadioCheckmark");
275275
labelElement.appendChild(spanElement);
276276

277277
var secondSpanElement = document.createElement("span");

‎demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ <h3>Dynamic report layout</h3>
2020
</div>
2121

2222
<div id="showcaseContent">
23-
<div id="visualsArea">
23+
<div id="leftShowcaseWindow">
2424
<div class="editorTitle">Report visuals (Hide/Show)</div>
25-
<div id="visualsWrapper">
25+
<div id="showcaseItemsWrapper">
2626
<div id="visualsList">
2727
</div>
2828
</div>

‎demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function embedCustomLayoutReport() {
3737
// Get report Id from session
3838
var embedReportId = GetSession(SessionKeys.EmbedId);
3939

40-
// We give the user View permissions
40+
// Use View permissions
4141
var permissions = models.Permissions.View;
4242

4343
// Embed configuration used to describe the what and how to embed

‎demo/v2-demo/live_showcases/insight_to_action/showcase_insight_to_action.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<div id="startTooltip">
2+
<div class="btnCloseTooltip" onclick="onTootipClicked('startTooltip');">
3+
<img src="images\closeWhite.png"/>
4+
</div>
5+
<div class="showcaseTooltipText">Start a campaign with these customers</div>
6+
<div class="showcaseTooltipSubText">Hover over the table, and click on the three dots icon '...' at the upper right corner.</div>
7+
<div class="tooltipFooter">
8+
<div class="btnShowcaseTooltip yellowBtn" onclick="onTootipClicked('startTooltip');">
9+
Next
10+
</div>
11+
<div class="tooltipNumber">
12+
1 of 2
13+
</div>
14+
</div>
15+
</div>
16+
17+
<div id="showcases-text">
18+
<h3>Insight to action</h3>
19+
<br>
20+
<div id="showcases-description">
21+
This showcase demonstrates one example of how to leverage the <a href="https://go.microsoft.com/fwlink/?linkid=2063102">‘menu extensions’</a> and <a href="https://go.microsoft.com/fwlink/?linkid=2062683">‘export data’</a> APIs to give users the ability to take meaningful actions within seconds from analytics. The sample contains a basic customer relationship management module. The main table shows a list of customers who have not engaged with your service lately, and might not return. You can send these customers an offer to try and retain them.<br><br>
22+
&nbsp;<b>1. Choose a list of customers</b><br>
23+
<div class="text-tab">
24+
The sales report shows a list of possible churning customers. Use the slicers to define the list of customers you want to engage with.<br><br>
25+
</div>
26+
&nbsp;<b>2. Take actions to get them engaged</b><br>
27+
<div class="text-tab">
28+
Follow the instructions on the tooltips to take actions straight from within the report.<br>
29+
</div>
30+
</div>
31+
<div class="showcases-buttons">
32+
<a class="selectButton floatButton" href="https://go.microsoft.com/fwlink/?linkid=2063102" target="_blank">Documentation</a>
33+
<a class="selectButton floatButton" href="https://go.microsoft.com/fwlink/?linkid=2062950" target="_blank">Get Code</a>
34+
</div>
35+
</div>
36+
37+
<div id="showcaseContent">
38+
<div id="insightToActionShowcaseEmbedArea">
39+
<div class="editorTitle">Embedded view</div>
40+
<div id="showcase-embedded-view">
41+
<div id="embedContainer" class="iframeContainer active"></div>
42+
<div id="dialogMask"></div>
43+
<div id="distributionDialog" class="insightToActionDialog">
44+
<div class="dialogHeader">
45+
<span class="dialogHeaderText">Campaign distribution list</span>
46+
<span id="btnCloseDistributionDialog" onclick="onCloseDialog('distributionDialog');">
47+
<img src="images\close.png"/>
48+
</span>
49+
</div>
50+
<div class="dialogBody">
51+
<div id="dialogTable"></div>
52+
</div>
53+
<div class="dialogFooter">
54+
<div class="insightToActionDialogBtn whiteBtn" onclick="onSendClicked('coupon');">
55+
Send coupon
56+
</div>
57+
<div class="insightToActionDialogBtn whiteBtn" onclick="onSendClicked('discount');">
58+
Send discount
59+
</div>
60+
<div class="insightToActionDialogBtn cancelBtn whiteBtn" onclick="onCloseDialog('distributionDialog');">
61+
Cancel
62+
</div>
63+
</div>
64+
<div id="dialogTooltip">
65+
<div class="btnCloseTooltip" onclick="onTootipClicked('dialogTooltip');">
66+
<img src="images\closeWhite.png"/>
67+
</div>
68+
<div class="showcaseTooltipText">Send offer</div>
69+
<div class="showcaseTooltipSubText">Choose the customers and send them an offering</div>
70+
<div class="tooltipFooter">
71+
<div class="btnShowcaseTooltip yellowBtn" onclick="onTootipClicked('dialogTooltip');">
72+
Got it
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
<div id="sendDialog" class="insightToActionDialog">
78+
<div class="dialogHeader">
79+
<span class="dialogHeaderText"></span>
80+
<span id="btnCloseDistributionDialog" onclick="onCloseDialog('sendDialog');">
81+
<img src="images\close.png"/>
82+
</span>
83+
</div>
84+
<div class="dialogBody">
85+
<div class="sendDialogRow">
86+
<div class="sendDialogField">Title</div>
87+
<input type="text" id="title" name="title" value="Special offer just for you" />
88+
</div>
89+
<div class="sendDialogRow">
90+
<div class="sendDialogField">Body</div>
91+
<textarea name="messageBody"></textarea>
92+
</div>
93+
</div>
94+
<div class="dialogFooter">
95+
<div class="insightToActionDialogBtn cancelBtn whiteBtn" onclick="onCloseDialog('sendDialog');">
96+
Cancel
97+
</div>
98+
<div class="insightToActionDialogBtn sendBtn yellowBtn" onclick="onSendDialogSendClicked();">
99+
Send
100+
</div>
101+
</div>
102+
</div>
103+
<div id="messageSent">Sent</div>
104+
</div>
105+
</div>
106+
</div>
107+
108+
109+
110+
<script>
111+
$(document).ready(function() {
112+
embedInsightsToActionReport();
113+
window.addEventListener("resize", setTooltipPosition);
114+
});
115+
</script>

0 commit comments

Comments
 (0)