A link can initiate navigation to an external URL, or a transition to a different page (similar to a button navigation action).
Depending which modeling tool you’re using, add the following component from the palette into the wireframe:
|Navigation action||The component can trigger a “direct” navigation transition, from a UI event such as |
This is different from a “subsequent” navigation after, say,
|Displays a single text value||The component can display an individual text value, which can be derived from a bound UI event (e.g. table row selection).|
|Domain data||The component can be linked to a domain class, via the |
|Reactive||The component can listen to UI events triggered by another component, via the |
|Bind target||Other components can listen and react to this component’s’ UI events, via their |
| ||Makes this UI Element listen to another UI element for events (e.g. row item selected), via a Redux UI global state selector. |
This tag is the same as connecting the elements with a Dependency arrow. However, you can use this tag, for example, if the other UI element is on a different wireframe.
The following component types can be ‘state-bound’ (i.e. listen to another UI Element via the bind tag or dependency arrow):
Button, Checkbox, ComboBox, Link, ListBox, MapPicker, MediaPlayer, PasswordField, RangeInput, Table, TextArea, TextField
| ||Links a component to a domain class, and optionally an attribute. |
Depending on the component, it will then use the domain data in some way, e.g. to populate a table or listbox with domain data for selection.
The linked data will be loaded via the domain class’ matching REST API endpoint, with loading state managed in the UI via a Redux domain selector.
Please note: This tag is the same as connecting the element to a domain class with a Dependency arrow.
| ||Specifies which domain class attribute to display. For cases where the display attribute/relationship is different from the ‘data’ domain attribute/relationship.|
| ||For Domain Chooser UI Elements (listbox, ComboBox), where the form attribute/relationship is different from the ‘data’ domain attribute/relationship, as two domain classes are involved.|
| ||Define a single-line predicate (valid TypeScript expression that evaluates to a boolean) to filter a UI list.|
|DEFAULT: the UI element name||Text to display, if not using the component name. |
For EA wireframes the element name is normally used; however this tag will override that if the name needs to be different, e.g. to avoid duplicate element names, or if the text won’t map well to variable names etc.
| ||DEFAULT: no||If true (or yes), the input element can’t be edited; updates are only via a bound element such as a ComboBox.|
| ||Must be one of: create, replace, update, delete, get many, find, find one, login, register, logout, task, task, form task||With a form button, this tag defines the type of action that will take place when the button is clicked - essentially, which REST API endpoint to call; e.g. ‘create’.|
| ||Lets you override the message displayed when an ‘action’ completes successfully, e.g. on form create. Use the text ‘none’ to prevent any message being shown (‘none’ is required as EA will interpret a blank tagged value as absent, i.e. won’t export it).|
| ||Custom user-facing error message to display if the REST API returned an error. Use ‘none’ to prevent the message being shown at all.|
| ||Must be one of: create, replace, update, delete, get many, find, find one, login, register, logout, task, task, form task||For a ‘task’ action, pinpoints the domain class and Operation that the action should invoke - e.g. Game.upgradePlayer|
| ||Any CSS class name, without a preceding ||Adds the specified CSS class (or classes) to the UI element. If you define a class in a custom CSS file, you can apply it to a component using this tag. CodeBot will also recognise any ‘standard’ Bootstrap CSS classes such as |
|Must be one of: primary, secondary, success, danger, warning, info, light, dark, link||Changes a UI Element’s appearance. The allowed values are based on Bootstrap’s variant CSS classes. |
For React Labels, this will turn the label into an “Alert” component, with a background and text colour matching the variant. Useful for callouts, notes and static warnings (“Clicking OK will delete all your data”).