DoubleDutch SDK Basic Sample

A sample demonstrating basic capabilities of the DoubleDutch SDK. This fiddle uses an emulated SDK; the current user is static, because you are not actually logged into the app on a device.

by Adam Liechty

HTML

<script src="https://adamliechty.herokuapp.com/doubledutch/sdk/DDEventsSDK.js"></script>
<script src="https://adamliechty.herokuapp.com/doubledutch/sdk/DDEventsSDKEmulator.js"></script>
<body>
    <div>Current User JSON:</div>
    <textarea id="user-json"></textarea>
    <div>Current Event JSON:</div>
    <textarea id="event-json"></textarea>
    <div>Current user token (<a href="https://github.com/doubledutch/verify-user-token" target="_blank">How to decode and verify</a>):</div>
    <textarea id="token"></textarea>

    <div id="user">
        <div class="head">Current User:</div>
        <span id="user-identifier"></span>
        <div class="content">
            <img class="image" />
            <div class="text">
                <div> <span id="user-firstName"></span>
                      <span id="user-lastName"></span>
                </div>
                <div id="user-work"> <span id="user-title"></span> @ 
                    <span id="user-company"></span>
                </div>
            </div>
        </div>
    </div>

    <div id="event">
        <div class="head">Current Event:</div>
        <div class="content">
            <img class="image" />
            <div class="text">
                <div id="event-name"></div>
                <div id="event-desc"></div>
                <div id="event-dates"> <span id="event-start"></span> - <span id="event-end"></span>

                </div>
            </div>
        </div>
    </div>
</body>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    width: 100%;
    font-family: Arial, Verdana;
    margin: 0px;
    padding: 10px;
}
textarea {
    width: 100%;
    height: 100px;
}
#visit {
    margin-bottom: 10px;
}
#user, #event {
    background-color: #b9dfff;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
}
#user > div, #event > div {
    width: 100%;
}
#user .head, #event .head {
    display: block;
    background-color: #b9dfff;
}
#user .text, #event .text {
    width: 60%;
    display: inline-block;
    vertical-align: top;
}
#user .text div, #event .text div {
    background-color: #b9dfff;
    width: 100%;
}
#user .image, #event .image {
    display: inline-block;
    width: 35%;
}
#user-work, #user-identifier {
    color: #535353;
}
#user-identifier {
    font-family: monospace;
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
}
#event-desc {
    font-size: 250%;
    color: #535353;
}
#user-json, #event-json {
}

JavaScript

$(function () {

    DD.Events.onReady(function () {
        // Get Posts from the app.
        DD.Events.getCurrentUserAsync(function (user) {
            $("#user-json").val(JSON.stringify(user));
            $("#user .image").attr("src", user.ImageUrl);
            $("#user-firstName").text(user.FirstName);
            $("#user-lastName").text(user.LastName);
            $("#user-company").text(user.Company);
            $("#user-title").text(user.Title);
            $("#user-identifier").text(user.UserIdentifierId);
        });

        // Get the current event in the app.
        DD.Events.getCurrentEventAsync(function (event) {
            $("#event-json").val(JSON.stringify(event));
            $("#event .image").attr("src", event.Icon);
            $("#event-name").text(event.Name);
            $("#event-desc").text(event.Description);
            $("#event-start").text(new Date(event.StartDate).toDateString());
            $("#event-end").text(new Date(event.EndDate).toDateString());
        });

        var ddApiHeaders = function(authHeader) {
            var headers = {
                'X-DDAPI-Version': '5.12.0.0'
            };
            if (authHeader) {
                headers.Authorization = authHeader;
            }
            return headers;
        };
        
        DD.Events.getSignedAPIAsync("images/users?count=10", "", function (signedUrl, authHeader) {
            $.ajax(signedUrl, {
                headers: ddApiHeaders(authHeader),
                success: function(data) {
                    var users = data.Value;
                    $.each(users, function (index, user) {
                        var image = $("<img src='" + user.ImageUrl + "' />");
                        image.appendTo("body");
                    });
                }
            });
        });

        DD.Events.getSignedAPIAsync("users/me/token", "", function (signedUrl, authHeader) {
            $.ajax(signedUrl, {
                headers:...