dilluns, 8 de maig del 2017

Ionic 2, using ActionSheetController

Recently I have found myself in a situation that has led me to choose between different options. I wanted edit an entry in the database, first I just wanted to modify two fields and use an AlertController for that. Then I thought that I could modify a third field and here appears the problem, this field only can be modified using a checkbox input and a checkbox input can't be mixed with a text input.
For solve this, my first idea was make a new page and use components <ion-select> and <ion-input> but I think it's more natural realize the operation in the same page so that I need  to use an AlertController. For that I have divided the task in two AlertController, one with two text inputs and one with the checkbox input. And for show the two options to user an ActionSheetControllerHere you can find more info.

The first step is import the ActionSheetController  from ionic-angular in our controller
   
   import { NavController, AlertSheetController } from 'ionic-angular'

Next we add the ActionSheetController how a parameter in the constructor
   
   constructor(public navCtrl: NavController, 
               public alertCtrl: AlertSheetController) {

   }   


And now we create a function to present the alert to the user

  showMenu(entry, expense) {
  
    let optionsMenu = this.actionSheetCtrl.create({
      title: '',
      buttons: [
        {
          text: 'Edit entry',
          role: 'edit',
          handler: () => {
            
             this.editEntry(entry, expense);
          }
        },
        {
          text: 'Move to',
          role: 'move',
          handler: () => {
            
             this.moveEntry(entry, expense);
            
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            optionsMenu.dismiss();
          }
        }
      ]
    });

    optionsMenu.present();
  }

And two functions editEntry(entry, expense) and moveEntry(entry, expense) with his correspondant AlertController to realize the task. 

The result looks like


Cap comentari:

Publica un comentari a l'entrada