Applies the desired event in the form. In Xpoda, it works with action type and different actions when clicked. Apart from the description text, you can add an icon to the button.
‘’Button’’ icon at Toolbox
How it looks like on the Canvas
Compatibility
| Free Form | Responsive Form | Mobile |
Properties
Properties of the form tool:
-
Text: Text of the control will be written here.
- Linked List: Adds the button to the selected list.
-
Text Size: Sets the size of the control.
-
Help Text: It is the text that is entered for comment when the mouse is placed on the Button control. To display the text in the right bottom corner of the mouse when go on the Button, you can write in the Help Text area.
-
Icon: Select the icon, color, and position to be added to the Button control.
-
Picture: It allows define an image.
-
Text Fonts: Allows you to change the font.
-
Text Type: Adjust the type of text like bold, italic, underlined, and replaces the text as right-aligned, left-aligned, or centered.
-
Color: Edits the color of inside the control and/or the text inside the control.
-
Border: Sets border-radius for Button control.
-
Height / Width: Adjusts the height and width of the control (The width field has been removed from Responsive Forms).
-
From Left / Top: Adjusts the distance of the control from the left and top (This field has been removed from responsive forms).
-
Fit Horizontal: Fits the control to the full screen on the user’s screen.
-
Pin Right: Pins the button control to the right.
-
Display: Makes the Button control not appear on the screen. If the Display area is chosen as No, it makes Button not seem on the client screen. Otherwise, the opposite happens.
Actions
-
When clicked: Assign an “Action” as a click handler. For more information please click here.
Examples Used
To edit the control’s properties, go to the Property Panel which is located on the right. To change on it, write your text in the ''Text'' area, for instance; you can write “Save”. To add an icon to button control, you can choose from the Icon area for instance you can choose to save icon. (After searching and selecting the icon in the search bar of the icon area, you must delete the text in the search bar.)
Client view on screen
If you want to change the color of this button, for example; you can choose its text color as white and its background color as green.
Client view on screen
You can use the Border area to curve the corners of the button, it is written “ 40 ” in the Border area for this example.
Client view on screen
If you want to add a picture instead of an icon, you can enter a URL of an image resource for this from the Picture area. For example; you can write “https://cdn.iconicons.com/icons2/54/PNG/64/floppydisk__10910.png “, that is the URL of an image resource in the area.
Client view on screen