Breadcrumb Component
The Breadcrumb component provides a lightweight global UI component that includes the following features:
- A JavaScript functions that appends or removes a breadcrumb item.
- An ability to display removable filtering criteria.
The Breadcrumb component is available in Versions 6.2 and later of Zuora Quotes.
The Breadcrumb component consists of the following:
- Breadcrumb.component: The Visualforce component to be embedded on your Visualforce page
Breadcrumb component attribute
The Breadcrumb component accepts the following attribute.
Attribute
|
Type
|
Required?
|
Description
|
---|---|---|---|
name | String | Yes |
Name of the breadcrumb. Used to uniquely identify the breadcrumbn on the Visualforce page. |
Breadcrumb support functions
The Breadcrumb component supports the following Javascript functions.
Function | Description |
---|---|
appendBreadcrumb (id, value) |
Appends a new Breadcrumb item with the given unique id . The value parameter is the value displayed as the breadcrumb. |
removeBreadcrumb (id) |
Removes a Breadcrumb item identified by the id parameter. |
Subscribe to the "Item Deleted" event
The Breadcrumb component follows the Publish-Subscribe pattern so that you can write your own "Subscriber" to the Topic.BREADCRUMB_ITEM_DELETED
when the user deletes an item in the Breadcrumb component.
pubsubz.subscribe(Topic.BREADCRUMB_ITEM_DELETED, function (topics, data) { // Implement what to do on the delete event });
Sample code
The following Visualforce page code contains a Breadcrumb component instance and buttons to interact with the component.
<apex:page showHeader="true" sidebar="true" title="Testing Breadcrumb"> <zqu:Breadcrumb name="myTest" /> <zqu:Breadcrumb name="mySecondTest" /> <form> <p> <input type="button" id="btn-add-1" value="Add to first breadcrumb" /> <input type="button" id="btn-add-2" value="Add to second breadcrumb" /> </p> <p> <input type="button" id="btn-save" value="Save to LocalStorage" /> <input type="button" id="btn-restore" value="Restore from LocalStorage" /> </p> </form> <div id="deleted"></div> <script type="text/javascript"> (function (window, document) { var btnFirstAdd = document.getElementById('btn-add-1'); var btnSecondAdd = document.getElementById('btn-add-2'); var areaDeleted = document.getElementById('deleted'); var btnSave = document.getElementById('btn-save'); var btnRestore = document.getElementById('btn-restore'); // Used to generate a random string function makeId(length) { var text = ''; var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (var i = 0; i < length; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); } return text; } // Called when one of the buttons are clicked function addToBreadcrumb(breadcrumbName) { var timeAdded = new Date(); var text = 'Added at ' + timeAdded.getSeconds() + '"' + timeAdded.getMilliseconds(); (if (breadcrumbName == "myTest") window.breadcrumbs.myTest.append(makeId(15), text, breadcrumbName); else window.breadcrumbs.mySecondTest.append(makeId(15), text); } // Print the received data function toString(data) { var tmp = []; for (var prop in data) { if (data.hasOwnProperty(prop)) tmp.push(prop + ': ' + data[prop]); } return '{ ' + tmp.join('; ') + ' }'; } // Add the event listener to the button btnFirstAdd.addEventListener('click', function () { addToBreadcrumb('myTest'); }, false); btnSecondAdd.addEventListener('click', function () { addToBreadcrumb('mySecondTest') }, false); // Subscribe to the deletion event pubsubz.subscribe(Topic.BREADCRUMB_ITEM_DELETED, function (topics, data) { areaDeleted.innerHTML += 'Deleted: ' + toString(data) + '<br/>'; }); btnSave.addEventListener('click', function (e) { e.preventDefault(); window.breadcrumbs.myTest.save(); }); btnRestore.addEventListener('click', function (e) { e.preventDefault(); window.breadcrumbs.myTest.restore(); }); }(this, this.document)); </script> </apex:page>