-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathLinkGenerator.html
337 lines (307 loc) · 14.3 KB
/
LinkGenerator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Link Generator</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
<h1 style="text-align: center;">Link Generator</h1>
<h5 style="text-align: center;">The tool to help you generate the add-in link. Please try out!</h5>
<br>
<div class="container text-left">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-text" id="inputGroup-addin-id"><strong>Add-in ID</strong></span>
<input id="input-addin-id" type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="col">
<small style="font-style: italic;">
This is the unique add-in ID. It is case sensitive. Please use upper case in order to succeed. You can get the correct value by following below steps.
<br>
1. Go to
<a href="https://appsource.microsoft.com/en-US/" target="_blank"
rel="noopener noreferrer nofollow">https://appsource.microsoft.com/en-US/</a>
from your browser.
<br>
2. Input your Office add-in name in the search bar on top center of AppSource homepage and get results.
<br>
3. Click your add-in in the search results and then add-in information page will be automatically displayed in current tab.
<br>
4. The add-in ID is in the URL, between "product/office/" and "?tab=Overview".
<br>
For example, if the add-in information page is
<a href="https://appsource.microsoft.com/en-US/product/office/WA104380862?tab=Overview" target="_blank"
rel="noopener noreferrer nofollow">https://appsource.microsoft.com/en-US/product/office/WA104380862?tab=Overview</a>
, then the add-in ID is "WA104380862".
</small>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-addin-name"><strong>Add-in name</strong></span>
<input id="input-addin-name" type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="col">
<small style="font-style: italic;">
This is the exact add-in name in AppSource. You can get the correct value by following below steps.
<br>
1. Go to
<a href="https://appsource.microsoft.com/en-US/" target="_blank"
rel="noopener noreferrer nofollow">https://appsource.microsoft.com/en-US/</a>
from your browser.
<br>
2. Input your add-in ID in the search box on top center of AppSource homepage and get results.
<br>
3. Copy the add-in name which is below your add-in icon, and paste it here without any change.
<br>
For example, if the search result page is
<a href="https://appsource.microsoft.com/en-US/marketplace/apps?search=WA104380862&page=1" target="_blank"
rel="noopener noreferrer nofollow">https://appsource.microsoft.com/en-US/marketplace/apps?search=WA104380862&page=1</a>
, then the add-in name is "Script Lab, a Microsoft Garage project".
</small>
</div>
</div>
</div>
<div class="container text-left">
<div class="row">
<div class="col">
<div><strong>Supported products</strong></div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckWordDesktop">
<label class="form-check-label" for="flexCheckDefault">
Word
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckExcelDesktop">
<label class="form-check-label" for="flexCheckDefault">
Excel
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckPowerPointDesktop">
<label class="form-check-label" for="flexCheckDefault">
PowerPoint
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckWord">
<label class="form-check-label" for="flexCheckDefault">
Word on the Web
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckExcel">
<label class="form-check-label" for="flexCheckDefault">
Excel on the Web
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckPowerPoint">
<label class="form-check-label" for="flexCheckDefault">
PowerPoint on the Web
</label>
</div>
</div>
</div>
</div>
<br>
<div class="container text-left">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-text" id="inputGroup-language"><strong>Language</strong></span>
<input id="input-language" type="text" placeholder="en-US" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="col">
<small style="font-style: italic;">
This is the language of Add-in instructions after opened on Word/Excel/PowerPoint on Windows or Mac.
<br>
The default value is "en-US". Please set to other language if needed. For example: "de-DE", "fr-FR", "it-IT", "ja-JP", "zh-CN".
<br>
Please leave this blank if your Add-in is only available on Office on the Web.
</small>
</div>
</div>
<br>
<div class="container text-left">
<div class="row">
<div class="col">
<button id="get-url" type="button" class="btn btn-primary" onclick="getUrl()">Get the Link</button>
<hr>
<h6>The links generated for your add-in:</h6>
<p id="links"></p>
</div>
</div>
</div>
<script>
function generateGUID() {
var d = new Date().getTime();
if (
typeof performance !== 'undefined' &&
typeof performance.now === 'function'
) {
d += performance.now(); //use high-precision timer if available
}
return 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(
/[xy]/g,
function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
}
);
}
function getUrl() {
var addinId = document.getElementById("input-addin-id").value;
var addinName = document.getElementById("input-addin-name").value;
var language = document.getElementById("input-language").value;
var languageDefault = "en-US";
if (addinId == "") {
alert("Please input the add-in ID!");
return;
}
if (addinName == "") {
alert("Please input the add-in name!");
return;
}
if (document.getElementById("flexCheckPowerPointDesktop").checked == false &&
document.getElementById("flexCheckExcelDesktop").checked == false &&
document.getElementById("flexCheckWordDesktop").checked == false &&
document.getElementById("flexCheckWord").checked == false &&
document.getElementById("flexCheckExcel").checked == false &&
document.getElementById("flexCheckPowerPoint").checked == false) {
alert("Please select the supported products!");
return;
}
document.getElementById("links").innerHTML = "";
if (document.getElementById("flexCheckWordDesktop").checked) {
var correlation = generateGUID();
var language = language == "" ? languageDefault : language;
var linkWordDesktop = 'ms-word:https://api.addins.store.office.com/addinstemplate/'.concat(
language,
'/',
correlation,
'/',
addinId,
'/none/',
addinName.replace(/[^A-Za-z0-9]/g, '-'),
'.docx?omexsrctype=1&isexternallink=1');
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>Word: ',
'<a href="', linkWordDesktop, '" target="_blank" rel="noopener noreferrer">',
linkWordDesktop,
'</a>',
'<strong> Note: ',
correlation,
' is the correlation for diagnostic purpose. We strongly recommend you to runtime generate it and make it different per click. Please look at generateGUID() function as an example of how to generate it.</strong>',
'</p>'
);
}
if (document.getElementById("flexCheckExcelDesktop").checked) {
var correlation = generateGUID();
var language = language == "" ? languageDefault : language;
var linkExcelDesktop = 'ms-excel:https://api.addins.store.office.com/addinstemplate/'.concat(
language,
'/',
correlation,
'/',
addinId,
'/none/',
addinName.replace(/[^A-Za-z0-9]/g, '-'),
'.xlsx?omexsrctype=1&isexternallink=1');
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>Excel: ',
'<a href="', linkExcelDesktop, '" target="_blank" rel="noopener noreferrer">',
linkExcelDesktop,
'</a>',
'<strong> Note: ',
correlation,
' is the correlation for diagnostic purpose. We strongly recommend you to runtime generate it and make it different per click. Please look at generateGUID() function as an example of how to generate it.</strong>',
'</p>'
);
}
if (document.getElementById("flexCheckPowerPointDesktop").checked) {
var correlation = generateGUID();
var language = language == "" ? languageDefault : language;
var linkPowerPointDesktop = 'ms-powerpoint:https://api.addins.store.office.com/addinstemplate/'.concat(
language,
'/',
correlation,
'/',
addinId,
'/none/',
addinName.replace(/[^A-Za-z0-9]/g, '-'),
'.pptx?omexsrctype=1&isexternallink=1');
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>PowerPoint: ',
'<a href="', linkPowerPointDesktop, '" target="_blank" rel="noopener noreferrer">',
linkPowerPointDesktop,
'</a>',
'<strong> Note: ',
correlation,
' is the correlation for diagnostic purpose. We strongly recommend you to runtime generate it and make it different per click. Please look at generateGUID() function as an example of how to generate it.</strong>',
'</p>'
);
}
if (document.getElementById("flexCheckWord").checked) {
var linkWord = 'https://go.microsoft.com/fwlink/?linkid=2261098&templateid='.concat(addinId,
'&templatetitle=',
addinName);
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>Word on the web: ',
'<a href="', linkWord, '" target="_blank" rel="noopener noreferrer">',
linkWord,
'</a>',
'</p>'
);
}
if (document.getElementById("flexCheckExcel").checked) {
var linkExcel = 'https://go.microsoft.com/fwlink/?linkid=2261819&templateid='.concat(addinId,
'&templatetitle=',
addinName);
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>Excel on the web: ',
'<a href="', linkExcel, '" target="_blank" rel="noopener noreferrer">',
linkExcel,
'</a>',
'</p>'
);
}
if (document.getElementById("flexCheckPowerPoint").checked) {
var linkPowerPoint = 'https://go.microsoft.com/fwlink/?linkid=2261820&templateid='.concat(addinId,
'&templatetitle=',
addinName);
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<p>PowerPoint on the web: ',
'<a href="', linkPowerPoint, '" target="_blank" rel="noopener noreferrer">',
linkPowerPoint,
'</a>',
'</p>'
);
}
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<h5>If you are interested in promoting your add-in on your website, please take a look at <a href="https://github.com/OfficeDev/OfficeJSAddinWidget/tree/main/WebWidget" target="_blank" rel="noopener noreferrer nofollow">Web Widget.</a></h5>'
);
document.getElementById("links").innerHTML = document.getElementById("links").innerHTML.concat(
'<br><h6>Special Notice</h6>',
'<p>The deeplink can successfully open an Office document with your add-in and the end users can use your add-in for below scenarios only.</p>',
'<p> 1. The add-in is public published, so that it can be found from Office AppSource.</p>',
'<p> 2. The Office store is enabled for the end user.</p>');
}
</script>
</body>
</html>