Code examples on how to access the Open-Xchange HTTP API

Accessing EMails

This example accesses the HTTP API to list mails in the users inbox. It must run in the same domain as the Open-Xchange server.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mail Example</title>
<style type="text/css">
body {
    padding: 10px;
}
.inbox {
    width: 400px;
    overflow: visible;
}
.mail {
    position: relative;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    font-size: 10pt;
    line-height: 1.3333em;
    height: 6.5em;
}
.mail > div {
    position: absolute;
    top: 0.75em;
    right: 1em;
    bottom: 0.75em;
    left: 1em;
}
.mail:hover {
    background-color: #f5f5f5;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}
.from {
    position: absolute;
    top: 0;
    width: 60%;
    font-size: 12pt;
}
.date {
    position: absolute;
    top: 0;
    left: 60%;
    width: 40%;
    text-align: right;
    color: #06c;
    font-size: 9pt;
}
.subject {
    position: absolute;
    top: 1.6em;
    width: 100%;
    font-size: 9pt;
}
.teaser {
    position: absolute;
    top: 3em;
    height: 2em;
    line-height: 1em;
    color: #555;
    font-weight: normal;
    white-space: normal;
}
.teaser > span {
    font-size: 9pt;
}
.unread {
    font-weight: bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

$(document).ready(function () {

    var ajaxRoot = "/ajax", // should always be this one
        client = "com.openexchange.ox.gui.dhtml", // must match UI (affects cookie handling)
        session = ""; // we get this with first autologin request
        
    // set default content type - we speak JSON all the time
    $.ajaxSetup({ dataType: "json" });

    // helper to convert arrays into key-value objects
    function makeObjects(list, columns) {
        var i = 0, $i = list.length, tmp = [], arr, obj, j, $j;
        for (; i < $i; i++) {
            arr = list[i];
            obj = {};
            for (j = 0, $j = arr.length; j < $j; j++) {
                obj[columns[j]] = arr[j];
            }
            tmp.push(obj);
        }
        return tmp;
    }
    
    function drawLoginButton() {
        $("#inbox").hide();
        $("#form").show();
    }

    function getTeaser(folder, id, node) {
        // get mail text (plain/text)
        $.ajax({
            url: ajaxRoot + "/mail?" + $.param({
                action: "get", folder: folder, id: id, unseen: "true", view: "text",
                session: session
            })
        })
        .done(function (r) {
            try {
                // show first lines...
                var text = $("<span/>").html(r.data.attachments[0].content).get(0);
                node.text((text.innerText || text.textContent).substr(0, 200));
            } catch (e) {
            }
        });
    }

    function drawInbox(list) {

        var node = $("<div/>").addClass("inbox"),
            getDate = function (d) {
                d = new Date();
                return d.getDate() + "." + (d.getMonth() + 1) + "." + d.getFullYear();
            };
        
        // loop over mails
        $.each(list, function (i, mail) {

            var unread = (mail.flags & 32) === 0,
                teaser;
            
            node.append(
                $("<div/>")
                .addClass(
                    "mail" + (i % 2 ? " odd" : "")
                    + (unread ? " unread" : "")
                )
                .append(
                    $("<div/>")
                    .append(
                        $("<div/>")
                        .addClass("from ellipsis")
                        .append(
                            $("<span/>")
                            .text((mail.from[0][0] || mail.from[0][1]).replace(/"|'/g, ""))
                        )
                    )
                    .append(
                        $("<div/>")
                        .addClass("date ellipsis")
                        .text(getDate(mail.received_date))
                    )
                    .append(
                        $("<div/>")
                        .addClass("subject ellipsis")
                        .text(mail.subject)
                    )
                    .append(
                        $("<div/>").append(teaser = $("<span/>"))
                        .addClass("teaser ellipsis")
                    )
                )
            )
            
            // get teaser text
            getTeaser(mail.folder, mail.id, teaser);
        });
        
        $("#form").hide();
        $("#inbox").empty().append(node)
            .append(
                $("<input/>", { type: "button", value: "Logout" })
                .css("margin", "1em")
                .click(logout)
            )
            .show();
    }
    
    function getInbox() {

        // continuation
        function getMailHeaders(list) {
            // get first mails
            // for columns see http://oxpedia.org/index.php?title=HTTP_API#Module_.22mail.22
            var count = 7;
            $.ajax({
                type: "PUT",
                url: ajaxRoot + "/mail?" + $.param({
                    action: "list", columns: "600,601,603,607,610,611,655",
                    session: session
                }),
                data: JSON.stringify(list.slice(0, count))
            })
            .done(function (response) {
                if (response.error) {
                    drawLoginButton();
                } else {
                    drawInbox(makeObjects(response.data, ["id", "folder", "from", "subject", "received_date", "flags", "attachments"]));
                }
            });
        }
        
        $.ajax({
            // get all mails in INBOX (id & folder_id only; do not fetch mail headers -> slow!)
            // folder is "default0/INBOX". assumption: IMAP path prefix is "/"
            url: ajaxRoot + "/mail?" + $.param({
                action: "all", columns: "600,601",
                folder: "default0/INBOX", session: session,
                sort: "610", order: "desc" // order by received_date
            })
        })
        .done(function (response) {
            // API error, e.g. session not found?
            if (response.error) {
                drawLoginButton();
            } else {
                // continue
                // response.data contains array of id/folder_id pairs.
                // we convert this to key/value objects because it's easier to write and
                // debug code that way (obj.folder_id instead of obj[1]).
                getMailHeaders(makeObjects(response.data, ["id", "folder"]));
            }
        })
        .error(drawLoginButton); // general network error
    }
    
    function autoLogin() {
        // auto login to get session id -- must be activated on server!
        $.ajax({
            url: ajaxRoot + "/login?" + $.param({
                action: "autologin", client: client
            })
        })
        .done(function (response) {
            if (response.error) {
                drawLoginButton();
            } else {
                // remember session id
                session = response.session;
                // get inbox
                getInbox();
            }
        });
    }

    function login() {
        // Two steps:
        // Step #1: Login with username & password
        // Step #2: Pull special persistence cookie that allows auto-login
        $.ajax({
            type: "POST",
            url: ajaxRoot + "/login?" + $.param({
                action: "login",
                client: client
            }),
            data: $.param({
                password: $("#password").val(),
                name: $("#name").val()
            }),
        })
        .done(function (response) {
            if (response.session) {
                // store cookie for future autologin requests
                $.ajax({
                    type: "GET",
                    url: ajaxRoot + "/login?" + $.param({
                        action: "store",
                        session: (session = response.session)
                    })
                })
                .done(getInbox)
            }
        });
        return false;
    }

    function logout() {
        $.ajax({
            type: "GET",
            url: ajaxRoot + "/login?" + $.param({
                action: "logout",
                client: client,
                session: session
            })
        })
        .done(function () {
            session = "";
            drawLoginButton();
        });
        return false;
    }
    
    $("#form").submit(login);

    autoLogin();
});

</script>
</head>
<body>

<div id="form" style="display: none">
    <form action="" name="OX6.UI">
        <input type="text" id="name" name="name" value=""/><br/>
        <input type="password" id="password" name="password" value=""/><br/>
        <input type="submit" value="Login"/>
    </form>
</div>

<div id="inbox"></div>

</body>
</html>