CHRS Knowledge Base

Create Breadcrumbs Bookmark

Updated on

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.

Constructing the Modify a Person navigation path from the screenshot requires reading three different areas

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:

Breadcrumb path to Modify a Person

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.

Modify a Person - Google Chrome

Step 1: In Chrome, click the three dots, then select Settings.

Modify a Person - Google Chrome

Step 2: Type "bookmarks" in the search field

Settings - Google Chrome

Step 3: Scroll down to find the Show Bookmarks bar setting in the Appearance menu.

Settings - Google Chrome

Create the Breadcrumbs bookmark

Step 1: In Chrome, click the Star button in the Address Bar to create a new bookmark.

Star button in Chrome Address bar

Step 2: Edit the name of this bookmark. In this example, it is "Breadcrumbs."

Edit Bookmark window. Name is Breadcrumbs

Step 3: Click Done.

Settings - Google Chrome

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.

Breadcrumbs context menu. Edit is highlighted

Step 6: Paste the javascript text into the URL field.

Edit bookmark window, URL with pasted javascript

Step 7:  Click Save.

Save button

Use the Breadcrumbs bookmark

Step 1: Navigate to the desired page in CHRS.

Navigation to Modify a Person

Step 2: Click the Breadcrumbs bookmark.

Breadcrumbs bookmark

Chrome displays the full navigation path for the current CHRS page between the Bookmarks bar and the PeopleSoft toolbar.

Breadcrumb path to Modify a Person

End of Article

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article (job aid) Work with Favorites
Next Article (job aid) JobSet Schedule - Campus Facing
Do you need an article? Contact Us