IconHyperlinkButton

Version: 9.0

An IconHyperlinkButton control is a hyperlink with an icon. SPEAK always displays the icon to the left of the text, and users can click both the icon and the text.

You can use an IconHyperlinkButton control in two different ways:

  • You can specify the URL of a resource, and users can navigate to this resource by clicking the button. You use the NavigateUrl property for this.

  • You can specify the JavaScript code that SPEAK executes when a user clicks the button. You use the Click property for this.

The NavigateUrl property takes precedence over the Click property. If the NavigateUrl property has a value, the IconHyperlinkButton control does not execute the JavaScript specified in the Click property.

You specify an icon to use in the ImageUrl property. You can use the same icons here as, for example, when you select an icon for an item in the content tree.

A IconHyperlinkButton control supports defining the icon as a “sprite” selected from a sprite sheet. The ImageUrl property stores the URL of the sprite sheet, and the BackgroundPosition property stores the coordinates of the desired sprite (icon/image).

Properties

Name

Description

Default

Appearance

BackgroundPosition

Indicates the offset of the sprite/icon/image in a sprite sheet file. The value must have the following format:

-<x>px -<y>px

Where <x> indicates the horizontal number of pixels from the left edge of the sprite sheet to the left edge of the sprite (represented as a negative number), and <y> indicates the vertical number of pixels from the top edge of the sprite sheet (represented as a negative number) to the top edge of the sprite.

-0px -0px

ImageUrl

The Sitecore path of the icon (for example, Network/16x16/home.png for the icon shown for the /sitecore/content/home item) or sprite sheet. SPEAK provides a number of sprite sheets in the img folder, \sitecore\shell\client\Speak\Assets\img (found in the Website folder).

Text

Specify the text you want displayed on the IconHyperlinkButton control. You can enter a static text, set the text from page code, or you can bind to a property of another control.

Behavior

NavigateUrl

Specify a resource that the page should navigate to when the button is clicked.

You can specify a Sitecore path to an item, for example: /sitecore/client/sitecore/applications/sample/pages/about to navigate to another page in your application.

You can also specify a URL to a web resource, for example: http://www.sitecore.net.

Target

Specify a text string that the button renders as an HTML “target” attribute. SPEAK does not validate the string: it renders it as is. This property is ignored when the NavigateUrl property is not set, and it does not have any effect for JavaScript in the Click property.

Events

Click

Specify the JavaScript that is executed when a user clicks the button.

Configuration

You can create a configuration item for an IconHyperlinkButton control by creating an item based on the IconHyperlinkButton Parameters template.

The configuration item has these specific fields:

  • Text

  • ImageUrl

  • BackgroundPosition

  • NavigateUrl

  • Target

It inherits these fields:

  • Click

  • IsEnabled

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id

Do you have some feedback for us?

If you have suggestions for improving this article,