Overview
This job aid shows users how to create a breadcrumb bookmark in Chrome.
Background
If you want to copy the navigation pathway to a page in CHRS, which runs on PeopleSoft, you cannot copy directly. Instead, you need to view the breadcrumbs and then manually recreate the navigation path. In the following example, the screenshot shows the navigation, but not in a convenient format., but it must be constructed from the elements you can see in the Navbar area.
The navigation path in this example is: Menu > Workforce Administration > Personal Information > Biographical > Modify a Person.
For convenience, there is a javascript that you can run in a bookmark that shows the full navigation to any page in CHRS, so that it displays like this:
Alternately, there is a Find Object Navigation page in PeopleSoft. See Find Object Navigation. Some users might not have access to this page.
The instructions provided in this article are for Chrome only. The same javascript will work in other browsers, but you will need to adapt the instructions for Firefox, Edge, or whatever other browser that you use. CHRS is most stable with Chrome, so Chrome is the recommended browser.
Show bookmarks in Chrome (optional)
If the bookmarks bar is displayed in Chrome, skip to Create the Breadcrumbs bookmark. If the bookmarks bar is hidden, continue with this procedure.
Step 1: In Chrome, click the three dots, then select Settings.
Step 2: Type "bookmarks" in the search field
Step 3: Scroll down to find the Show Bookmarks bar setting in the Appearance menu.
Create the Breadcrumbs bookmark
Step 1: In Chrome, click the Star button in the Address Bar to create a new bookmark.
Step 2: Edit the name of this bookmark. In this example, it is "Breadcrumbs."
Step 3: Click Done.
Step 4: Copy the javascript to your computer buffer:
javascript:(function()%7Bvar showBreadcrumbs %3D function() %7Bvar items %3D document.getElementById('pthbcUlScroll').getElementsByTagName('li')%3Bvar str %3D %5B%5D%3Bfor (var i %3D 1%3B i < items.length%3B i%2B%3D2) %7Bstr.push(items%5Bi%5D.innerText)%3B%7Dvar p %3D document.getElementById('breadCrumbs')%3Bif (p %3D%3D%3D null) %7Bp %3D document.createElement('div')%3Bp.id %3D 'breadCrumbs'%3Bp.setAttribute('style'%2C 'background-color%3A %23ccc%3B margin%3A 10px')%3Bdocument.body.insertBefore(p%2C document.body.firstChild)%3B%7Dp.innerText %3D str.join(' > ')%3B%7D%3Bvar hideBreadcrumbs %3D function() %7Bvar p %3D document.getElementById('breadCrumbs')%3Bif (p!%3D%3D null) %7Bp.parentNode.removeChild(p)%3B%7D%7D%3Bnew MutationObserver(function(mutations) %7Bmutations.some(function(mutation) %7Bif (mutation.type %3D%3D%3D 'attributes' %26%26 mutation.attributeName %3D%3D%3D 'src') %7BhideBreadcrumbs()%3Breturn true%3B%7Dreturn false%3B%7D)%3B%7D).observe(document.body%2C %7Battributes%3A true%2CattributeFilter%3A %5B'src'%5D%2CattributeOldValue%3A true%2CcharacterData%3A false%2CcharacterDataOldValue%3A false%2CchildList%3A false%2Csubtree%3A true%7D)%3BshowBreadcrumbs()%7D)()
Step 5: Right-click the new bookmark, then click Edit.
Step 6: Paste the javascript text into the URL field.
Step 7: Click Save.
Use the Breadcrumbs bookmark
Step 1: Navigate to the desired page in CHRS.
Step 2: Click the Breadcrumbs bookmark.
Chrome displays the full navigation path for the current CHRS page between the Bookmarks bar and the PeopleSoft toolbar.
End of Article
0 Comments
Add your comment