Breadcrumbs

The Breadcrumbs control is a control that allows a "trail of breadcrumbs" to be displayed to the user to navigate back to previously completed steps. The Breadcrumb control by default assumes that entries will be of type NameValuePair (Name and Value are both specified as type String). If a data binding is applied to the control it must be of type NameValuePair. Alternatively, if the control is left unbound, the output data will take on the type ANY (loose data type).

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

Events

With the Breadcrumbs control, there are 2 types of event handlers:

• On Load When the control is loaded

• A typical use of On Load might be to load an initial breadcrumb using me.appendItem()

• On Item Click When the control is clicked

• This event is passed the label of the level clicked (a string) and the Item object
• The item object contains 3 properties:
• { label: this items label,
  level: an integer representing the position of the item in the breadcrumb object (relative to 1),
  data: any data that was set when the object was appended }
• NOTE: when an entry is clicked all the following entries will be deleted from the breadcrumb trail.

More information on using these controls can be found in the Event Handling article.

Example

This example uses the breadcrumbs to keep track of a series of images. Initially, the Initial Entry Image is displayed.

The image initially being show is done within the On Load event of the Breadcrumbs object as shown here:

The Add an Image button uses the append method of the Breadcrumbs control to add a new entry into the breadcrumbs trail. The appended image is selected from the Single Select control labeled Image in this example. The following is the logic within the On Click event of the Add an Image button:

Note, when an item is appended, the selected item’s text is used as the label, and the value is used as the returned data.

In addition to appending the breadcrumb to the breadcrumb trail, the image is switched to the selected image using the Image Control’s .setImage() method.  The following shows what the Breadcrumbs would look like after adding 2 more entries:

Recall that the breadcrumb entries themselves are “clickable”.  Clicking on an entry will trigger the On Item Click event.  By clicking on the Breadcrumbs5 entry (see above image) following will result:

Note, the entries after the clicked item Breadcrumbs5 are now removed, and the image is set to the Image that was set in the data of Breadcrumbs5.

Methods

For detailed information on the available methods for this control, access the JS Doc file.