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

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.

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();

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

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: 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.

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

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

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…

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.

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