Contact Detail Page - MobileCaddy DevelopersMobileCaddy Developers

In this module we will add a new page where we can view a contact’s details.

Add the following highlighted line to your www/templates/account.html file. This makes each contact entry a link.


      <ion-item class="item mti-item"
        collection-repeat="contact in vmc.contacts | filter:vmc.search.query" type="item-text-wrap"
        href="#/tab/account/{{vm.account.Id}}/contact/{{contact.Id}}"
        >
        <h3>{{contact.Name}}</h3>
        <p>{{contact.Title}}</p>
      </ion-item>

<ion-item class="item mti-item"

collection-repeat="contact in vmc.contacts | filter:vmc.search.query" type="item-text-wrap"

href="#/tab/account/{{vm.account.Id}}/contact/{{contact.Id}}"

<h3>{{contact.Name}}</h3>

<p>{{contact.Title}}</p>

</ion-item>

Add a new template file called www/templates/contact.html with the following content. This template will render the details we have for our contact (Name, name of the account, job title, mobile phone number and email). Note that we are use ng-if to only display the mobile phone number and email if they exist.

<ion-view  title="Contact Details" cache-view="false" >
  <ion-nav-title>{{::vm.contact.Name}}</ion-nav-title>

  <ion-nav-buttons side="right">
    <mc-sync-spinner></mc-sync-spinner>
  </ion-nav-buttons>

  <ion-content>
    <div class="list card">

      <div class="item">
        <h2>{{::vm.contact.AccountName}}</h2>
        <p>{{::vm.contact.Title}}</p>
      </div>
      <div ng-if="vm.contact.MobilePhone" class="item">
        {{::vm.contact.MobilePhone}}
      </div>
      <div ng-if="vm.contact.Email" class="item">
        {{::vm.contact.Email}}
      </div>

    </div>
  </ion-content>
</ion-view>

<ion-view title="Contact Details" cache-view="false" >

<ion-nav-title>{{::vm.contact.Name}}</ion-nav-title>

<ion-nav-buttons side="right">

<mc-sync-spinner></mc-sync-spinner>

</ion-nav-buttons>

<ion-content>

<h2>{{::vm.contact.AccountName}}</h2>

<p>{{::vm.contact.Title}}</p>

</div>

</div>

</div>

</ion-content>

</ion-view>

Add the following state definition to your www/js/app.js to add the routing in for this new URI. This can be added after the entry for the tab.accounts-detail state we added earlier. Hopefully this will look very familiar now.


    // the router info for our contact page
    // Note we have a "accountId" state param available to our angular code
    .state('tab.accounts-contact', {
      url: '/account/:accountId/contact/:contactId',
      views: {
        'accounts-tab': {
          templateUrl: RESOURCE_ROOT + 'templates/contact.html',
          controller: 'ContactCtrl',
          controllerAs: 'vm'
        }
      }
    })

// the router info for our contact page

// Note we have a "accountId" state param available to our angular code

.state('tab.accounts-contact', {

url: '/account/:accountId/contact/:contactId',

views: {

'accounts-tab': {

templateUrl: RESOURCE_ROOT + 'templates/contact.html',

controller: 'ContactCtrl',

controllerAs: 'vm'

}

})

Create a new controller called ContactCtrl and save it in the www/js/controllers/contact.controllers.js file. This controller shall be reponsible for handling the contact.html template we created a moment ago. As with our other controllers it’s job is to request data from our services and apply the values to our scope. In this case it’s job is to request a single account object, based upon the contactId state parameter.


/**
 * Contact Controller
 *
 * @description description
 */
(function() {
  'use strict';

  angular
    .module('starter.controllers')
    .controller('ContactCtrl', ContactCtrl);

  ContactCtrl.$inject = ['$stateParams', 'ContactsService', 'logger'];

  function ContactCtrl($stateParams, ContactsService, logger) {

    var vm    = this,
        logTag = "ContactCtrl";


    activate();


    function activate(){
      // Request contact details from our ContactsService. We are passing in
      // the contactId, taken from the URL (stateparams) as in our app.js
      ContactsService.get($stateParams.contactId).then(function(contact) {
        vm.contact = contact;
      }).catch(function(e) {
        logger.error(logTag, e);
      });
    }

  }

})();

/**

* Contact Controller

* @description description

(function() {

'use strict';

angular

.module('starter.controllers')

.controller('ContactCtrl', ContactCtrl);

ContactCtrl.$inject = ['$stateParams', 'ContactsService', 'logger'];

function ContactCtrl($stateParams, ContactsService, logger) {

var vm = this,

logTag = "ContactCtrl";

activate();

function activate(){

// Request contact details from our ContactsService. We are passing in

// the contactId, taken from the URL (stateparams) as in our app.js

ContactsService.get($stateParams.contactId).then(function(contact) {

vm.contact = contact;

}).catch(function(e) {

logger.error(logTag, e);

});

}

})();

You now need to update your ContactsService to expose a new get method. This is again uses the smartSql MobileCaddy call. Note however that we are also injecting the AccountsService and, following the succesful response of a contact back from the ContactsService, are then requesting information from our AccountsService. We use this call to enrich our contact object with the account.Name that is returned. This means our controller does not need to know that it has to call against 2 tables to get this data.


angular
    .module('starter.services')
    .factory('ContactsService', ContactsService);

  ContactsService.$inject = ['devUtils', 'logger', 'AccountsService'];

  function ContactsService(devUtils, logger, AccountsService) {

    var contact;

    return {
      get: get,

      getForAccount: getForAccount
    };


    /**
     * @function get
     * @description Gets single contact with ID id and enriches with Name from
     *              related account
     * @param  {string} id Id of our contact
     * @return {promise}    resolves to an array of contacts object
     */
    function get(id){
      return new Promise(function(resolve, reject) {
        var smartSql = "SELECT * from {Contact__ap} WHERE {Contact__ap:Id} = '" + id + "'";
        devUtils.smartSql(smartSql).then( function(resObject) {
          contact = resObject.records[0];
          return AccountsService.get(contact.AccountId);
        }).then(function(account){
          contact.AccountName = account.Name;
          resolve(contact);
        }).catch(function(resObject){
          reject(resObject);
        });
      });
    }

angular

.module('starter.services')

.factory('ContactsService', ContactsService);

ContactsService.$inject = ['devUtils', 'logger', 'AccountsService'];

function ContactsService(devUtils, logger, AccountsService) {

var contact;

return {

get: get,

getForAccount: getForAccount

};

/**

* @function get

* @description Gets single contact with ID id and enriches with Name from

* related account

* @param {string} id Id of our contact

* @return {promise} resolves to an array of contacts object

function get(id){

return new Promise(function(resolve, reject) {

var smartSql = "SELECT * from {Contact__ap} WHERE {Contact__ap:Id} = '" + id + "'";

devUtils.smartSql(smartSql).then( function(resObject) {

contact = resObject.records[0];

return AccountsService.get(contact.AccountId);

}).then(function(account){

contact.AccountName = account.Name;

resolve(contact);

}).catch(function(resObject){

reject(resObject);

});

}

If you reload your app you should now be able to click on each contact and see a details page for them.

Want to get building?