Tag: Iphone

SalesIO JQuery Mobile Force.com Mobile Application

SalesIO is Force.com JQuery Mobile Iphone App provides all the functionality that a busy sales rep will need to easily manage their day to day lifes. SalesIO provide:

  • Manage the basic Sales SObjects : Leads, Contacts, Accounts, Opportunities
  • Manage the basic Support SObject: Cases
  • Connect with customers using SMS and Email and Chatter
  • Graphs at your fingertips
  • Setup meetings and task
  • Organize notes and make todo lists











<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><script type="text/javascript">// <![CDATA[

            var leadRecs = new Array(); 
            var contactRecs = new Array();
            var opportunityRecs = new Array();
            var accountRecs = new Array();
            var caseRecs = new Array();

            var restAPIClient = new forcetk.Client();
            restAPIClient.setSessionToken('{!$Api.Session_ID}');

            $j(document).ready(function() {
                regBtnClickHandlersLead();
                regBtnClickHandlersContact();
                regBtnClickHandlersAccount();
                regBtnClickHandlersOpportunity();
                regBtnClickHandlersChatter();
                regBtnClickHandlersEvent();
                regBtnClickHandlersCases();
                getAllLeads();
                getAllContacts();
                getAllAccounts();
                getAllOpportunities();
                getAllCases();
            });

           function getAllLeads(){
                $j.mobile.showPageLoadingMsg();
                var q = "select Id, LastName, FirstName, Phone, MobilePhone, Email, Company, Description, LeadSource, Status, Industry from Lead where FirstName!=null order by FirstName limit 200";
                restAPIClient.query(q , 
                            function(response) { 
                                   showLeads(response.records); 
                                }); 
            }

            function getAllContacts(){
                $j.mobile.showPageLoadingMsg();
                var q = "select Id, firstName, lastName, phone from Contact where FirstName!=null order by CreatedDate DESC limit 200";
                restAPIClient.query(q , 
                            function(response) { 
                                   showContacts(response.records); 
                                }); 
            }

            function getAllAccounts(){
                $j.mobile.showPageLoadingMsg();
                var q = "select Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry, Phone, Fax, Website from Account where Name!=null order by CreatedDate DESC limit 200";
                restAPIClient.query(q , 
                            function(response) { 
                                   showAccounts(response.records); 
                                }); 
            }

            function getAllOpportunities(){
                $j.mobile.showPageLoadingMsg();
                var q = "select Id, Name, Description, StageName, Amount, Probability, ExpectedRevenue, CloseDate from Opportunity where Name!=null order by CreatedDate DESC limit 200";
                restAPIClient.query(q , 
                            function(response) { 
                                   showOpportunities(response.records); 
                                }); 
            }

            function getAllCases(){
                $j.mobile.showPageLoadingMsg();
                var q = "select Id, Status, Reason, Origin, Subject, Description from Case order by CreatedDate DESC limit 200";
                restAPIClient.query(q , 
                            function(response) { 
                                   showCases(response.records); 
                                }); 
            }

            function showLeads(records)
            {
                 $j('#lList').empty();
                contactRecs.length = 0;

                for(var i = 0; i < records.length; i++) { leadRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,
                    function() {
                    var newLi = $j('
	<li></li>

');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.FirstName+ ' '+this.LastName+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#lfName').val(leadRecs[this.id].FirstName);
                        $j('#llName').val(leadRecs[this.id].LastName);
                        $j('#lphone').val(leadRecs[this.id].Phone);
                        $j('#lemail').val(leadRecs[this.id].Email);
                        $j('#lcompany').val(leadRecs[this.id].Company);
                        $j('#leadId').val(leadRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#ldetailpage', {changeHash: true});
                    });
                    newLi.append(newLink);            
                    newLi.appendTo('#lList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#lList:visible').listview('refresh');
            }

            function showContacts(records) {    
                $j('#cList').empty();
                contactRecs.length = 0;

                for(var i = 0; i < records.length; i++) { contactRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,
                    function() {
                    var newLi = $j('
	<li></li>

');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.FirstName+ ' '+this.LastName+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#cfName').val(contactRecs[this.id].FirstName);
                        $j('#clName').val(contactRecs[this.id].LastName);
                        $j('#cphone').val(contactRecs[this.id].Phone);
                        $j('#contactId').val(contactRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#cdetailpage', {changeHash: true});
                    });
                    newLi.append(newLink);            
                    newLi.appendTo('#cList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#cList:visible').listview('refresh');
            } 

             function showAccounts(records)
            {
                $j('#aList').empty();
                contactRecs.length = 0;

                for(var i = 0; i < records.length; i++) { accountRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,
                    function() {
                    var newLi = $j('
	<li></li>

');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#afName').val(accountRecs[this.id].Name);
                        $j('#aphone').val(accountRecs[this.id].Phone);
                        $j('#accountId').val(accountRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#adetailpage', {changeHash: true});
                    });
                    newLi.append(newLink);            
                    newLi.appendTo('#aList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#aList:visible').listview('refresh');
            }     

             function showOpportunities(records)
            {
                $j('#oList').empty();
                contactRecs.length = 0;

                for(var i = 0; i < records.length; i++) { opportunityRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,function() {
                    var newLi = $j('
	<li></li>

');
                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Name+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#ofName').val(opportunityRecs[this.id].Name);
                        $j('#ostageName').val(opportunityRecs[this.id].StageName);
                        $j('#oamount').val(opportunityRecs[this.id].Amount);
                        $j('#oclosedate').val(opportunityRecs[this.id].CloseDate);
                        $j('#opportunityId').val(opportunityRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#odetailpage', {changeHash: true});
                    });
                    newLi.append(newLink);            
                    newLi.appendTo('#oList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#oList:visible').listview('refresh');
            }

             function showCases(records)
            {
                $j('#csList').empty();
                contactRecs.length = 0;

                for(var i = 0; i < records.length; i++) { caseRecs[records[i].Id] = records[i]; }
                var x = 0;
                $j.each(records,
                    function() {
                    var newLi = $j('
	<li></li>

');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.Subject + '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#csStatus').val(caseRecs[this.id].Status);
                        $j('#csReason').val(caseRecs[this.id].Reason);
                        $j('#csOrigin').val(caseRecs[this.id].Origin);
                        $j('#csSubject').val(caseRecs[this.id].Subject);
                        $j('#csDescription').val(caseRecs[this.id].Description);
                        $j('#caseId').val(caseRecs[this.id].Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#csdetailpage', {changeHash: true});
                    });
                    newLi.append(newLink);            
                    newLi.appendTo('#csList');
                    x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#csList:visible').listview('refresh');
            }

            function displayError(e){
                var error = JSON.parse(e.responseText);
                $j('#error').html(error[0].message);
            }

            function regBtnClickHandlersLead() {
                $j('#addlead').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#lfName').val('');
                    $j('#llName').val('');
                    $j('#lphone').val('');
                    $j('#lemail').val('');
                    $j('#lcompany').val('');
                    $j('#error').html('');
                    $j('#leadId').val('');
                    $j.mobile.changePage('#ldetailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();            
                });

                $j('#savelead').click(function(e) {
                   addUpdateLead(e);
                });

                $j('#deletelead').click(function(e) {
                   deleteLead(e);
                });
            }

            function addUpdateLead(e){
                e.preventDefault();
                var lId = $j('#leadId').val();
                var lead = { FirstName : $j('#lfName').val(),
                                LastName : $j('#llName').val(),
                                Phone : $j('#lphone').val(),
                                Email : $j('#lemail').val(),
                                Company : $j('#lcompany').val()};
                if (lId === 'undefined' || lId === ''){
                    restAPIClient.create('Lead', lead, sucessCallbackLead, displayError); 
                } else {
                    restAPIClient.update('Lead', lId, lead, sucessCallbackLead, displayError); 
                }
            }

            function deleteLead(e){
                e.preventDefault();
                restAPIClient.del('Lead', $j('#leadId').val(), sucessCallbackLead, displayError);
            }

            function sucessCallbackLead(r){
                $j.mobile.changePage('#Lead', {changeHash: true});
            }

             function regBtnClickHandlersContact() {
                $j('#addcontact').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#cfName').val('');
                    $j('#clName').val('');
                    $j('#cphone').val('');
                    $j('#error').html('');
                    $j('#contactId').val('');
                    $j.mobile.changePage('#cdetailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();            
                });

                $j('#savecontact').click(function(e) {
                   addUpdateContact(e);
                });

                $j('#deletecontact').click(function(e) {
                   deleteContact(e);
                });
            }

             function addUpdateContact(e){
                e.preventDefault();
                var cId = $j('#contactId').val();
                var contact = { FirstName : $j('#cfName').val(),
                                LastName : $j('#clName').val(),
                                Phone : $j('#cphone').val()};
                if (cId === 'undefined' || cId === ''){
                    restAPIClient.create('Contact', contact, sucessCallbackContact, displayError); 
                } else {
                    restAPIClient.update('Contact', cId, contact, sucessCallbackContact, displayError); 
                }
            }

            function deleteContact(e){
                e.preventDefault();
                restAPIClient.del('Contact', $j('#contactId').val(), sucessCallbackContact, displayError);
            }

            function sucessCallbackContact(r){
                $j.mobile.changePage('#Contact', {changeHash: true});
            }

             function regBtnClickHandlersAccount() {
                $j('#addaccount').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#afName').val('');
                    $j('#aphone').val('');
                    $j('#error').html('');
                    $j('#accountId').val('');
                    $j.mobile.changePage('#adetailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();            
                });

                $j('#saveaccount').click(function(e) {
                   addUpdateAccount(e);
                });

                $j('#deleteaccount').click(function(e) {
                   deleteAccount(e);
                });
            }

            function addUpdateAccount(e){
                e.preventDefault();
                var aId = $j('#accountId').val();
                var account = { Name : $j('#afName').val(),
                                Phone : $j('#aphone').val()};
                if (aId === 'undefined' || aId === ''){
                    restAPIClient.create('Account', account, sucessCallbackAccount, displayError); 
                } else {
                    restAPIClient.update('Account', aId, account, sucessCallbackAccount, displayError); 
                }
            }

            function deleteAccount(e){
                e.preventDefault();
                restAPIClient.del('Account', $j('#accountId').val(), sucessCallbackAccount, displayError);
            }

            function sucessCallbackAccount(r){
                $j.mobile.changePage('#Account', {changeHash: true});
            }

            function regBtnClickHandlersOpportunity() {
                $j('#addopportunity').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#ofName').val('');
                    $j('#ostageName').val('');
                    $j('#oclosedate').val('');
                    $j('#oamount').val('');
                    $j('#error').html('');
                    $j('#opportunityId').val('');
                    $j.mobile.changePage('#odetailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();            
                });

                $j('#saveopportunity').click(function(e) {
                   addUpdateOpportunity(e);
                });

                $j('#deleteopportunity').click(function(e) {
                   deleteOpportunity(e);
                });
            }

             function addUpdateOpportunity(e){
                e.preventDefault();
                var oId = $j('#opportunityId').val();
                var opportunity = { Name : $j('#ofName').val(),
                                StageName : $j('#ostageName').val(),
                                CloseDate : $j('#oclosedate').val(),
                                Amount : $j('#oamount').val()};
                if (oId === 'undefined' || oId === ''){
                    restAPIClient.create('Opportunity', opportunity, sucessCallbackOpportunity, displayError); 
                } else {
                    restAPIClient.update('Opportunity', oId, opportunity, sucessCallbackOpportunity, displayError); 
                }
            }

            function deleteOpportunity(e){
                e.preventDefault();
                restAPIClient.del('Opportunity', $j('#opportunityId').val(), sucessCallbackOpportunity, displayError);
            }

            function sucessCallbackOpportunity(r){
                $j.mobile.changePage('#Opportunity', {changeHash: true});
            }

             function regBtnClickHandlersCases() {
                $j('#addcase').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#csStatus').val('');
                    $j('#csReason').val('');
                    $j('#csOrigin').val('');
                    $j('#csSubject').val('');
                    $j('#csDescription').val('');
                    $j('#error').html('');
                    $j('#caseId').val('');
                    $j.mobile.changePage('#csdetailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();            
                });

                $j('#savecase').click(function(e) {
                   addUpdateCase(e);
                });

                $j('#deletecase').click(function(e) {
                   deleteCase(e);
                });
            }

             function addUpdateCase(e){
                e.preventDefault();
                var csId = $j('#caseId').val();
                var caseObj = {    Status : $j('#csStatus').val(),
                                Reason : $j('#csReason').val(),
                                Origin : $j('#csOrigin').val(),
                                Subject : $j('#csSubject').val(),
                                Description : $j('#csDescription').val()};
                if (csId === 'undefined' || csId === ''){
                    restAPIClient.create('Case', caseObj, sucessCallbackCase, displayError); 
                } else {
                    restAPIClient.update('Case', csId, caseObj, sucessCallbackCase, displayError); 
                }
            }

            function deleteCase(e){
                e.preventDefault();
                restAPIClient.del('Case', $j('#caseId').val(), sucessCallbackCase, displayError);
            }

            function sucessCallbackCase(r){
                $j.mobile.changePage('#Case', {changeHash: true});
            }

            function regBtnClickHandlersChatter() {

                $j('#savechatter').click(function(e) {
                   addChatter(e);
                });
            }

            function addChatter(e){
                e.preventDefault();
                var chatter = { title : $j('#chattertitle').val(),
                                body : $j('#chatterbody').val(),
                                ParentId : $j('#cwhoId').val()};
                restAPIClient.create('FeedItem', chatter, sucessCallbackLead, displayError); 
            }

            function emailFunction()
            {
                sendMail();
            }

            function smsFunction()
            {
                sendSMS();
            }

            function regBtnClickHandlersEvent() {
                $j('#saveevent').click(function(e) {
                   addUpdateEvent(e);
                });
            }

             function addUpdateEvent(e){
                e.preventDefault();
                var event = { WhoId : $j('#ewhoId').val(),
                                Subject : $j('#esubject').val(),
                                StartDateTime : $j('#estartdatetime').val(),
                                EndDateTime : $j('#eenddatetime').val(),
                                Description : $j('#edescription').val()};

                restAPIClient.create('Event', event, sucessCallbackLead, displayError); 
            }

            function regBtnClickHandlersTask() {
                $j('#savetask').click(function(e) {
                   addUpdateTask(e);
                });
            }

             function addUpdateTask(e){
                e.preventDefault();
                var task =     { WhoId : $j('#twhoId').val(),
                                Subject : $j('#tsubject').val(),
                                Priority : $j('#tpriority').val(),
                                Status : $j('#tstatus').val(),
                                Description : $j('#tcomments').val()};

                restAPIClient.create('Task', task, sucessCallbackLead, displayError); 
            }

// ]]></script></pre>
<div class="jqm-demos jqm-demos-index" id="Lead" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" id="leadList" data-role="content"></div>
<!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" id="addlead" data-prefetch="true" data-transition="none" data-icon="grid"></a>New</li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<pre>
<!-- /page --></pre>
<div class="jqm-demos jqm-demos-index" id="ldetailpage" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" data-role="content">
<div data-role="fieldcontain"><label for="lfName">First Name:</label>
 <input id="lfName" type="text" name="lfName" /></div>
<div data-role="fieldcontain"><label for="llName">Last Name:</label>
 <input id="llName" type="text" name="llName" /></div>
<div data-role="fieldcontain"><label for="lcompany">Company:</label>
 <input id="lcompany" type="text" name="lcompany" /></div>
<div data-role="fieldcontain"><label for="lphone">Phone:</label>
 <input id="lphone" type="text" name="lphone" /></div>
<div data-role="fieldcontain"><label for="lemail">Email:</label>
 <input id="lemail" type="text" name="lemail" /></div>
<h2 id="error" style="color: red;"></h2>
 <input id="leadId" type="hidden" />
 <button class="save" id="savelead" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button>
 <button class="destroy" id="deletelead" data-role="button" data-icon="delete" data-inline="true">Delete</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Contact" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" id="contactList" data-role="content"></div>
<!-- /content -->


<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" id="addcontact" data-prefetch="true" data-transition="none" data-icon="grid"></a>New</li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<div class="jqm-demos jqm-demos-index" id="cdetailpage" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" data-role="content">
<div data-role="fieldcontain"><label for="cfName">First Name:</label>
 <input id="cfName" type="text" name="cfName" /></div>
<div data-role="fieldcontain"><label for="clName">Last Name:</label>
 <input id="clName" type="text" name="clName" /></div>
<div data-role="fieldcontain"><label for="cphone">Phone:</label>
 <input id="cphone" type="text" name="cphone" /></div>
<h2 id="error" style="color: red;"></h2>
 <input id="contactId" type="hidden" />
 <button class="save" id="savecontact" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button>
 <button class="destroy" id="deletecontact" data-role="button" data-icon="delete" data-inline="true">Delete</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Account" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" id="accountList" data-role="content"></div>
<!-- /content -->


<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" id="addaccount" data-prefetch="true" data-transition="none" data-icon="grid"></a>New</li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<div class="jqm-demos jqm-demos-index" id="adetailpage" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" data-role="content">
<div data-role="fieldcontain"><label for="afName">First Name:</label>
 <input id="afName" type="text" name="afName" /></div>
<div data-role="fieldcontain"><label for="aphone">Phone:</label>
 <input id="aphone" type="text" name="aphone" /></div>
<h2 id="error" style="color: red;"></h2>
 <input id="accountId" type="hidden" />
 <button class="save" id="saveaccount" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button>
 <button class="destroy" id="deleteaccount" data-role="button" data-icon="delete" data-inline="true">Delete</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Opportunity" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" id="opportunityList" data-role="content"></div>
<!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" id="addopportunity" data-prefetch="true" data-transition="none" data-icon="grid"></a>New</li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<pre>
<!-- /page --></pre>
<div class="jqm-demos jqm-demos-index" id="odetailpage" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" data-role="content">
<div data-role="fieldcontain"><label for="ofName">Name:</label>
 <input id="ofName" type="text" name="ofName" /></div>
<div data-role="fieldcontain"><label for="ostageName">Stage Name:</label>
<select id="ostageName" name="ostageName"><option value="Closed Won">Closed Won</option><option value="Prospecting">Prospecting</option><option value="Qualification">Qualification</option><option value="Closed Lost">Closed Lost</option></select></div>
<div data-role="fieldcontain"><label for="oclosedate">Close Date:</label>
 <input id="oclosedate" type="date" name="oclosedate" data-role="datebox" data-options="{&quot;mode&quot;: &quot;calbox&quot;}" /></div>
<div data-role="fieldcontain"><label for="oamount">Amount:</label>
 <input id="oamount" type="text" name="oamount" /></div>
<h2 id="error" style="color: red;"></h2>
 <input id="opportunityId" type="hidden" />
 <button class="save" id="saveopportunity" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button>
 <button class="destroy" id="deleteopportunity" data-role="button" data-icon="delete" data-inline="true">Delete</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Case" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" id="caseList" data-role="content"></div>
<!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" id="addcase" data-prefetch="true" data-transition="none" data-icon="grid"></a>New</li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<pre>
<!-- /page --></pre>
<div class="jqm-demos jqm-demos-index" id="csdetailpage" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div class="jqm-content" data-role="content">
<div data-role="fieldcontain"><label for="csStatus">Status:</label>
 <input id="csStatus" type="text" name="csStatus" /></div>
<div data-role="fieldcontain"><label for="csReason">Reason:</label>
 <input id="csReason" type="text" name="csReason" /></div>
<div data-role="fieldcontain"><label for="csOrigin">Origin:</label>
 <input id="csOrigin" type="text" name="csOrigin" /></div>
<div data-role="fieldcontain"><label for="csSubject">Subject:</label>
 <input id="csSubject" type="text" name="csSubject" /></div>
<div data-role="fieldcontain"><label for="csDescription">Description:</label>
 <input id="csDescription" type="text" name="csDescription" /></div>
<h2 id="error" style="color: red;"></h2>
 <input id="caseId" type="hidden" />

 <button class="save" id="savecase" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button>
 <button class="destroy" id="deletecase" data-role="button" data-icon="delete" data-inline="true">Delete</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Chatter" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content">
<div data-role="fieldcontain"><label for="chattertitle">Title:</label>
 <input id="chattertitle" type="text" name="chattertitle" /></div>
<div data-role="fieldcontain"><label for="chatterbody">Body:</label>
 <textarea id="chatterbody" name="chatterbody" rows="5"></textarea></div>
 <input id="cwhoId" type="hidden" name="cwhoId" value="{!userId}" />
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="savechatter" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button></div>

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" href="#NewChatter" data-prefetch="true" data-transition="none">New</a></li>
	<li><a href="#ViewChatter" data-prefetch="true" data-transition="none">View</a></li>
</ul>
</div>
<!-- /navbar --></div>
<!-- /footer --></div>
<div class="jqm-demos jqm-demos-index" id="Email" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content">
<div data-role="fieldcontain"><label for="emailAddress">Address:</label>
 <input id="emailAddress" type="text" name="emailAddress" value="{!emailAddress}" /></div>
<div data-role="fieldcontain"><label for="emailSubject">Title:</label>
 <input id="emailSubject" type="text" name="emailSubject" value="{!emailSubject}" /></div>
<div data-role="fieldcontain"><label for="emailBody">Body:</label>
 <textarea id="emailBody" name="emailBody" rows="5"></textarea></div>
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="sendemail" onclick="emailFunction();" data-role="button" data-icon="check" data-inline="true" data-theme="b">Send</button>






</div>
</div>
<div class="jqm-demos jqm-demos-index" id="SMS" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content">
<div data-role="fieldcontain"><label for="smsNumber">Number:</label>
 <input id="smsNumber" type="text" name="smsNumber" /></div>
<div data-role="fieldcontain"><label for="smsBody">Body:</label>
 <textarea id="smsBody" name="smsBody" rows="5"></textarea></div>
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="sendsms" onclick="smsFunction();" data-role="button" data-icon="check" data-inline="true" data-theme="b">Send</button>



</div>
</div>
<div class="jqm-demos jqm-demos-index" id="Meeting" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content">
<div data-role="fieldcontain"><label for="esubject">Subject:</label>
 <input id="esubject" type="text" name="esubject" /></div>
<div data-role="fieldcontain"><label for="estartdatetime">Start Date:</label>
 <input id="estartdatetime" type="datetime-local" name="estartdatetime" value="" data-clear-btn="true" /></div>
<div data-role="fieldcontain"><label for="eenddatetime">End Date:</label>
 <input id="eenddatetime" type="datetime-local" name="eenddatetime" value="" data-clear-btn="true" /></div>
<div data-role="fieldcontain"><label for="edescription">Description:</label>
 <textarea id="edescription" name="edescription" rows="5"></textarea></div>
 <input id="ewhoId" type="hidden" name="ewhoId" value="{!userId}" />
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="saveevent" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Task" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content">
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="addtask" data-role="button" data-icon="check" data-inline="true" data-theme="b">Send</button>

 <input id="twhoId" type="hidden" name="twhoId" value="{!userId}" /></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Todo" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content"><form>
<fieldset data-role="controlgroup"><legend>Vertical:</legend>
 <input id="checkbox-v-2a" type="checkbox" name="checkbox-v-2a" />
 <label for="checkbox-v-2a">One</label>
 <input id="checkbox-v-2b" type="checkbox" name="checkbox-v-2b" />
 <label for="checkbox-v-2b">Two</label>
 <input id="checkbox-v-2c" type="checkbox" name="checkbox-v-2c" />
 <label for="checkbox-v-2c">Three</label></fieldset>
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="addtodo" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</button></form></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Notes" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content"><form>
<div class="ui-hide-label" data-role="fieldcontain"><textarea id="textarea-16" style="height: 300px;" name="textarea-16"></textarea></div>
<h2 id="error" style="color: red;"></h2>
 <button class="save" id="addnotes" data-role="button" data-icon="check" data-inline="true" data-theme="b">SAVE</button></form></div>
</div>
<div class="jqm-demos jqm-demos-index" id="Charts" data-role="page">
<div class="jqm-header" data-role="header">
<h1 class="jqm-logo"><a href="#"><img alt="SalesIO" src="{!URLFOR($Resource.SalesIOLogo, '')}" /></a></h1>
 <a class="jqm-navmenu-link" href="#" data-icon="bars" data-iconpos="notext">Navigation</a></div>
<!-- /header -->
<div data-role="content"></div>
</div>
<pre>

</pre>
<div id="modal" data-role="page">
<div data-role="header" data-theme="e">
<h1>Dialog (modal)</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Modal</h2>
Content of Modal Goes Here</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer --></div>
<pre>
<!-- /page modal -->

<script type="text/javascript">// <![CDATA[
      new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});

// ]]></script>

Clone on Github

git clone https://github.com/thysmichels/Sales-IO-JQuery-Mobile-Force.com-Mobile-App.git

Force.com Contact Apex HTML5 Iphone App

This is part 2 of the tutorial so make sure you have completed Part 1:

https://thysmichels.com/2012/02/07/force-com-contact-apex-html5-tutorial/

We will now create a Hybrid Iphone App.

Step 1. Create a new remote access setting by navigating to Setup-> Developer -> Remote Access. Create a remote access by specifying a callback URL:

sfdc://success

Note: Remember the newly created consumer key cause you will use it the bootstrap.js file.

Step 2. Download and Install the Salesforce iOS SDK

Download:

https://github.com/forcedotcom/SalesforceMobileSDK-iOS.

Install:

./install.sh

Step 3. Open XCode and create a new Force.com Hybrid App

Step 4. Delete the www folder and replace with file attached. Replace with the new www file which you can download from:

https://github.com/forcedotcom/SalesforceMobileSDK-Samples

Step 5. Navigate to the bootstrap.js file and edit the following settings

var debugMode = true;

// The client ID value specified for your remote access object that defines
// your application in Salesforce.
var remoteAccessConsumerKey = "###";

// The redirect URI value specified for your remote access object that defines
// your application in Salesforce.
var oauthRedirectURI = "sfdc://success";

// The authorization/access scope(s) you wish to define for your application.
var oauthScopes = ["visualforce","api"];

// The start page of the application.  This is the [pagePath] portion of
// http://[host]/[pagePath].  Leave blank to use the local index.html page.
var startPage = "apex/SalesKing";  // Used for local REST-based"index.html" PhoneGap app.
//var startPage = "apex/BasicVFPage"; //used for Visualforce-based apps

// Whether the container app should automatically refresh our oauth session on app foreground:
// generally a good idea.
var autoRefreshOnForeground = true;

Step 6: Run your application. It will prompt you to login to Salesforce using your Salesforce username and password.

Step 7. It will ask to allow or deny access to the application you specified in step 1. Click ‘Allow’ to access the application.