Configuring the Button Widget

To configure the Button Widget, follow these steps:

1. Add the Button Widget: Drag and drop the Button Widget icon from the toolbox onto the design panel. You can also use the search function within the toolbox if needed. Adjust the widget’s dimensions to meet your requirements.

2. View Properties: Click on the Properties button in the configuration panel’s property pane to visualize the Button Widget’s settings.

Basic Configuration

Tooltip

• Add a Tooltip: In the Basic settings, enhance the Button Widget by adding a tooltip, which is brief content displayed when the user hovers over the widget. There are no restrictions on the text length.

Border

• Enable Border: Activate the Border option in the Properties panel to frame the Button Widget. Customize the border’s color, thickness, and style. The default style is “Solid,” but it can be changed to “Dotted” or “Dashed.”

Text

• Text Settings: Modify the text appearance within the Button Widget.
  • Text Content: Customize the default text.

• Color and Font Size: Adjust the text color and font size.

• Alignment: Set the Horizontal and Vertical Alignment for the text. Both alignments are centered by default but can be changed to left or right.

• Padding: Adjust the padding around the text (Top, Bottom, Right, and Left). All values are set to zero by default.

Icon Settings

Icon

• Add an Icon: The Icon option allows incorporation of an icon into the Button Widget. By default, this option is disabled.

• Icon Selection: Click the Icon dropdown for options like Right Arrow, Left Arrow, Undo, Redo, Help, and Information.

• Icon Customization: Change the icon’s color and size.

• Icon Placement: Set to “Custom” by default, allowing repositioning to left, right, above, or below the text.

• Icon Alignment: Fine-tune the icon’s position with Horizontal and Vertical Alignment settings available when set to “Custom.”

• Icon Padding: Adjust the Top, Bottom, Right, and Left padding for the icon, initially set to zero.

Enabling Background Color

To change the background color of a button widget:

1. Navigate to the Fill section of the properties panel.
2. Enable the Enable Background Color option.
3. Select a color using the Background Color option.
4. Adjust the transparency of the background color using the Transparency option in the same section.

Enabling Background Image

To set a background image for the button widget:

1. In the Fill section of the properties panel, enable the Enable Background Image option.

2. Choose the image type:

   • Local: Select an image from your local device by browsing for it.

• URL: Enter the image URL in the Background Image URL text box.

Based on the Image Type Option, background image will be applied to the button widget as below

Image Display Modes

The background image can be displayed in various modes, which can be selected in the Mode option within the Fill section:

1. Default: The image will be displayed in its original size.
2. Fill: The image will fill the available space of the button.
3. Uniform to Fill: The image will uniformly occupy the space but may be clipped if it exceeds the control’s dimensions.
4. Uniform: The image will resize proportionally (without clipping) to best fit the widget area.

Rotating the Background Image

Users can also rotate the background image according to their preference. The available rotation angles are:

• 0 degrees
• 90 degrees
• 180 degrees
• 270 degrees

By following these steps, users can effectively customize the appearance of button widgets to enhance their application’s user interface.

Link Settings

Link

• Configure Link: Associate a URL with the Button Widget for navigation upon clicking.

• URL: Enter the target URL.
• Mode: Select how the URL opens—options include New Tab, Same Page, Current Frame, Parent Frame, Pop Up, or New Window.

By adjusting these settings, the Button Widget can be tailored to effectively meet specific needs and enhance user experience.