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 name | Property type | Description |
|---|---|---|
name* | string | A unique value that is used to generate unique IDs for the HTML structure that represents the button. |
onClick* | function | Defines what should happen when a user clicks the button. |
text | string or function | The label (name) of the button, as displayed on the user interface. |
tooltip | string or function | The text displayed if you point to the button. |
icon | string | The full URL of an icon that will be used for the button. You can get a full URL by using the UrlService from SDK. |
isEnabled | boolean or function | Defines whether the button is enabled or not. |
subOptions | array | Specifies 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 name | Property type | Description |
|---|---|---|
name* | string | A unique value that is used to generate unique IDs for the HTML structure that represents the group of buttons. |
text | string or function | The label (name) of the group of buttons, as displayed on the user interface. |
buttons | array | Specifies a list of button definitions. Each entry in the array should be an object that complies with the wsribbonbutton properties. |