Button | X4Documentation

<Button> controls can be used to create buttons to trigger an action or to navigate a Web App. The buttons can be placed freely in the Web App.

Instructions for use

A <Button> control is created with the <Button> element.

<Button>
...
</Button>

<Button> controls can be used in all available layout types: For more information, see Layouts.

Attribute

You can define the following attributes for <Button> controls.

Note:

All other attributes for the buttons are defined in the respective action.
In Form Components, the <Button> element serves only as a container for the action <CustomAction>. Here, you specify all attributes exclusively via the <CustomAction> element.

Attribute	Description
`disabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: `true`/`false` Expression for data binding Note: The `disabled` attribute is obsolete and will no longer be available in the future. The deprecated attribute is replaced by `enabled`. `enabled="true"` corresponds to the obsolete `disabled="false"` attribute.
`enabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: `true`/`false` Expression for data binding
`horizontalAlign`	The direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`textOverflow`	Specifies what should happen when the control is full. Possible values: `ellipsis` (default): Use `...` to show that the text is not finished `hidden` : Cancels the text, whole words are observed. `wordBreak` : Cancels the text within the word. `allow`: Wraps the text between the words.
`visible`	Defines if the control is visible. Data binding (Boolean) is possible Possible values: `true` / `false` String for data binding

Actions

If you always want an action button to appear at the top of the component's content, create a button with Actions.

The <Button> element can contain the following elements:

<CustomAction/>
<DeleteAction/>
<DownloadAction/>
<ForgotPasswordAction/>
<LoginAction/>
<LogoutAction/>
<NewAction/>
<ReloadAction/>
<SaveAction/>
<SaveViewAction/>
<UploadAction/>

Note:

In a Form Component, you can only use the <CustomAction> action.

Example

Button control in the Detail Component

XML

<DetailComponent>
	<FlowLayout>
		<Button><SaveAction displayName="Save changes" iconPosition="right" background="A700"></SaveAction></Button>
	</FlowLayout>
</DetailComponent>