Breadcrumbs
In Valtimo front-end libraries version 10.7.0, the existing page title and breadcrumb components were replaced with Carbon components. Since previously URLs had not been implemented consistently, a custom solution was made in order to provide breadcrumbs with a good user experience. At the time of writing, breadcrumbs up to two levels deep are supported.
Breadcrumbs logic
If a page is at the top level of the page hierarchy, no breadcrumbs are shown, only the page title. This can be seen on the /tasks
page:
If a page is at the top level of the page hierarchy, but under a menu category, the menu category is shown as a greyed-ouy breadcrumb. This can be seen on administrator pages:
One level deeper, the previous page is shown as a breadcrumb after the menu category breadcrumb:
Custom page title
As can be seen in the previous screenshot, the page title is 'Process details' (visible in the browser tab), but the page title shown after the last breadcrumb is the name of the entity: 'Create Zaakdossier'. This scenario will be common in any implementation.
Since names of entities will likely be retrieved from an API, on page load a skeleton animation is shown, before the name is loaded. To enable this, add the route data property customPageTitle
to the route like in the following example:
process-management-routing.ts
process-management-routing.ts
Next, set the page title in the component once it is loaded, through the page title service:
process-management-builder.component.ts
process-management-builder.component.ts
Custom page subtitle
In a similar manner as in the above example, a custom page subtitle can be displayed by adding customPageSubtitle: true
to the route data and using the method setCustomPageSubtitle
on the PageTitleService
.
Hide page title
In some scenario's, it is desirable to show the breadcrumbs, but not the page title. To enable this, add the property hidePageTitle
to your route data:
process-management-routing.ts
process-management-routing.ts
Custom second breadcrumb
By default, when going two pages deep, the second breadcrumb shown is constructed from the URL. On some pages, this logic will not lead to a correct second breadcrumb. In these cases, it is possible to manually set a second breadcrumb from the component. This mechanism was used on the case detail page, where the second breadcrumb is meant to refer back to the list of cases of the selected case type:
In order to manually set the second breadcrumb, follow the below example:
dossier-detail.component.ts
dossier-detail.component.ts
Retaining query parameters
When clicking a breadcrumb, the user essentially goes a step back, and they want to restore the state of the page they were on. Therefore, it might be necessary to restore the query parameters used on this page. A mechanism has been implemented to enable this functionality.
Before navigating away from the page with the query parameters to be stored, cache the query parameters through the breadcrumb service, where the first parameter of the method cacheQueryParams
has to match the route of the breadcrumb which must restore the query parameters when it is clicked:
dossier-list.component.ts
dossier-list.component.ts
Displaying a template next to the breadcrumbs
On some pages, certain elements such as page actions should be displayed to the right of the breadcrumbs. This can be achieved by importing RenderInPageHeaderDirectiveModule
from @valtimo/components
into the module of which your page component is a part.
Next, include a ng-template
inside a ng-container
with the directive renderInPageHeader
inside your page component, like in the below example. The template will then be rendered to the right of the breadcrumbs.
sample.component.html
sample.component.html
Last updated