Adding a New Contact

In this module we will create a page for inputting the details for a new contact for an account. We will cover:

  • Adding Ionic navbar buttons
  • devUtils.insertRecord function

 Step 1 : Creating the Add New Contact page

In this step we will create a new template and make changes to our existing account detail page to add an Add new contact button (in the navigation bar), and add the routing in to tie these together.

  1. Create a new template called contactNew.html with the following content. This is essentially the input form for our new contact. Note how we are using ng-disabled to make sure our submit button is disabled until a certain level of validation has taken place.It can also be seen that we are again using the ng-controller directive to give our form a child scope handled by the ContactNewCtrl controller. We will add this controller code later in this chapter.It can also be seen that we are pre-populating the Name of the Account for the contact to be added to through the parent scope via {{::vm.account.Name}}
  2. Add the following state definition to your www/js/app.js to add the routing in for this new add contact URI. This can be added after the entry for the tab.accounts-contact-detail state we added earlier.
  3. Modify your account.html template, adding the following highlighted lines. This will add an Add Contact icon button to our navbar for this page.

If you reload your app now you should see a nice Add Contact button in the navbar when viewing an accounts detail page, and clicking this will take you to our new contact page.

 

5.1.1-join

Step 2 : Handling the form input and syncing with Salesforce

In this step we will add our controller logic to take the form input and add the functionality to our services to store this locally, for offline support, and to sync with the Salesforce platform.

  1. Create a new controller called ContactNewCtrl in a www/js/controllers/newContact.controller.js. And populate it with the code below.This controller exposes one function called addContact, that is called from our input form submission. This function shows a “Saving” dialogue, creates a contact object and then calls our ContactService.add function, passing this object in. If this call resolves then we hide our dialogue and return to the page that shows the list of accounts for our current account. This page should also now show our newly added contact.
  2. Add an add function to your ContactsService in www/js/services/contacts.service.js as below. This function calls the devUtils.insertRecord function with 2 arguments, the name of the mobile table and the object we wish to add.If the contact is added successfully then our service calls the SyncService.syncAllTables, that in turn requests that our a synchronisation call is made to the Salesforce platform. Note we are also injecting the SyncService into our service.

We now have an app that can add contacts to accounts, even when offline.

Step 3 : Fix our offline-added contact detail page.

One issue has arisen now with our app. If we run it offline and then add a new contact and try to view the contact’s detail page we will get an error. This is because we are forming our URI based on the contact.Id, and in the case of a record that has been added locally only the Id field will be in the form of something called a Proxy_ID. One issue with ProxyIDs is that they contain non-safe characters for URIs. There is a small fix for this which involves parsing our contact.Id through a filter that encodes it.

  1. Add a filter definition to the start of your www/js/controllers/controllers.module.js file like this:
  2. Update your account.html template so that the href for each contact entry now uses our new filter.

If you are using the tutorial-ionic-contact-explorer repo then you can get to this stage by checking out branch tutorial/5

With these extra change we can add contacts offline and view them without issue.