Dynamic Breadcrumbs

Content Type: Module
Categories: Utility,User Interface

Overview

DYNAMIC BREADCRUMBS

Do you also find that configuring breadcrumbs is a hassle? Have you also been frustrated at previous developers implementing them and are you right now looking at a huge pile of refactoring work? Or do you wish you could do the work you normally do in a week in a few hours? The dynamic breadcrumbs module comes with an out of the box functionality that, after you add it to your pages, will show the user breadcrumbs based on their path through the application.

This is great for reducing development time and increasing maintainability. But it will also allow you to navigate to a single page from more than one overview and still have your breadcrumbs work as expected.

GOOD TO KNOW

This module uses your browserstab's previous page history to keep check of how many pages deep you are in your application. The close page history is limited to 50 items. When this limit is reached your app will continue working but breadcrumbs wont. Using correct close page behavior will ensure users wont encounter this.

Documentation

Demo urlhttps://breadcrumbtest-sandbox.mxapps.io/index.html

Description

With this module you can add breadcrumbs to your app that will generate based on the path your user takes. You will no longer have to configure each link yourself.


While moving this module from the Valcon appstore to the public appstore I noticed Bert Hoogeboom also put a Dynamic Breadcrumbs module on the marketplace. Both modules do mainly the same thing but there are some slight differences:


Features

This module will clear breadcrumbs when you close pages at the same time as opening a new page. For example when you use your top or sidebar navigation to go to a new page in your app. Or when you navigate between multiple pages on the same depth in your app.

This module contains examples, allowing you to extend the logic behind your breadcrumbs.

Because this module does not retrieve the user from Database it should perform better when your app has a lot of users.


Limitations

The close page history, that is used by this module, is limited to 50 items. When this limit is reached your app will continue working but these breadcrumbs wont. Using correct close page behavior will ensure users wont encounter this.



To Use

1. Make sure that all pages reachable from the mendix navigation menu have 'close pages' set to 'all'.

2. Set accurate page titles for all pages in your app from the properties panel.

3. Place the DS_Page_Default and SNP_BreadCrumb below on each page of your application you want to use BreadCrumbs in. Placing the items in a layout will not refresh them when new pages are opened.

4. For pages in which you want dynamic naming: (E.g. the name attribute of the page parameter): Replace DS_Page_Default with your own version of DS_Page_ExamplePageParameterName.



Things to keep in mind

This module uses your browserstab's previous page history to keep check of how many pages deep you are in your application. The close page history is limited to 50 items. When this limit is reached your app will continue working but breadcrumbs wont. Using correct close page behavior will ensure users wont encounter this.

This close page history also includes the number of pages you visited before opening the Mendix application which you might encounter during development. To fix this, close your browser tab and reopen it.

Do not place the snippet in a layout as items in a layout are not refreshed if the layout stays the same. (You can place the snippet in placeholders ofcourse)

Breadcrumbs do not play nice with popup pages as the breadcrumb of the parent is shown. I strongly reccomend not to, but: if you really want a popup with breadcrumbs: the SinglePopup example shows how always closing 1 page more will allow your popup breadcrumbs to at least work as expected.

For exceptions: (Such as subbreadcrumbs or weird business requirements you could not manage away) You can use the datasource DS_Page_ForceStartBreadcrumb to have a breadcrumb start a few pages deep into your app. Again, make sure that your pages are closed correctly afterwards.

Take a look at the rollbackChangeFromForm example if you need to perform logic when a user closes a form. On leave logic is something you should generally avoid as this logic will not be triggered when users click the browser back button, or closing the browser tab.



Frequently Asked Questions:

  • Q: I get a message that the close page history has exceeded 50 items and clicking the link will not work.
  • A: Mendix can only close as many pages as it opened itself. If you run your Mendix application multiple times without opening a new tab, you will likely encounter this issue. Open your Mendix app in a new tab and it should work fine.
  • Q: How can I be sure that my users will not encounter the same issues?
  • A: 50 pages is quite a lot, if you set up close page in your application such that all pages are closed once a user uses the toplevel navigation. It will be very unlikely they run into any issues. If your users open the application in a new tab when they start working, they will never run into any issues.

Releases

Version: 1.2.0
Framework Version: 9.24.16
Release Notes: Version 1.2 - May 21 2024 - Mark van der Smagt Upgraded to Mendix 9.24 to allow importing in Mendix 10 projects
Version: 1.1.0
Framework Version: 9.6.15
Release Notes: Version 1.1 - March 15 2024 - Mark van der Smagt Closing multiple pages and then opening a single page will now correctly show remaining breadcrumb page items. Closing multiple pages and then opening a single page will now delete the correct amount of pages.
Version: 1.0.0
Framework Version: 9.6.15
Release Notes: Initial release includes: Dynamic breadcrumbs logic Readme Examples: - Default breadcrumb - Breadcrumb with dynamic pagetitle - Examples for some other usecases where I'd rather see that you did not use them.