Skip to main content
Version: 4.5.0

Button

A button is a graphical control element that provides the user a simple way to trigger an event, like searching for a query, or to interact with dialog boxes, like confirming an action.

Clicking on an AWE button launches the list of attached actions (button actions) which are called sequentially.

Button
Buttons

When the screen size is too small (mobile devices) the buttons defined on the buttons source of the screen are moved to the lower side:

Botones_movil

XML skeleton

<button id="[button-identifier]" button-type="[button-type]" label="[button-label]" icon="[button-icon]" 
style="[button-style]" size="[button-size]">
<button-action... />
<dependency... />
</button>

Button structure

ElementUseMultiples instancesDescription
buttonRequiredNoGlobal node of the button. Defines the button attributes
button-actionOptionalYesList of actions to be launched on button click
dependencyOptionalYesList of dependencies attached to the button

Button attributes

AttributeUseTypeDescriptionValues
idOptionalStringButton identifier. For reference purposes
labelOptionalStringButton textNote: You can use i18n files (locales)
styleOptionalStringButton CSS classes
iconOptionalStringIcon identifierNote: You can check all iconset at FontAwesome
button-typeOptionalStringButton default behaviourbutton (default), submit or reset. See button types
sizeOptionalStringCriterion sizesm (default), md or lg.
valueOptionalStringFor setting one string value for button
help-textOptionalStringHelp text to show in button as helpNote: You can use i18n files (locales)
help-imageOptionalStringUrl image to show in button as helpNote: You can use i18n files (locales)

Button types

TypeDescriptionImage
buttonStandard button. Does nothing if there are no button actions attachedButton
submitSubmit button. Is called when a user presses INTRO inside a criterionSubmit
resetReset button. If clicked launches a reset actionReset

Button events

EventDescription
clickLaunched when an user clicks the button

Button actions

Inside a button, you can define a list of button actions, which are actions that will be launched when the user pushes the button. The order of the button actions are defined is the same as they will be launched.

See the actions section for more details about actions.

Examples

Standard button with actions and dependencies (delete row in grid)

Button is disabled until at least one element is selected on the grid.

<button label="BUTTON_DELETE" icon="trash" id="ButDel">
<button-action type="check-some-selected" target="Grd..."/>
<button-action type="confirm" target="DelMsg" />
<button-action type="server" server-action="maintain" target-action="...Del"/>
<button-action type="filter" target="Grd..."/>
<dependency target-type="disable" initial="true">
<dependency-element id="Grd..." condition="&lt;" value="1"/>
</dependency>
</button>

Button launched on click event

Same case as before, but activated with a dependency (and maybe with other element conditions)

<button label="BUTTON_DELETE" icon="trash" id="ButDel">
<dependency target-type="disable" initial="true">
<dependency-element id="Grd..." condition="&lt;" value="1"/>
</dependency>
<dependency initial="true">
<dependency-element id="ButDel" event="click"/>
<dependency-element .../>
<dependency-action type="check-some-selected" target="Grd..."/>
<dependency-action type="confirm" target="DelMsg" />
<dependency-action type="server" server-action="maintain" target-action="...Del"/>
<dependency-action type="filter" target="Grd..."/>
</dependency>
</button>