Image-button widget

The image-button widget is an image that is a button.

Properties

This widget inherits the properties of Button widget. It also has the following properties:

Property

Description

Data type

context

See Context properties.

string (JSON)

event

Name of event that fires when a user clicks the button.

string

icon

The following icon settings:

  • name: Name of the icon, which adds a value to the class HTML attribute for the icon, which can be referenced by CSS.

  • align: Sets the horizontal alignment of the text. Supported values are: top|center.

  • position: Sets the vertical alignment of the text. Supported values are: left|right.

string and enum

id

Unique identifier of this widget.

string

size

small|large  

This property is optional. (Default is small.)

enum

style

Optional property defining image button style, which is one of: block | inline | outline | outline-block. Default value is block.

  • block: Button occupies the entire width. For example, if an item has multiple buttons, then each button occupies the entire width of the row, and the buttons are not displayed side by side.

  • inline Button occupies the minimum required width. Multiple buttons are displayed side by side, if space permits.

  • outline Button occupies the minimum required width. Multiple buttons are displayed side by side, if space permits. Button is displayed as a border only with blank fill.

  • outline-block: Button occupies the entire width. Button is displayed as a border only with blank fill.For example, if an item has multiple buttons, then each button occupies the entire width of the row, and the buttons are not displayed side by side.

enum

text

Text displayed on the button.

string

title

Title displayed on the button.

string
type Rich-media type, which is always ImageButton. string

Context properties

Context property

Description

Data type

color

Accepts either:

  • one of the following values: primary|secondary|success|danger|warning| info|light|dark|link

  • a JSON string, where primary and secondary colors are specified with the color context property as a hex color code

either enum or string (JSON with hex color code)

textColor

The text color, as a hex color code.

string (hex color code)

titleColor

The label color, as a hex color code.

string (hex color code)

Code samples

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "ImageButton",
                    "id": "button0",
                    "context": {
                        "color": "primary",
                        "textAlign": "left",
                        "titleColor": "#0000ff"
                    },
                    "style": "outline-block",
                    "text": "Wait time 4 min",
                    "title": "CHAT",
                    "event": {
                        "name": "onlogin"
                    },
                    "icon": {
                        "name": "icono-commentEmpty",
                        "align": "top"
                    }
                },
                "1": {
                    "type": "ImageButton",
                    "id": "button1",
                    "context": "secondary",
                    "style": "outline-block",
                    "text": " ",
                    "icon": {
                        "name": "icono-commentEmpty",
                        "align": "center"
                    }
                },
                "2": {
                    "type": "ImageButton",
                    "id": "button0",
                    "context": {
                        "color": "primary",
                        "textAlign": "center",
                        "titleColor": "#0000ff"
                    },
                    "style": "outline-block",
                    "text": "Wait time 4 min",
                    "title": "CHAT",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "3": {
                    "type": "ImageButton",
                    "id": "button0",
                    "context": {
                        "color": "primary",
                        "textAlign": "center",
                        "titleColor": "#0000ff"
                    },
                    "style": "outline-block",
                    "text": "Wait time 4 min",
                    "event": {
                        "name": "onlogin"
                    },
                    "icon": {
                        "name": "icono-commentEmpty",
                        "align": "center"
                    }
                },
                "4": {
                    "type": "ImageButton",
                    "id": "button20",
                    "context": {
                        "color": "primary",
                        "textAlign": "center",
                        "titleColor": "#0000ff"
                    },
                    "style": "outline-block",
                    "text": "Wait time 4 min",
                    "event": {
                        "name": "onlogin"
                    },
                    "icon": {
                        "name": "icono-commentEmpty",
                        "align": "center",
                        "position": "right"
                    }
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": [{
                        "type": "ImageButton",
                        "id": "button0",
                        "context": {
                            "color": "primary",
                            "textAlign": "left",
                            "titleColor": "#0000ff"
                        },
                        "text": "Wait time 4 min",
                        "title": "CHAT",
                        "event": {
                            "name": "onlogin"
                        },
                        "icon": {
                            "name": "icono-commentEmpty",
                            "align": "top"
                        }
                    }, {
                        "type": "ImageButton",
                        "id": "button1",
                        "context": "secondary",
                        "icon": {
                            "name": "icono-commentEmpty"
                        }
                    }, {
                        "type": "ImageButton",
                        "id": "button0",
                        "context": {
                            "color": "primary",
                            "textAlign": "center",
                            "titleColor": "#0000ff"
                        },
                        "title": "CHAT",
                        "event": {
                            "name": "onlogin"
                        }
                    }
                ]
            }
        }
    ]
}