Messaging.showToast

DroneDeploy
Search…
Introduction
Overview
API
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!
Measurement API Example
Payments.charge
Last modified 2yr ago
Copy link