Skip to main content

Breadcrumb Component

Zuora

Breadcrumb Component

  1. Last updated
  2. Save as PDF

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.

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>