DroneDeploy
Search…
Introduction
App Platform
Messaging.showToast
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
<meta charset="UTF-8">
6
<title>Document</title>
7
<style>
8
.title {
9
font-size: 1.3em;
10
font-weight: 500;
11
}
12
​
13
.sans {
14
font-family: Lato, sans-serif;
15
color: rgba(0, 0, 0, 0.87);
16
}
17
​
18
label {
19
font-weight: 300;
20
}
21
​
22
input,
23
select {
24
border: none;
25
border-radius: 0;
26
border-bottom: 1px solid #039be5;
27
min-width: 30%;
28
max-width: 100%;
29
font-size: 0.8em;
30
margin-left: auto;
31
}
32
​
33
input[type="text"] {
34
width: 100%;
35
}
36
​
37
.btn {
38
border: none;
39
background-color: #039be5;
40
/*border-radius: 5px;*/
41
font-size: 14px;
42
font-family: Lato;
43
font-weight: 500;
44
color: white;
45
padding: 10px 16px;
46
margin-top: 10px;
47
flex-basis: 100%;
48
width: 100%;
49
}
50
​
51
.form-group {
52
width: 100%;
53
display: inline-flex;
54
justify-content: flex-start;
55
margin-top: 10px;
56
}
57
</style>
58
</head>
59
​
60
<body>
61
<span class="title sans">Message.showToast example</span>
62
<form action="" id="messageForm">
63
<div class="form-group">
64
<label for="messageInput" class="sans">Message:</label>
65
<input type="text" id="messageInput" placeholder="Enter a message" class="sans">
66
</div>
67
<div class="form-group">
68
<label for="messageNumber" class="sans">Timeout (in seconds): </label>
69
<input type="number" id="messageNumber" min="1" max="1000" value="1" class="sans">
70
</div>
71
<button type="submit" id="messageSubmit" class="btn sans">Submit</button>
72
</form>
73
<script>
74
new DroneDeploy({
75
version: 1
76
}).then(function(dronedeployApi) {
77
​
78
var messageForm = document.getElementById('messageForm');
79
​
80
messageForm.addEventListener('submit', function showMessage(event) {
81
event.preventDefault();
82
var message = document.getElementById('messageInput').value;
83
var timeout = Number(document.getElementById('messageNumber').value) * 1000;
84
​
85
dronedeployApi.Messaging.showToast(message, {
86
timeout: timeout
87
})
88
});
89
});
90
</script>
91
</body>
92
​
93
</html>
Copied!
Last modified 2yr ago
Copy link