Skip to content

How to use Breadcrumbs

o5faruk edited this page May 2, 2021 · 19 revisions

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/breadcrumbs/

⚠️⚠️⚠️

Breadcrumbs

Breadcrumbs keep track of user navigation between different plugins and sections within a plugin.

You can add to breadcrumbs inside your plugin to give the user the ability to navigate back to any breadcrumb you added.

breadcrumbs


How to use Breadcrumbs

Pushing to Breadcrumbs:

Whenever you drill down a level in your plugin and wish to reflect this in the breadcrumb simply use push to add to the breadcrumb history

buildfire.history.push([label],[options obj]);

arguments:

  • [label]: The label for the breadcrumb

  • [options obj]: Options object where you can pass in data that is needed to take the user back to the view when breadcrumb is clicked (optional). When the property showLabelInTitlebar is set true in the options object it will cause the label to displayed in the app title bar instead of the plugin title.

example:

buildfire.history.push('2014 Top 10', { elementToShow: '#2014Top10' });


Popping Breadcrumbs:

Whenever you would want to go back one level in your own plugin breadcrumbs and wish to reflect this in the breadcrumb simply use pop to pop the latest breadcrumb in breadcrumb history.

Note that you can only pop breadcrumbs added by your plugin.

buildfire.history.pop();

example:

buildfire.history.pop();


Retrieving Breadcrumbs:

To be able to retrieve the breadcrumbs list use 'get'.

buildfire.history.get([options], [callback]);

arguments:

  • [options]: An options object where you can set the following (Optional):
    • pluginBreadcrumbsOnly: To filter out your plugin breadcrumbs from other breadcrumbs. Default false
  • [callback]: The callback function that is called when breadcrumbs list is retrieved. function function(err, result){} receives two parameters; the err if there is any and the result that holds the result of the operation requested.

example:

buildfire.history.get({
    pluginBreadcrumbsOnly: true
},function(err, result){
    console.info('Current Plugin Breadcrumbs', result);
});

Handling Breadcrumb Pops:

When the user clicks on the breadcrumb, that would cause the breadcrumb to pop along with any subsequent breadcrumb.

You should capture that event using the onPop function:

buildfire.history.onPop([callback],[allowMultipleHandlers]);

arguments:

  • [callback]: Your callback function to call passing the new active breadcrumb object after the pop operation.
  • [allowMultipleHandlers]: optional bool param that tells the method to override all other handlers. Default false

example:

buildfire.history.onPop(function(breadcrumb) {
	// Show / Hide views
	document.getElementById(breadcrumb.options.elementToShow).style.display = "block";
});

Clone this wiki locally