Documentation Center

Available controls

The customization SDK contains several UI controls that you can inject as require dependencies. These controls are located in the sdk/controls/<control-name> namespace.

wsribbonbutton

Use this control to create a button similar to the ones on the ribbon of the Projects or Tasks page.

To add a new ribbon button, use the following piece of HTML code:
<wsribbonbutton params="isEnabled: button.isEnabled,
                        onClick: button.onClick,
                        tooltip: button.tooltip,
                        text: button.text,
                        cssClass: button.cssClass,
                        subOptions: button.subOptions,
                        name: button.name,
                        icon: button.icon">
</wsribbonbutton>
The following table presents a list of properties supported by this control. The properties marked with an asterisk (*) are required.
Property nameProperty typeDescription
name*stringA unique value that is used to generate unique IDs for the HTML structure that represents the button.
onClick*functionDefines what should happen when a user clicks the button.
textstring or functionThe label (name) of the button, as displayed on the user interface.
tooltipstring or functionThe text displayed if you point to the button.
iconstringThe full URL of an icon that will be used for the button. You can get a full URL by using the UrlService from SDK.
isEnabledboolean or functionDefines whether the button is enabled or not.
subOptionsarraySpecifies a list of sub-option definitions. By using this property, the button becomes a drop-down button. Each entry in the array should be an object that complies with the wsribbonbutton properties, except for subOptions. Only a single level of sub-buttons is supported.

wsribbonbuttongroup

When you add a ribbon button, you might also want to place it in the same group as other custom buttons. Use this control to create a group of ribbon buttons.

To add a new group of ribbon buttons, use the following piece of HTML code:
<wsribbonbuttongroup params="text: ribbonGroup.text,
                             name: ribbonGroup.name,
                             buttons: ribbonGroup.buttons">
</wsribbonbuttongroup>
The following table presents a list of properties supported by this control. The properties marked with an asterisk (*) are required.
Property nameProperty typeDescription
name*stringA unique value that is used to generate unique IDs for the HTML structure that represents the group of buttons.
textstring or functionThe label (name) of the group of buttons, as displayed on the user interface.
buttonsarraySpecifies a list of button definitions. Each entry in the array should be an object that complies with the wsribbonbutton properties.