In the upper right corner of the Fluid header you will find the "Hamburger" (or hamburger-light) menu. This 3-bar (or 3-dot) icon displays a list of component-specific actions. For the most part these actions are rather generic, allowing a user to add a tile to a homepage or view preferences. Occassionaly we see a component that has its own custom actions. The HCM My Team and Company Directory components are great examples of components with custom action menu items. In fact, the Fluid homepage itself is an example, with its Personalize Homepage custom action.
As developers, we can add custom component-specific actions to the header menu of a component by adding a special group box (Custom Action Menu) to one of the component's pages. When PeopleSoft loads a page with a Custom Action Menu group box, it moves the contents of that group box into the header action menu. Any actions loaded from a page stay resident in the menu as long as the component is in scope. So, technically, all Custom Action Menus are component-based. Here is my struggle:
Actions inserted into the header menu have component scope, not page scope, but are defined at the page level.
Custom action menu items are not visible (in fact, don't exist) until the page defining these menu items is loaded into the user's browser. If a component may have multiple pages, into which page would you insert the custom action menu? Logically, I might say, "The first page, of course." But here is the problem: there really is no "first page." There is a page that the component will load by default. We might call that the front door. PeopleSoft, however, lets users enter through the side door, back door, and all windows as well. By adding ?Page=... to a component URL, I can enter that component from any page within the component. For example, if I want to open the User Profile component to the User Queries page, I add PAGE=USER_QUERY to the end of the URL. If I enter a component through the wrong starting page, then I won't see the component's custom actions in my header menu.
You don't think your users will enter a page name in the URL? Probably not. Why worry about a scenario that will never happen? Actually, it isn't my users that concern me. It is system generated messages and processes with URLs. It is workflow notifications that attempt to simplify workflow by taking me to the next step in a business process.
If a user can enter a component through any page and component specific actions must be defined on a page, then into which page should I enter component-specific actions? While teaching a Fluid class and challenging students to find a solution to this problem, one of my students asked me, "What if you put the menu definition in a Footer page?" Wow! What a great idea! If you have component-scoped actions, why not define them in a component-scoped page? This page will load as soon as the component loads, regardless of the entry point. If you already have a footer page in your component, perfect! Just add the Custom Action Menu group box to your existing footer page. If you don't have a footer page, should you add one? I say, "Yes." Properly built, a footer page may be entirely invisible, used just for component-specific banner (also known as the header) changes (including Custom header left, right, and bottom sections). Seems ironic doesn't it? If you want to change the header, add content to the footer. Here is a sample footer page built specifically to hold a menu. By clearing the CSS class name from the outer container Group Box, the footer becomes invisible.
The following screenshot shows how the menu will appear when PeopleSoft reparents the menu's HTML from the footer into the header component action menu.
Interested in learning more about Fluid? I offer at least one virtual Fluid training class per month. You can learn more about our current offerings on our Live Virtual Training page. If your organization has more than 8 employees, you may derive cost savings by hosting your own training event. Learn more at www.jsmpros.com/training.
7 comments:
Hi Jim,
I have been trying to find out exactly what you have posted here. We would like to get our custom menu items/links on the mini sandwich (3 dots) menu.
Our users are not comfortable clicking on the navigator icon, especially on mobile view.
In your post, I cannot see the second screen shot, and could you please share the details guide how to achieve having any menu item, or link into that sandwich menu?
Much appreciated.
Thanks,
Daniel
@Daniel, Pages 2-4 of this document on MyOracle Support provides guidance for adding items to the component actions menu: fluid_programming_fundamentals_red_paper_may_2016". Personally, however, I prefer the writeup from my friends at Cy2.nl: 10 Best Fluid UI Controls. Look for item #9.
Hi Jim, our users would like to see the same Help link available on the Actions menu from all the fluid pages, available when they are on a Classic page (and using the Fluid-like Theme). I have created my own version of DEFAULT_THEME_FLUID and tried creating a new node on the Header under pthdr2actionlist (type Homepage Help Link) but I can't get it to show up on the Actions menu. Any ideas?
This post is true gem (as the myriad other posts here)! Thank you for sharing the benefits of using the footer page.
Thank you @Sasank!
Jim this is great.... But I am trying to write more and more code that does not touch PS , Thus PUM become less of a distraction ...
So I was thinking of related content ... But really think is a great way to add additional Links... Is there another way to add it to a component with out changing the page .. And still have access to page to grab information
@Will, if the target page has Drop Zones, that is a very effective approach. Fluid Related Content is a bit of a challenge because Fluid Related Content only allows non-interactive tiles, meaning the user would have to click into the tile to use the links.
Post a Comment