Dynamic Input Form Config

The dynamicInputFormConfig is a powerful configuration object that enables the creation of dynamic, interactive forms for configuring component settings. These forms can be displayed in two contexts:

1. Modals: Used for displaying configuration forms in popup windows
2. Component Settings Panel: Used for displaying configuration forms in the component settings sidebar

This configuration system provides a flexible way to create user-friendly interfaces for component configuration, with support for various input types and conditional logic.

Configuration Structure

The basic structure of a dynamicInputFormConfig includes:

component.config.json

{
    "header": "Sample Component Header",    // Title of the form
    "size": "md",                          // Size of the form (sm, md, lg)
    "saveButtonLabel": "Save",             // Label for the save button
    "cancelButtonLabel": "Cancel",         // Label for the cancel button
    "inputs": [                            // Array of input configurations
        {
            "type": "image",
            "key": "sampleimage",
            "label": "Sample Image Input",
            "title": "Sample Image Input",
            "options": {
                "multiple": false
            },
            "condition": {
                "delay": 5
            }
        }
    ]
}

Input Configuration

Each input in the inputs array is an object that defines how a specific property (identified by its key) can be modified by users. The type property determines the input interface that will be displayed.

Common Input Properties

All input types share these common properties:

Property	Type	Required	Description
type	string	Yes	The type of input to display (see supported types below)
key	string	Yes	The property key that this input will modify
label	string	Yes	The label displayed next to the input
title	string	Yes	The title displayed in the input header
helpText	string	No	Additional help text displayed below the input
required	boolean	No	Whether the input is required (default: false)
options	object	No	Type-specific configuration options
condition	object	No	Conditional logic for displaying the input

Supported Input Types

The following input types are supported:

Type	Description	Common Options
text	Single-line text input	pattern, placeholder
textarea	Multi-line text input	rows, placeholder
ace-editor	Code editor	mode (html, javascript, xml, json)
email	Email input	pattern, placeholder
url	URL input	pattern, placeholder
image	Image selector	multiple
video	Video selector	multiple
media	Media selector	multiple
audio	Audio selector	multiple
slide	Slide selector	multiple, enablePreselects
panorama	Panorama selector	multiple
font	Font selector	fontLimit
file	File selector	multiple
number	Number input	min, max, step, placeholder
dropdown	Dropdown selector	selectOptions, disabledOptionLabel
toggle	Toggle switch	onLabel, offLabel
table	Spreadsheet-like input	height, width, maxRows, minRows, maxCols, minCols
checkbox	Single checkbox	default
checkbox-group	Multiple checkboxes	content
color	Color picker	default, includeGradient
datetime	Date and time picker	min, max
padding-input	Padding configuration	defaultValue
border-radius-input	Border radius configuration	defaultValue
radio-group	Radio button group	defaultValue, radioOptions
border-input	Border configuration	defaultValue
drop-shadow-input	Drop shadow configuration	defaultValue
box-shadow-input	Box shadow configuration	defaultValue
radio-icon	Radio Icon Buttons	defaultValue items allowNullValue

Text

Text Input Example

    {
        "type": "text",
        "key": "mypropertykey",
        "label": "Label",
        "title": "Label",
        "helpText": "This text input will allow users to change text values.",
        "required": false
    }

Textarea

Textarea Input Example

    {
        "type": "textarea",
        "key": "mypropertykey",
        "label": "Label",
        "title": "Label",
        "helpText": "This textarea input will allow users to change larger text values.",
        "required": false
    }

Ace Editor

Ace Editor Input Example

    {
        "type" : "ace-editor",
        "key" : "html",
        "label" : "Button HTML",
        "title" : "Button HTML",
        "options" : {
            "mode" : "html"
            // JavaScript, XML, JSON; see https://ace.c9.io/
        }
    }

Form Image Display

Form Image Display Example

    {
        "type" : "form-image-display",
        "label" : "Instructions",
        "title" : "Download Instructions",
        "highlighted" : true,
        "imageUrl" : "https://static.vecteezy.com/system/resources/thumbnails/002/294/848/small/creative-promotion-web-banner-design-free-vector.jpg"
    },

Email

Toggle Input Example

    {
        "type": "email",
        "key": "mypropertykey",
        "label": "Email Input",
        "title": "Email Input",
        "helpText": "Enter your email address.",
        "required": false,
        "options": {
            "pattern": "/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/",
            "placeholder": "Enter Email Here"
        }
    }

Audio

Audio Input Example

    {
        "type": "audio",
        "key": "mypropertykey",
        "label": "Audio Input",
        "title": "Audio Input",
        "helpText": "Select an audio file from your Digideck Audio Library..",
        "required": false,
        "options": {
            "multiple": false
        }
    }

Checkbox

Checkbox Input Example

    {
        "type": "checkbox",
        "key": "mypropertykey",
        "label": "Checkbox Input",
        "title": "Checkbox Input",
        "helpText": "Set a property by checking a box.",
        "required": false,
        "options": {
            "default": true
        }
    }

Checkbox Group

Checkbox Group Input Example

    {
        "type" : "checkbox-group",
        "key" : "mypropertykey",
        "label" : "Checkbox Group Input",
        "title" : "Checkbox Group Input",
        "options" : {
            "content" : [
                { "label" : "First Name" },
                { "label" : "Last Name" },
                { "label" : "Email" }
            ]
        }
    }

Color

Color Input Example

    {
        "type": "color",
        "key": "mypropertykey",
        "label": "Color Input",
        "title": "Color Input",
        "helpText": "Select a color.",
        "required": false,
        "options": {
            "default": "###",
            "includeGradient": true
        }
    }

Datetime

Datetime Input Example

    {
        "type": "datetime",
        "key": "mypropertykey",
        "label": "Datetime Input",
        "title": "Datetime Input",
        "helpText": "Select a date+time combination.",
        "required": false,
        "options": {
            "max": "2031-02-20T20:20",
            "min": "2011-02-20T20:20"
        }
    }

Dropdown

Dropdown Input Example

    {
        "type": "dropdown",
        "key": "mypropertykey",
        "label": "Dropdown Input",
        "title": "Dropdown Input",
        "helpText": "Select an option from a dropdown-list.",
        "required": false,
        "options": {
            "disabledOptionLabel": [
                {
                    value: 3, label: "Third"
                }
            ],
            "selectOptions": [
                {
                    value: 1, label: "First"
                },
                                {
                    value: 2, label: "Second"
                }
            ]
        }
    }

File

File Input Example

    {
        "type": "file",
        "key": "mypropertykey",
        "label": "File Input",
        "title": "File Input",
        "helpText": "Select a file from the Digideck Asset Library.",
        "required": false,
        "options": {
            "multiple": false
        }
    }

Font

Font Input Example

    {
        "type": "font",
        "key": "mypropertykey",
        "label": "Font Input",
        "title": "Font Input",
        "helpText": "Select a font from the Digideck Font Selector.",
        "required": false,
        "options": {
            "fontLimit": 3
        }
    }

Media

Media Input Example

    {
        "type": "media",
        "key": "mypropertykey",
        "label": "Media Input",
        "title": "Media Input",
        "helpText": "Select media files from the Digideck Media Selector.",
        "required": false,
        "options": {
            "multiple": true
        }
    }

Number

Number Input Example

    {
        "type": "number",
        "key": "mypropertykey",
        "label": "Number Input",
        "title": "Number Input",
        "helpText": "Set a number value.",
        "required": false,
        "options": {
            "max": 100,
            "min": 50,
            "step": 2,
            "placeholder": "Enter Number
        }
    }

Slide

Slide Input Example

    {
        "type": "slide",
        "key": "mypropertykey",
        "label": "Slide Input",
        "title": "Slide Input",
        "helpText": "Select a Digideck slide.",
        "required": false,
        "options": {
            "enablePreselects": false,
            "multiple": true
        }
    }

Image

Image Input Example

    {
        "type": "image",
        "key": "mypropertykey",
        "label": "Image Input",
        "title": "Image Input",
        "helpText": "Select an image from the Digideck image gallery.",
        "required": false,
        "options": {
            "multiple": false
        }
    }

Video

Video Input Example

    {
        "type": "video",
        "key": "mypropertykey",
        "label": "Video Input",
        "title": "Video Input",
        "helpText": "Select a video from the Digideck Video gallery.",
        "required": false,
        "options": {
            "multiple": false
        }
    }

Toggle

Toggle Input Example

    {
        "type": "toggle",
        "key": "mypropertykey",
        "label": "Toggle Input",
        "title": "Toggle Input",
        "helpText": "This toggle input will allow users to toggle between true/false on a value.",
        "required": false,
        "options": {
            "onLabel": "Enabled",
            "offLabel": "Disabled"
        }
    }

Table

The Table input uses Handsontable to allow user to enter spreadsheet-like input values.

Table Input Example

    {
        "type": "table",
        "key": "country-data",
        "label": "Table Sample",
        "title": "Table Sample",
        "options": {
            "height": 200, // not required, will set height automatically if unset
            "width": 560, // not required, will set width automatically if unset
            "maxRows": 200, // not required, will allow for infinite rows if unset
            "minRows": 200, // not required, will set the value to 0 if unset
            "minCols": 200, // not required, will set the value to 0 if unset
            "maxCols": 200 // not required, will allow for infinite columns if unset
        }
    }

Padding Input

Padding Input Example

    {
        label: 'Rotator Padding Input',
        title: 'Rotator Padding Input',
        helpText: 'Sets the padding for the Image Rotator',
        type: 'padding-input',
        key: 'rotator-padding',
        required: false,
        options: {
            defaultValue: '3px 3px 3px 3px' || '5px' // supports individual sides or uniform
        }
    }

Radio Group Input

Radio Group Input Example

    {
        "label": 'Favorite Color',
        "title": 'Favorite Color',
        "helpText": 'Choose your favorite color',
        "type": 'radio-group',
        "key": 'favorite-colors',
        "options": {
            "defaultValue": 'red',
            "radioOptions": [
                { "label": 'Red', "value": 'red'},
                { "label": 'Blue', "value": 'blue' },
                { "label": 'Green', "value": 'green' }
            ]
        }
    }

Border Radius Input

Border Radius Input Example

    {
        "label": 'Border Radius Label Example',
        "title": 'Border Radius Title Example',
        "helpText": 'Sets the border radius for an element',
        "type": 'border-radius-input',
        "key": 'example-key-border-radius',
        "options": {
            "defaultValue": "14px" || "5px 10px 5px 10px" // accepts either a single uniform value, or individual corners
        }
    }

Border Input

Border Input Example

    {
        "label": 'Border Input Label Example',
        "title": 'Border Input Title Example',
        "helpText": 'Sets the border for an element',
        "type": 'border-input',
        "key": 'example-key-border',
        "options": {
            "defaultValue": "1px solid red" // borderWidth lineType lineColor
        }
    }

Box Shadow Input

Box Shadow Input Example

    {
        "label": 'Box Shadow Input Example',
        "title": 'Box Shadow Input Example',
        "helpText": 'Sets the Box Shadow for and element',
        "type": 'box-shadow-input',
        "key": 'example-key-box-shadow',
        "options": {
            "defaultValue": "1px 2px 3px 5px red" // offsetX offsetY BlurRadius Spread Color
        }
    }

Drop Shadow Input

Drop Shadow Input Example

    {
        "label": 'Drop Shadow Input Example',
        "title": 'Drop Shadow Input Example',
        "helpText": 'Sets the Drop Shadow for and element',
        "type": 'drop-shadow-input',
        "key": 'example-key-drop-shadow',
        "options": {
            "defaultValue": '3px 3px 3px blue' // offsetX offsetY BlurRadius Color
        }
    }

Radio Icon

An icon-based radio input that displays a set of icons as selectable options. Use this to let users pick one of several icons. The label in each items entry should be concise (under 14 characters). The iconClasses value in each item should be an icon class that is supported in our Angular UI.

Within items, title will print to the radio-icon buttons title attribute for accessibility and label will be printed as label text below the button.

The Angular UI supports all non-pro fontawesome icons.

⚠️ Warning: Please make sure the value property of each item are similar types (e.g. they are all numbers, booleans, strings etc.). They can be any type—just make them all have the same value-type.

Radio Icon Input Example

{
    "type": "radio-icon",
    "key": "my-test",
    "label": "Radio Icons",
    "title": "Radio Icons",
    "required": false,
    "options": {
        "items": [
            { "label": "Nick", "title": "Nick", "value": 3, "iconClasses": "icon icon-slide-comment fa-2x" },
            { "label": "Need Help?", "title": "Info", "value": 5, "iconClasses": "fas fa-info-circle fa-2x" },
            { "label": "Square Up!", "title": "Square", "value": 1, "iconClasses": "fas fa-minus-square fa-2x" },
            { "label": "Volume Up!", "title": "Volume", "value": 7, "iconClasses": "fas fa-volume-up fa-2x" }
        ],
        "default": 3,
        "allowNullValue": true
    }
}

Conditional Logic

Inputs can be conditionally displayed based on the values of other inputs in the form. This is controlled through the condition property, which supports two types of conditions:

$or Condition

Displays the input if ANY of the specified conditions are met.

component.config.json

{
    "type": "text",
    "key": "conditional-input",
    "label": "Conditional Input",
    "condition": {
        "$or": {
            "example-attr-key": 123,
            "foo": false
        }
    }
}

$and Condition

Displays the input only if ALL of the specified conditions are met.

component.config.json

{
    "type": "text",
    "key": "conditional-input",
    "label": "Conditional Input",
    "condition": {
        "$and": {
            "example-attr-key": 123,
            "enable-image": true
        }
    }
}

Complex Conditions

You can combine multiple conditions using arrays:

component.config.json

{
    "type": "text",
    "key": "complex-conditional-input",
    "label": "Complex Conditional Input",
    "condition": {
        "$and": [
            { "example-attr-key": 123, "enable-image": true },
            { "example-attr-key": 234, "enable-image": false }
        ],
        "$or": [
            { "example-attr-key": 123, "foo": false },
            { "example-attr-key": 234, "foo": true }
        ]
    }
}