Dynamic Control

📘 Developer Guide

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

🔁 Example

Designer

PLACEHOLDER: Insert Image

Runtime

PLACEHOLDER: Insert Image

⚙️ 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	-
`debounceTime`	Specifies the debounce time	Accepts a number in milliseconds (ms) `number`	`debounced`

🧑‍💻 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'
}

🧨 Events

Event-Name	Action	Description
`valueChanged`	Fires on `click`	When the brick is clicked, it will fire a Event `{ actionId: string, event: PointerEvent, target: HTMLDivElement }`
`valueChangedOnBlur`	Fires on `update`	When the brick is updated, it will fire a Event `{ actionId: string, oldBrick: BrickData, newBrick: BrickData }`
`valueChangedOnBlur`	Fires on `update`	When the brick is updated, it will fire a Event `{ actionId: string, oldBrick: BrickData, newBrick: BrickData }`
`valueChangedOnBlur`	Fires on `update`	When the brick is updated, it will fire a Event `{ actionId: string, oldBrick: BrickData, newBrick: BrickData }`

🛠️ Usage

Designer

(Simply do this and that, e.g. use the configurators in the right hand sidenav)
PLACEHOLDER: Insert Image

Config

(Simply do this and that, e.g. edit the property XY in the configuration directly)
PLACEHOLDER: Insert Image

⌨️ Programmatical Data

How to apply something via scripting

// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired behavior
fyzBrick.cRef.mergeConfig({
  propA: "Edited"
})

How to apply something via scripting as Accordion

// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired behavior
fyzBrick.cRef.mergeConfig({
  propA: "Edited"
})