UI Component Reference: Password Field
‘Masked’ text input, for entering passwords or other sensitive data. To create using EA, add a Text Field component and then give it a stereotype of <<WireframePassword>>
. Using MagicDraw, either do the same or add a Password Field component. In either case, if the linked domain attribute is called ‘password’, the component will automatically be a PasswordField.
Which wireframe component?
Depending which modeling tool you’re using, add the following component from the palette into the wireframe:
Tool | Wireframe component(s) |
---|---|
Enterprise Architect | Text Field |
Magic Draw | Password Field, Text Field |
Capabilities
Notes | |
---|---|
Single value input | The component allows a single value to be input. |
Domain data | The component can be linked to a domain class, via the domain tag or a dependency arrow. The component will show data loaded from the domain class’ relevant API endpoint. |
Bind target | Other components can listen and react to this component’s’ UI events, via their bind tag or a dependency arrow pointing to this component. |
Tagged values
Tag | Allowed values | Notes |
---|---|---|
domain | 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. | |
display domain | Specifies which domain class attribute to display. For cases where the display attribute/relationship is different from the ‘data’ domain attribute/relationship. | |
form domain | 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. | |
filter | Define a single-line predicate (valid TypeScript expression that evaluates to a boolean) to filter a UI list. | |
placeholder | For text input, the ‘placeholder’ text to display when the textfield is empty. | |
css class | 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 h1 , h2 etc; their defined behaviour will be carried over to any future UI platforms that CodeBot generates. |
variant css class | ||
cell css class | ||
default value or: default | ||
variant or: appearance | 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”). |
Tagged values for all model elements including UI component types