Button Widget (Themable)
Watch the following video on how to add the widget to a mashup and bind it to a data service. To open the video in a new tab, click the title on the player.
The Button widget enables you to add a button in a mashup and raise an event when it is clicked.
 |
The Button widget is available as a standard widget in the platform and as a web component that can be imported from an SDK.
|
The properties of the Button widget are listed below:
|
Property Name
|
Description
|
Base Type
|
Default Value
|
Bindable? (Y/N)
|
Localizable? (Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
Icon
|
Enables you to set an icon image in the button widget.
|
n/a
|
n/a
|
N
|
N
|
||
|
Label
|
The text that is displayed in the label of button widget
|
STRING
|
Button
|
Y
|
Y
|
||
|
Disabled
|
Use this property to disable the widget in the mashup. The widget is displayed in the mashup but you cannot click it.
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
CustomClass
|
Enables you to define the CSS to the top div of the widget. Multiple classes can be entered, separated by space.
|
STRING
|
n/a
|
Y
|
N
|
||
|
ContextID
|
Enables you to set an ID for the widget.
|
STRING
|
n/a
|
Y
|
N
|
||
|
LabelAlignment
|
Enables you to align the label in the widget to the left, right or center.
|
STRING
|
Center
|
N
|
N
|
||
|
MaxWidth
|
Enables you to set a maximum width for the button widget.
The button label is truncated if it is longer than the maximum width.
|
NUMBER
|
n/a
|
N
|
N
|
||
|
MaxHeight
|
Sets the maximum height for the button when the MultiLine property is set to True.
|
NUMBER
|
n/a
|
Y
|
N
|
||
|
MultiLine
|
Sets the label text to continue onto another line.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
SVGIcon
|
Enables you to select an SVG icon to display within the Button widget. To display a media entity, use the standard Icon property.
|
MEDIA ENTITY
|
n/a
|
N
|
N
|
||
|
ButtonType
|
Enables you to set a button type.
The button types are Primary, Secondary, Tertiary, Danger and Transparent. Each button type has different styling.
|
STRING
|
Primary
|
Y
|
N
|
||
|
TabSequence
|
The sequence in which widgets are highlighted when a user presses TAB.
|
NUMBER
|
n/a
|
N
|
N
|
||
|
Clicked
|
Triggers an event when the button widget is clicked.
|
n/a
|
n/a
|
Y
|
N
|
||
|
TriggerClick
|
A bindable service that triggers the button click.
|
n/a
|
n/a
|
Y
|
N
|
||
|
Width
|
The width of the widget. The width is set to the width of the label by default. Enter a value in the property panel or resize the widget in the canvas to set a fixed width.
|
NUMBER
|
n/a
|
N
|
N
|
||
|
Height
|
The height of the widget. The height is set to the maximum width of the label by default. Enter a value in the property panel or resize the widget in the canvas to set a fixed height.
|
NUMBER
|
n/a
|
N
|
N
|
||
|
TooltipField
|
Sets a tooltip text that is displayed when you hover over the widget.
|
STRING
|
n/a
|
Y
|
Y
|
||
|
TooltipIcon
|
Sets an icon image for the tooltip of the widget.
You can add an image or specify an image URL path.
|
MEDIA ENTITY
|
n/a
|
N
|
N
|