-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
73 lines (62 loc) · 3.86 KB
/
index.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Generate Survey123 URLs</title>
<title>Survey123 URL Converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Quicksand|Roboto|Roboto+Mono" rel="stylesheet">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Survey123 URL Generator</h1>
<p class="lead">A conversion script to generate Survey123 URLs for web maps</p>
<hr class="my-4">
<p>See <a target="_blank" href="https://community.esri.com/groups/survey123/blog/2016/07/30/understanding-survey123s-custom-url-scheme">the Esri Survey123 blog post on the Survey123 custom URL scheme</a> for more information.
</div>
<div class="container">
<form>
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label for="inputSurveyID">Item ID</label>
<input type="text" class="form-control" id="inputSurveyID" aria-describedby="itemIDHelp" placeholder="89bc8c7844e548e09baa3aad4695e78b">
<small id="itemIDHelp" class="form-text text-muted">Enter the Survey123 <strong>item ID</strong>. Find it by opening the survey on <a href="https://survey123.arcgis.com" target="_blank">survey123.arcgis.com</a> and copying the ID in the URL.</small>
</div>
<div class="form-group">
<label for="inputPK">Primary Key</label>
<input type="text" class="form-control" id="inputPK" aria-describedby="inputPKHelp" placeholder="SOME_ID">
<small id="inputPKHelp" class="form-text text-muted">Enter the <abbr title="Primary Key" class="initialism">PK</abbr> field name <strong>that Field Maps uses</strong>. It will be populated in the Survey123 form to maintain referential integrity. Separate multiple keys by comma (e.g. PK1,PK2,PK3).</small>
</div>
<div class="form-group">
<label for="inputFK">Foreign Key</label>
<input type="text" class="form-control" id="inputFK" aria-describedby="inputFKHelp" placeholder="FK_SOME_ID">
<small id="inputFKHelp" class="form-text text-muted">Enter the <abbr title="Foreign Key" class="initialism">FK</abbr> field name <strong>that Survey123 uses</strong>. It should receive the primary key from Collector referenced above. Separate multiple keys by comma (e.g. FK1,FK2,FK3).</small>
</div>
<div class="form-group">
<label for="inputT">Button Text</label>
<input type="text" class="form-control" id="inputT" aria-describedby="inputTHelp" placeholder="Do Survey">
<small id="inputTHelp" class="form-text text-muted">Enter the text for the button.</small>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="generateSurvey123url()">Generate</button>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="resultURL">Raw URL</label>
<!-- Add onclick to enable copy functionality -->
<input type="text" class="form-control" id="resultURL" onclick="copyToClipboard('resultURL')" readonly>
<small class="form-text text-muted">Click to copy the URL</small>
</div>
<div class="form-group">
<label for="buttonGen">Button URL</label>
<!-- Add onclick to enable copy functionality -->
<textarea class="form-control" id="buttonGen" aria-describedby="buttonGenHelp" onclick="copyToClipboard('buttonGen')" readonly rows=5></textarea>
<small id="buttonGenHelp" class="form-text text-muted">Click to copy the button code. Put this HTML in the web map pop-up HTML area to display a survey button with the generated URL link.</small>
</div>
</div>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>