Reusable Selection-Page

Ionic Framework ionic-v3
1

I’m trying to build a page where I can select an item from a list and return it back to the previous page. But I wan’t to use the SelectionPage from many different Pages. How do I return the selection to the calling Page in this case?

2

u can create modal page of selection and in every pages where u want that selection, just call that modal.

3

You can show this SelectionPage inside a modal and use ViewController’s dismiss method to pass the data to previous page.

presentSelectionPage() {
    let modalSelectionPage = this.modalCtrl.create('SelectionPage', {}, {
        enableBackdropDismiss: false,
    });
    modalSelectionPage.onDidDismiss((data: any) => {
        console.log(data);
    });
    modalSelectionPage.present();
}

Also you can use ionic events.

4

I would prefer to use pages. Can it be done using pages?

5

obviously. just redirect to that page through button and in selection page use

import { Location } from '@angular/common';

goBack() {
    this.location.back();
  }

this will return to u to previous page without specifying that page.

in v3 i thing its

import { Location } from '@angular-common';
6

But how do I return my selected object?

7

use storage for storing ur selection

8

This seems awefully complicated. How would I notify the previous page? Surely the must be some way to just return the selected object since this seems to be a pretty common usecase to me when editing objects.

9

Use a component, not a page, with Output and EventEmitter. If you use a Page, it gets complicated, because you have to deal with two different pages both opening copies of your Page at the same time, and how do you make distinct copies of the Page?

Edit: or do what I do, and use Redux to hold a global state.

10

I’m actually thinking about using redux. But still the Problem stays the same. I currently have Page wich loads a List of Groups (with icon, title, subtitle …) which I need to select a group in various other editpages of my app. So to keep dry and not implement multiple versions of this group selection list it cannot know about the page from where it has been called. I have Contacts, Appointments, Documentations which all can have a group. But even with what I read about redux so far I don’t see how I can return the group to attach it to e.g. the contact in a generic way.

11

You don’t “return” a group. You maintain a dictionary, indexed by a unique ID. I assign a UUID to everything, but let’s say that each of your titlles is unique. (If that might not be true, you need to use something else.) Then the page updates the redux state with the new information for the title record, and any other page requests from redux the information of any title record whenever it needs it.

You have a central bank of information. Your edit pages make changes to that information. Your display pages request that information and then show it.

12

But this means the selectionpage needs to know which object to set the group on depending on the page from which the user has navigated to the selectionpage. In a desktop application I would just create a dialog or a wizard to do this.

13

Web programming is about 5 million times harder. You might want to think through ways asynchrony might cause your input structure to fail. You’re running into the difference between push and pull.