You can build browser based mobile applications in Telidos Platform with the help of JQueryMobile JavaScript Library. All you need is just a browser to build these mobile applications similar to the Desktop applications built on Telidos Platform. To build screen specific for mobile, you just have to write javascript code for the UI. All the server side stuff is managed by Platform through DataSource.

Telidos Mobile App

Role List Page

Issue Stream Page

Issue Details Page

Java Script code used to create the above Issue Stream Page

<div class="xc-comments">
    <ul id="stream" style="margin-bottom: 1em;" id="commentlistviewid" class="ui-listview"></ul>
    <a id="more" style="display: block;" data-role="button" data-theme="a"
    data-icon="arrow-d" href="#">More ↓</a>
</div>
<script type="text/javascript">
    function slowScrollTo(parent, id) {
        $(parent).animate({
            scrollTop: $(id).position().top
        }, 'slow');
    }

    function getIconHtml(icon) {
        return "<img class='ui-li-icon ui-li-thumb' src='http://cdn.dustball.com/" + icon + ".png'>";
    }

    function formatRow(row, index) {
        return '<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-btn-hover-c">' + '<div class="ui-btn-inner ui-li">' + '<div class="ui-btn-text">' + '<a href="' + t$.contextpath + '/m/page/ISSUE_TRACKER_ADMIN/3757?issueno=' + row.taskid + '" data-transition="none" class="ui-link-inherit">' + '<img class="ui-li-icon" style="width: 24px;height: 24px;" src="' + t$.contextpath + '/resource3/pp/' + row.userid + '.png?s=24">' + '<p class="ui-li-desc" style="margin-top: .5em;"><strong>' + row.sb.replace('<a', '<span').replace('</a', '</span') + '</strong></p>' + '<div class="ui-li-desc">' + ((row.comments) ? row.comments : '') + '</div>' + '<p class="ui-li-desc">' + row.updatedate + '</p>' + '</a></div>' + '<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>' + '</li>';
    };
    var offset = 0;
    var content = $('#stream');

    function getData(offset) {
        $.mobile.showPageLoadingMsg();
        jQuery.ajax({
            type: 'POST',
            url: t$.contextpath + '/service/rest',
            data: JSON.stringify({
                "dataSource": "StreamDashBoard",
                "offset": offset,
                "limit": 20
            }),
            dataType: 'json',
            success: function (result) {
                var str = new Array();
                var len = result.data.length;
                for (var i = 0; i < len; i++) {
                    str.push(formatRow(result.data[i], (i + offset)));
                }
                content.append(str.join(''));
                $.mobile.hidePageLoadingMsg();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                content.append(errorThrown.message);
            },
            contentType: 'application/json'
        });
    }
    $(document).delegate("#mobileissuestream", "pagebeforecreate", function () {
        var more = $('#more');
        more.unbind('click');
        more.bind('click', function () {
            offset = offset + 20;
            getData(offset);
            return false;
        });
        var $page = $('#mobileissuestream');
        $page.page({
            domCache: true
        });
        getData(0);
    });
</script>

Java Script code used to create the above Issue Details Page

<div id="details"><p>Loading...</p></div>
<div id="comments"></div>
<style id="styleid">
.comment {
    border-bottom: 1px solid #D2D9E7;
}
.comment {
    padding-bottom: 10px;
    padding-right: 14px;
    padding-top: 8px;
}
.comment .text {
    display: block;
    margin-bottom: 4px;
    margin-left: -6px;
    margin-top: 5px;
    padding-left: 5px;
    word-wrap: break-word;
}
.comment .content {
    line-height: 17px;
    white-space: pre-wrap;
}
.comment .timestamp {
    color: #999999;
    font-size: 80%;
    margin-left: 0;
}
.comment .icon {
float: left;
width: 24px;
  margin: 0 5px 5px 5px;
}
.right {
float: right;
padding: 0 0 0 8px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('head').append($('style#styleid'));
});
	function getCommentIconHtml(icon) {
		return "<img src='http://cdn.dustball.com/" + icon + ".png'>";
	}
function formatCommentRow(row, index) {
        var html, attach = '';
        if (row.commentid != null) {
		if (row.attachmentidfilename != null) {
			attach = 'Attachment: <a href="' + t$.contextpath + '/service/aservice?fid=' + row.attachmentid + '&rev=' + row.attachmentidfv
				+ '&ds=TaskCommentsV&attr=attachmentid&sid=' + t$.sessionid + '" target="_blank">' + row.attachmentidfilename + '</a> - ';
		}
            html = '<div class="comment" commentid="' + row.commentid + '">' +
            '<div class="icon"><img style="width: 24px;height: 24px;" src="' + t$.contextpath + '/resource3/pp/' + row.createdby + '.png?s=24"></div>' +
            '<div class="content"><div class="timestamp right">' + attach + row.timestamp + '</div>'
	 	+ '<span class="user">' + row.displayname + '</span><span class="text">' + row.comments + '</span>' +
            '</div></div>';
        } else {
            html = '<div class="comment">' +
              '<div class="icon"><img style="width: 24px;height: 24px;" src="' + t$.contextpath + '/resource3/pp/' + row.createdby + '.png?s=24"></div>' +
            '<div class="content"><div class="timestamp right">' + row.timestamp + '</div><div class="timestamp">' + row.displayname + ' ' + row.comments + '</div></div></div>';
        }
        return html;
}
function getParameterByName(url ,name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(url); //(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function showIssue($page){
	var $details = $('#details'),
	$comments = $('#comments');
	var issueno = getParameterByName($('head').children('base').attr('href'), 'issueno');
	if ( issueno ) {
		var markup = "";
		$.mobile.showPageLoadingMsg();
		jQuery.ajax({
			type : 'POST',
			url : t$.contextpath + '/service/rest',
			data : JSON.stringify({"dataSource": "TasksV", "whereClause": "#taskid# = ?", "whereClauseParams": [issueno]}),
			dataType : 'json',
			success : function(result) {
				var len = result.data.length;
   				if (len > 0) {
					var row = result.data[0];
					markup = '<h3>#' + row.taskid + ' ' + row.taskname + '</h3><p>' + row.description + '</p>';
					markup += '<p>Project: <b>' + row.projectname + '</b></p>';
					markup += '<p>Priority: <b>' + row.priority + '</b></p>';
					markup += '<p>Category: <b>' + row.category + '</b></p>';
					markup += '<p>Status: <b>' + row.status+ '</b></p>';
					markup += '<p>Assigned To: <b>' + row.displayname + '</b></p>';
					//$header.find('h1').html(row.taskname);
					$details.html( markup );
				} else {
					markup = '<p>Issue not found!</p>';
					$details.html( markup );
				}
				$.mobile.hidePageLoadingMsg();
			},
			error : function(jqXHR, textStatus, errorThrown){
				$details.html(errorThrown.message);
				$.mobile.hidePageLoadingMsg();
			},
			contentType : 'application/json'
		});

		jQuery.ajax({
			type : 'POST',
			url : t$.contextpath + '/service/rest',
			data : JSON.stringify({"dataSource": "TaskCommentsV", "whereClause": "#taskid# = ?", "whereClauseParams": [issueno], "orderBy": "#lastupdatedate# desc"}),
			dataType : 'json',
			success : function(result) {
				var str = new Array();
				var len = result.data.length;
   				for (var i = 0; i < len; i++) {
  					str.push(formatCommentRow(result.data[i], i));
				}
				$comments.append(str.join(''));
				$.mobile.hidePageLoadingMsg();
			},
			error : function(jqXHR, textStatus, errorThrown){
				$comments.append(errorThrown.message);
				$.mobile.hidePageLoadingMsg();
			},
			contentType : 'application/json'
		});
	}
}
var fn = function(){
$( document ).undelegate("#mobileissuedetails", "pagebeforecreate", fn);
showIssue($(this));
};
$( document ).delegate("#mobileissuedetails", "pagebeforecreate", fn);
</script>

Location

101 California Street, Suite 2710
San Francisco, CA 94111


440 N. Wolfe Rd.
Sunnyvale, CA 94085


Office 11, 5th Floor, Building 9,
Mindspace IT Park
Hyderabad 500081

p: +1 (844) AT CloudIO (844-282-5683)
f: +1 (650) 300-5247 | e: sales@cloudio.io
© 2009, 2017 CloudIO Inc. | Terms of Use | Privacy Policy