Over a million developers have joined DZone.

Mobile Citizen Engagement App in Ionic 2: Part II

In Part II, we're going to look at details of a permit and make a detail screen.

· Mobile Zone

In the first part of this series, we developed the main components to query a REST service and display a summary of results on the screen in our mobile application. Mobile devices tend to have smaller screens than desktops. We, therefore, need to limit the amount of information that the user sees. The user in our scenario will want to look at details of a permit and to accommodate this we will need to make a detail screen.

Bootstrap a New Page

The next step is to allow the user go to more details of the permit. We will do this by adding a detail page using Ionic's command line. The command line makes this very easy to create the detail page. In the command line prompt in the project folder. Type the following:

 ionc g page detail 

This will create a new page in src\pages\details. To allow navigation to this page, we will have to add it to the application navigation. Ionic 2 is using Angular 2 module structure. Therefore, we need to let the underlying Angular 2 application know about its providers, directives, and components.

The app.module.ts file allows us to bootstrap the application giving the application added performance benefits. These performance gains allow the final application to be smaller and have compiler performance improvements. 

Open src\app\app.module.ts file as this is where we need to bootstrap into the application our new details page. First, import the new detail page reference.

 import { Detail } from '../pages/detail/detail'; 

Then add the declarations entry for the new detail page at the end of the 'TabPage" entry in the @NgModule section. (See line 8 below), and add entry to the bootstrap components (line 20).

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Detail
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Detail
  ],
  providers: []
})

The new detail page is now bootstrapped into our application, but it still won't be accessible to the user until we add functionality to the home controller and the page. 

Modify Home 

To add this functionality, we will need to modify the Home page’s controller in Home.ts.  The new function will push the user to the detail page. This function will take a JSON permit object and pass this as a parameter to the navigation controller. The navigation controller handles pushing and popping pages off the navigation stack. Thinking of this like an array of pages and the current page is the last item in the array. When the user presses the back button this pops off the last page from the array stack. It is easier to think of the navigation controller as a way to manage a history of pages.

First, import the new detail page reference at the top of the home.ts file.

 import {Detail} from '../detail/detail'; 

Next within the HomePage class, we want to add the function to push the user to the new detail page. The navigation controller's push function is called passing in the page and our permit object like so:

goToDetails(permit) {
     this.navCtrl.push(Detail, { permit: permit });
}

Then we will need to add a click event to call the new function in the home.html view. In Home.html add the click event in the <ion-card> component where the application iterated through all the permits it found. The change in code will look like this:

<ion-card *ngFor="let permit of foundPermits" (click)="goToDetails(permit)">
        <ion-card-header>
             <ion-icon name="home" item-left></ion-icon> {{ permit.category }}
        </ion-card-header>

 <ion-card-content>
 {{ permit.application_permit_number }}
  </ion-card-content>
</ion-card>

Modify Detail Page

Modify the Detail page’s controller, so that when the home page passes the permit object to it. The detail page will display the detailed information of the permit. Open src\pages\detail\detail.ts and add to the import the nav params module. The Navparams is part of ionic-angular package. The added change to the import looks like this:

 import { NavController,NavParams } from 'ionic-angular';

Add a permit detail object, just before the constructor. This will be our placeholder for the detail page to hold passed in permit detail information.

 public permitDetail;

Then in the constructor assign the passed in JSON object that we passed from the home controller. The JSON object will be passed in via the NavParams.  The constructor needs to include NavParams. Then the parameter can be assigned to our public variable for this component.  

constructor(public navCtrl: NavController,private navParams: NavParams) {
    this.permitDetail = navParams.get('permit');
}

The complete detail.ts file is as follows:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-details',
  templateUrl: 'details.html'
})
export class DetailsPage {
public permitDetail;
  constructor(public navCtrl: NavController,private navParams: NavParams) {
  this.permitDetail = navParams.get('permit');
  }

}

The final step is modifying the detail view to display the permit detail information. We want to display the summary information and display additional information. It is easy enough to present this as a list of items. Use the <ion-list> component makes this easy to display <ion-item>. We will also add some icons as Ionic has a set of icons to choose. This also provides some quick visual reference to the user about the textual information they are seeing.

Complete listing of the details.html:

<ion-header>
  <ion-navbar>
    <ion-title>{{permitDetail.category}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list inset>
        <ion-item>
<ion-icon name="home" item-left></ion-icon> 
            <h2>Permit Number:</h2>
<p>{{permitDetail.application_permit_number}}</p>
        </ion-item>
 <ion-item>
<ion-icon name="mail" item-left></ion-icon> 
            <h2>Address:</h2>
<p>{{permitDetail.address}} </p>
        </ion-item>
<ion-item>
 <ion-icon name="document" item-left></ion-icon> 
            <h2>Detail</h2>
<p>{{permitDetail.description}} </p>
        </ion-item>
 <ion-item>
 <ion-icon name="map" item-left></ion-icon> 
            <h2>Map</h2>
<p>{{permitDetail.latitude}} {{permitDetail.longitude}} </p>
        </ion-item>
    </ion-list>
</ion-content>

Now, when the user clicks on one of the homepage and queries the permits, they will be directed to the new details page with additional information when they click on the card. Because we are using Ionic's navigation the user has a way to go back to the home page.

In conclusion, you have enhanced our existing mobile application to allow the user to navigate to different "pages" or screens within our application. This very basic application demonstrates how quickly it is to develop a REST based mobile application. Although it uses the default Ionic theme. In part 3 we will discuss how to make this application look better and take advantage of scss and see how Ionic handles multiple platform theme styles.


Source on github: https://github.com/wiyou/citypermit

Topics:
ionic framework ,mobile ,angular 2 ,open data

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}