Add backSegment property to DeepLinkMetadata for dynamic navigation hierarchies

[WhatsThatItsPat]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request

Feature Request:

From what I've gathered, the deep link system limits us to a single dynamic level in a navigation hierarchy. The defaultHistory array takes strings which correspond to class names of pages (or of the name properties of DeepLinkMetadata objects if used). The issue is that params can't be passed backwards through the history, so hierarchies with multiple dynamic levels are a no-go right now.

I suggest adding a new property to the DeepLinkMetadata type called backSegment, which would look like something like this (assuming you landed on the 3rd level of a dynamic hierarchy):

@IonicPage({
  name: '3rd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId/3rd/:3rdId',
  backSegment: 'hierarchy/1st/:1stId/2nd/:2ndId'
})

The backSegment would automatically grab current URL params (1stId & 2ndId) and pass them back through the hierarchy.

Clicking the back button would pop the 3rd level and take you to the 2nd level:

@IonicPage({
  name: '2nd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId',
  backSegment: 'hierarchy/1st/:1stId'
})

Rinse and repeat to pop the 2nd and go back to the 1st:

@IonicPage({
  name: '1st',
  segment: 'hierarchy/1st/:1stId',
  backSegment: 'hierarchy'
})

1st pops back to the root of the hierarchy (we are out of params to usher through):

@IonicPage({
  name: 'Hierarchy',
  segment: 'hierarchy',
  backSegment: ''
})

And Hierarchy can pop back to the home/default page of the site:

@IonicPage({
  name: 'Home',

  // Empty segments don't currently work. See links below.
  segment: ''
})

Note also that there is only a single segment string, rather than an array of pages in a history. I don't think a page should have to list its full history. If a page knows its backSegment, and that parent knows its backSegment, etc., the system should be intelligent enough to build the breadcrumb back to the root for a given page.

If you need the whole history at once (perhaps because lazy loading prevents you from inspecting DeepLinkMetadata of parent pages up the hierarchy), then an array of backSegments, while duplicative, would work as well:

@IonicPage({
  name: '3rd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId/3rd/:3rdId',

  // or historySegments?
  backSegments: [
    'hierarchy/1st/:1stId/2nd/:2ndId',
    'hierarchy/1st/:1stId',
    'hierarchy',
    ''
  ]
})

---

If possible, it would be cool to ditch the explicit page names in segments and just have params (so this would apply to the current segment property as well as the suggested backSegment). From the example above, it would look like this:

segment: 'hierarchy/:1stId/:2ndId/:3rdId'

The idea here is that pages are "implicit" in the organization of many hierarchies. If you consider the dog taxonomy example, having each layer (Kingdom, Phylum, Class, Order, Suborder, Family, Genus, and Species) in the URL is superfluous:

example.com/taxonomy/Kingdom/Animalia/Phylum/Chordata/Class/Mammalia/Order/Carnivora/Suborder/Caniformia/Family/Canidae/Genus/Canis/Species/C_lupus

vs. "implicit" pages:

example.com/taxonomy/Animalia/Chordata/Mammalia/Carnivora/Caniformia/Canidae/Canis/C_lupus

---

Some links regarding the empty segement, which is how I thought it would work:

• Handle default root and catch-all parameters with deep link system #11363
• IonicPage does not allow for empty segment ionic-app-scripts#888
• https://forum.ionicframework.com/t/ionic-3-deeplinker-base-url/86338

[bergergit]

+1!
This should be totally included in the framework, (mainly for browse) since multiple environments apps are really possible with Ionic. (https://ionicframework.com/docs//resources/desktop-support/)

[abdel-ships-it]

This would really solve navigation issues right now. like I have a report page with this path report/:id which has an image details view under path report/:id/image/:id

If the image page has a defaultHistory of ['report'] you would expect it to go from

report/1/image/1 to report/1 but it actually goes to report/:id which is a super annoying bug.

[WhatsThatItsPat]

Here are a few more thoughts on a possible API(s) for the "implicit-segment / param-only hierarchy" I mentioned above. I'll use the taxonomy example again, but I'll only use 3 layers for the sake of brevity.

// This is the root of the hierarchy
@IonicPage({
  name: 'Taxonomy',

  // We declare a root for the hierarchy that deeper layers will use
  hierarchyRoot: 'taxonomy',
  
  // Since this is the root, it doesn't have a 'hierarchyParent'
  hierarchyParent: null, // maybe an 'isRoot' property set to true?
  
  // It can/should still have a backSegment/defaultHistory (in this case the
  // root of the app) because even though it is the root of a hierarchy, it's
  // still a normal page.
  backSegment: '',

  // ...but the hierarchy could also start deeper in the app
  backSement: 'some/path/'
})


// This is the 1st "param-aware" layer of the hierarchy
@IonicPage({
  name: 'Kingdom',

  // We declare that this is part of the same hierarchy.
  hierarchyRoot: 'taxonomy',

  // We declare a parent so the system knows to build a URL param at this level.
  // Parent and root are the same because this is the shallowest level.
  hierarchyParent: 'taxonomy'

  // Note: we can't have a backSegment/defaultHistory here because that would
  // conflict with the hierarchyParent...should probably throw an error
})


// 2nd layer
@IonicPage({
  name: 'Phylum',
  hierarchyRoot: 'taxonomy',

  // I'm not sure about casing issues here. Is it smart enough to equate the
  // capitalized name 'Kingdom' to 'kingdom', or do we need another property?
  hierarchyParent: 'kingdom'
})


// 3rd layer
@IonicPage({
  name: 'Class',
  hierarchyRoot: 'taxonomy',
  hierarchyParent: 'phylum'
})


// etc.

The above would be smart enough to build a param hierarchy like:
example.com/taxonomy/:kingdomId/:phylumId/:classId/

Which would result in a URL like:
example.com/taxonomy/animalia/chordata/mammalia/

---

And maybe the above is overthinking it and you could do something like this:

@IonicPage({
  name: 'Class',
  segment: 'taxonomy/:kingdom|kingdomId/:phylum|phylumId/:class|classId'
  backSegment: 'taxonomy/:kingdom|kingdomId/:phylum|phylumId'
})

The parser would see the : and would grab kingdom|kingdomId as a param. But then it would see the | and understand that kingdom is a page and kingdomId is a param of that page, while also knowing not to build the word kingdom into the URL as a segment.

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#212