iconForm Builder

Concept

One of the core concepts for building form applications in BEEKAI is composing. Form module is the first place to start your building journey.

Component Setting

Let's start with a focus on the component level. Each form will be composed of components. The following table will example each attribute and help you create your component.

General

NameDescriptionExample
TypeWhat type of component to render for the user interface.
LabelA caption for an item in a user interface.
NameThis is the unique key to host your input data.
PlaceholderA string that provides a brief hint to the user
TooltipA short description to support your question.
Default valueThis is the initial value
AutocompleteIt will recall previous values entered in the same input.

Options/Lists

NameDescriptionExample
LabelDisplay label
ValueData value to submit when that option is selected.

Validation

NameDescription
RequiredIf the input value is required.
MinIt defines the minimum value that is acceptable and valid
MaxIt defines the maximum value that is acceptable and valid
Min lengthIt defines the minimum number of characters.
Max lengthIt defines the maximum number of characters.
PatternA regular expression the form control's value should match.
ValidateA custom validation logic.

Service

NameDescriptionExample
TypeDifferent request types.
URLThe service request URL.https://dog.ceo/api/breeds/list/all
HeadersConfigure request headers.
Value pathProvide a path to retrieve object data.
  1. Response data:
    { message: ['dogName'] }

  2. Value path:
    message

  3. Result:
    dogName

Store selected objectEnabled this option will store a separate field value with selected object data.

Display

NameDescription
Column widthComponent display width on a large screen.
Field widthField width within the column width
VisibleCustom logic to show and hide a component.

Video