Ion-back-button behaviour - best practice for 'add' / 'edit' functionalities

Ionic Framework
1

Hi guys,
I wanted to ask whether you have any best practices regarding the add/edit functionalities and an ion-back-button on these add/edit pages in the application.

For example I have a following urls:

  • /admin/customers - list of customers
  • /admin/customers/{:id} - customer full page.
    When I am on the listing page and I click on the particular customer, I go to customer’s full page. When I click a ‘back button’ on this page I come back to the listing. That’s fine.

But imagine this:
I am on the listing page (’/admin/customers’). I click ‘add new customer’ button and I go to:

  • /admin/customers/new
    I fill the form and click ‘save’. Then upon saving, I am redirected to the newly created customer full page:
  • /admin/customers/{:id}
    And now (important part) on the customer’s full page I click the ‘back button’ because I want to come back to the listing page but instead I am being redirected to the ‘admin/customers/new’ which is not what I expected. As a user I expected to go back to the listing page.

Do you have any best practices to tackle these types of scenarios? Can I force the back button to redirect always to a listing page for example? Or I need to modify the routes somehow in order to achieve the expected behaviour?

Thanks in advance! I would really appreciate if you could shed some light on how you tackle these scenarios.

2

You could do something like replace in your navigation. Not sure what framework you’re using, but when you navigation from /new to /{:id}, you’d do something like…

// With Angular
this.router.navigate(NEW_URL, {replaceUrl: true});

// With React Router
const router = useHistory();
router.replace(NEW_URL)

Replace should swap out the current page (/admin/customers/new) with /admin/customers/{:id} and allow you to navigate back to /admin/customers.

3

I am using ionic 4 with Angular, and basically with router I can do whatever I want indeed. But Ionic has this back button component: https://ionicframework.com/docs/api/back-button and this is quite smart itself so I don’t want to overwrite this default functionality and replace the history of the router. This seems to be a workaround, but is there any way in your head how we can do it with Ionic Back button default behaviour? Possibly this component doesn’t cater for such a simple scenario…? It has a ‘defaultHref’ property but it works only when there is no history at all.

4

Could anyone share some ideas or maybe you have your own usual way how you do the thing described in the question?

5

Hey
I myself have given up hope on the ionic back button :frowning: in such scenarios (and i have a few of those)
I would do the „create“ flow inside a modal which is in regards to the userexperience in no way different for the user. It has the upside not to fu@@ up the routing history which the back button needs

6

Hey! Thanks for your opinion!

Makes sense as well. I also think that there are certain scenarios where a single modal won’t be the best option, especially if we have a state of the app tied with the routing so it has to be linked with the url/history.

I still believe the Ionic Team didn’t create a silly component and there must be a way of doing that properly. Those bigger apps made with Ionic that are in Play Store I believe they had a similar issue and they solved it somehow… Actually I think every app that contains a ‘create’ flow (create customer, item, task, contact etc) encountered a similar riddle…

7

I have created my own modal controller that flies in the modal from the right, in the same way a page route occurs.

Maybe hacky, but at least avoids the routing issue, and conceptually imho pretty sound, because a NEW thing is quite a focal activity, instead of browsing through data.

8

my current app is a mixture of whatsapp, instagram and tinder. So there are lots of screens and navigations. Thanks to nils mehlhorn at How to Navigate to Previous Page in Angular | Nils Mehlhorn i am quite happy with a mixture of that custome navigation history and about three modals (which i am about to condense to just one)

Maybe this is a help to someone as well.
Nils has quite steep knowledge and his article solved all my challenges