Your suggested change has been received. Thank you.

close

Suggest A Change

https://thales.na.market.dpondemand.io/docs/dpod/services/kmo….

Thales Logo

All

  • All
back

User Agent Components

Frontend - Form Node

search

Please Note:

Frontend - Form Node

   
Description The Frontend - Form node displays a customizable form to the user. It allows collecting input data and triggering actions through buttons to proceed with the next steps of the flow.
Available in Authentication, Admin, Self Service, Consent, Library, Custom, User Defined
Node Name Frontend - Form

Form Structure

Form This component configuration allows building **dynamic user interfaces** by composing multiple UI components. Each component can be configured individually to control layout, behavior, and validation. Form is based on **Vuetify form** but it is possible to define your own **html code**. There is also a **Preview Form** button that allows previewing the form before execution. The top toolbar allows adding UI elements to the Vuetify form. Each component has its own configuration panel:
Input Text input field. Configurable properties include: ID, layout, label, hint, placeholder, value, trim, outlined, dense, required, regex, confirmation value, read-only, filled, prepend icon, clearable, primary colour.
Password Password field (masked input). Configurable properties include: ID, layout, label, hint, placeholder, value, trim, outlined, dense, required, regex, confirmation value, read-only, filled, prepend icon, clearable, primary colour.
Button Action button. Configurable properties include: ID, layout, label, primary colour. #### Associate a function when the button is clicked Allows defining **custom script** that is executed after clicking the button.
Select Dropdown selection. Configurable properties include: ID, layout, label, hint, placeholder, select values, outlined, dense, required, filled, prepend icon, clearable, primary colour.
Label Static text. Configurable properties include: ID, alignment, text content, font size, font style, default colour.
Checkbox Boolean input. Configurable properties include: ID, layout, label, alignment, font size, font style, default checkbox state, required (user must accept), primary colour.
Combobox Searchable dropdown. Configurable properties include: ID, layout, label, hint, placeholder, select values, default selection, chips, read-only, outlined, dense, required, multiple, filled, prepend icon, clearable, primary colour.
Image Display an image. Configurable properties include: ID, layout, image source, aspect ratio, width, height, max width, max height, avoid image clipping.
Loader Loading indicator. Configurable properties include: ID, layout, circular, indeterminate, value, size, position absolute, active, bottom, position fixed, buffer value, height, query, reverse, rounded, stream, striped, top, primary colour.
Textarea Multi-line input. Configurable properties include: ID, layout, label, hint, placeholder, value, auto-grow, read-only, outlined, dense, required, minimum rows, filled, prepend icon, clearable, primary colour.
Custom Custom HTML code — allows defining fully customized behavior and UI using HTML and Vue.js logic. Configurable properties include: HTML code, additional Vue data, Vue watcher, Vue computed properties, Vue methods.
QR Code Generates and displays a QR code. Configurable properties include: ID, layout, value, aspect ratio, width, height, max width, max height, avoid image clipping.
Head element Provides the ability to **inject head elements** into the rendered page, these can be added in 2 ways: - **From a CDN**: A JavaScript resource can be loaded from a CDN by choosing a library from the list retrieved automatically from https://api.cdnjs.com/libraries. - **From a Custom Library**: A custom element can be defined using the integrated editor, which allows creating and loading a custom `