The Fluid Navigator is the new navigation technique that most closely resembles to old Classic style drop down menu navigation. If you have not yet had the chance to convert your entire menu structure to use more modern navigation techniques, then you are stuck having to rely on the Fluid Navigator to get you where you need to be in some cases. One major limitation of the Fluid Navigator is that is does not show you breadcrumbs when drilling down into the menu structure. Not having breadcrumbs displayed makes it much harder to quickly jump around the menu. In this post, I will demonstrate how you can add breadcrumbs to your Fluid Navigator.
This solution will be achieved using the Related Content Framework Event Mapping functionality. We will be mapping two separate application classes to a couple of CREFs in the application. One application class will be mapped to the component level post build event of the Fluid NavBar.
And the other application class will be mapped to the component level post build event of the Fluid Navigator.
I have included all of the applicable objects for this solution in an App Designer project.
CLICK HERE to download the project.
Once you import this project into App Designer, you can open up the PSM_BREADCRUMB_NAV Application Package and take a peek at the two classes that will be getting mapped with Event Mapping. The first class is named DisplayBreadcrumbs. This class is used to keep track of the portal registry folder objects that the user drills into when navigating. The folder names serve as the breadcrumbs and they will get displayed at the top of the Fluid Navigator as the user navigates. When a user clicks on the breadcrumb, the Navigator content area will display the folder’s contents.
The included PSM_BREADCRUMB style sheet in the project applies a rather basic styling to the breadcrumbs. I am sure there is a way to make the breadcrumbs more visually appealing, but I do not have an eye for design. I am certainly open to enhancement suggestions on this!
Now that we have a basic understanding of the technical details of this project, we are now ready to perform the Event Mapping configuration for this solution. You will need to navigate to the Event Mapping tab of the Manage Related Content Service page (Main Menu > PeopleTools > Portal > Related Content Service > Manage Related Content Service) and select the “Map the event of the Application pages” link. We are interested in performing mappings to the Navigator CREF and the NavBar CREF.
You are going to need to map the PSM_BREADCRUMB_DISPLAY Service to the post build/post processing of the Navigator CREF.
You will need to map the PSM_BREADCRUMB_STYLE Service to the post build/post processing of the NavBar CREF.
After successfully performing and saving the mappings, you should be all set. All you need to do is log out and log back in to see the changes.
Here is an example of drilling down into the “Permissions & Roles” folder in the Fluid Navigator with this bolt on configured:
In this example, clicking on the PeoleTools folder will bring up the PeopleTools folder contents in the Fluid Navigator content area like this:
Additional Navigator Styling:
You probably noticed in the picture above that the menu items are smaller than they are as delivered. This is because a custom style sheet (PSM_SMALL_NAVIGATOR_ITEMS in the project) was applied in the event mapped code to override the size of the menu items. I find this style particularly helpful on large form factor devices. The delivered large sizing of the menu items works well for phones and tablets since the user has less clicking precision. However, for devices with a lot more screen real estate, I find the large menu items counterproductive. If you are not interested in applying this style to all form factors, then you could always evaluate the user’s form factor in the event mapped code to conditionally apply the custom style.
Another subtle difference is the picture above is the absence of the Navigator header that contains the buttons to go to previous directories. I found the Navigator header to be useless with the breadcrumbs present. This is because we can now simply click on the breadcrumb (folder name) to go back to previous directories. The style sheet that makes this occur is included in the project as well and is named PSM_HIDE_NAVIGATOR_HEADER. Similar to the other custom style to adjust the menu item sizing, you have complete control in how you want to apply the style in the event mapped code.
If you decide to not apply the custom styles to alter the Navigator and are only interested in the breadcrumbs, then here is an example of what this would look like:
While adding breadcrumbs to the Fluid Navigator will hopefully make using it easier, don’t use this as a reason to not explore other navigation techniques that may allow for an even better navigation experience. There are many ways to perform navigation in a Fluid environment by implementing and using things like Homepages, Tiles, Navigation Collections, Search, etc. I believe that the proper implementation of these more modern navigation techniques will provide for the best possible overall user experience.