Skip to main content

Dynamic Control

📘 Developer Guide

With the Dynamic Control Bricks, you are able to provide different types of input for your forms.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

Key Label Description Default Value
type * The type of the Dynamic Control Defines the Type of the DCC by string. See Available Types

DYNAMIC_CONTROLC_COMPONENT		 -
value The value of the Dynamic Control Sets the initial value of the Dynamic Control. Can be empty. It will be applied until the input is dirty.

any		 -
placeholder The inputs placeholder Defines the placeholder, which gets rendered in the input as long as no value exists

string | FyzTranslationConfig		 -
required Sets the requirement of the input Defines if a input is required or not. It will be marked and validation will be executed.

boolean		 -
label Sets the label of the input Renders a configurateable label in proximity of the input. Positioning depends on styling and DCC-Type

string | FyzTranslationConfig		 -
disabled Toggles the disabled state of the input When disabled, it's not possible, to input data into the input

boolean		 -
validators Defines a list of validators Adding validators to the property, each input value will be validated against a provided function

FyzValidator[]		 -
changeMode Specifies the kind of saving the code to the brick The saving behavior depends on the choosen option. always saves the code on every change.
debounced takes the debounceTime time, which delays the saving of the code on repeated strokes
onBlur saves the code after the user leaves the editors window focus

always | debounced | onBlur		 debounced
debounceTime Specifies the debounce time Accepts a number in milliseconds (ms)

number		 300

🫥 Runtime Properties

Event-Name Action Description
disabled Holds the current disabled value Describes if the Button is disabled
status Holds the current input status Describes the status of the FormControl, like e.g. valid, invalid, pending, disabled
valid Holds the current valid value Describes if the Button is valid
value Holds the current value Depending on the Type of the controls, it holds the inputs value
status$ Holds the current input status as RXJS-Stream (Observable) Describes the status of the FormControl, like e.g. pristine or dirty
valid$ Holds the current valid value as RXJS-Stream (Observable) Describes if the Button is valid
value$ Holds the current value as RXJS-Stream (Observable) Depending on the Type of the controls, it holds the inputs value
errors$ Holds the current input errors as RXJS-Stream (Observable) Describes errors occurred at input validation
statusChanged$ Emits the status change of the input as RXJS-Stream (Observable) Describes the status of the input
validChanged$ Emits the valid change of the input as RXJS-Stream (Observable) Describes if the input is valid
valueChanged$ Holds the current value as RXJS-Stream (Observable) Depending on the Type of the controls, it holds the inputs value
valueChangedDebounced$ Emits the value change of the input as RXJS-Stream (Observable) Will emit values only if changeMode is set to debounced
valueChangedOnBlur$ Emits the value change of the input as RXJS-Stream (Observable) Will emit values only if changeMode is set to onBlur
valueChangedOnConfig$ Emits the value change of the input as RXJS-Stream (Observable) Will emit values independent of the changeMode

🧑‍💻 Available Types

enum DYNAMIC_CONTROLC_COMPONENT  {
    TEXT = 'text',
    DATE = 'date',
    TIME = 'time',
    SINGLE_SELECT = 'singleSelect',
    MULTI_SELECT = 'multiSelect',
    TEXTAREA = 'textarea',
    CHECKBOX = 'checkbox',
    NUMBER = 'number',
    RADIO_BUTTON = 'radioButton',
    DATE_TIME_PICKER = 'dateTimePicker',
    SWITCH = 'switch'
}

🛠️ Usage

Designer

Use the configurators in the right side nav for setting up you control. There are different configurations for each Type

⌨️ Programmatical Data

How to read values via fyzBrick.cRef.value

This will let you get the current value of the Control

// ⚙️ Retrieve the current value of the DCC
const value = fyzBrick.cRef.value;

// 🧑‍💻 Work with the value
console.log(value);
How to read values via fyzBrick.cRef.value$

This will let you subscribe to an RXJS Stream, in which value changes will be emitted

// ⚙️ Retrieve the current value of the DCC via a observable subscription
const value$ = fyzBrick.cRef.value$;

// 🧑‍💻  Subscribe and work with value changes
value$.subscribe((value) => {
  console.log(value);
};
How to set values of the input via scripting

This will let you set the value of the input. The type depends on the used Type

// ⚙️ Set the value of the input.
fyzBrick.cRef.value = 'Testtext via scripting'
No Comments
Back to top