bsr-ui-templates v1.8.8

Form fields configuration structure

Use this structure for pages render

{
    'page_key_1': {
        title: string,
        description?: string,
        align?: 'left' | 'center' | 'right', // 'left' by default
        fields?: {...}, // see fields structure below; if not provided static page will be shown
        customUrlPath?: string, // by default page key used
        nextPageKey?: 'page_key_2',
        step: number,
        stepsAmount: number,
    },
    'page_key_2': {
        ...
        nextPageKey?: {
            'page_key_3': { // this page should be opened next if at least one field value condition met
                'some_field_id_1': [1, 3, 4],
                ...
            },
            'page_key_4': { // another next page key with another conditions of value options
                'some_field_id_1': {
                    maxAmount: 0, // for array values
                },
                'some_field_id_2': {
                    minAmount: 1, // for array values
                },
                'some_field_id_3': {
                    minValue: 10, // for numeric values
                    maxValue: 15, // for numeric values
                },
                ...
            }
        }
    },
    'page_key_3': {...},
    'page_key_4': {...},
    ...
}

Use this structure for fields render

{
    'field_id_1': {
        label?: string,
        labelImg?: string, // image name with extension in /assets/img folder, for 'checkbox' type only
        type: 'section' | 'input_text' | 'input_number' | 'radio_bool' | 'checkbox' | 'radio' | 'increment_input
' | 'text' | 'option_bubbles' | 'options_data' | 'address_autocomplete' | 'percentages' | 'dollars
' | 'dollars_decimal' | 'info' | 'file_uploader' | 'multi_file_uploader' | 'date' | 'repetitive_brief' | 'popup', //required
        description?: string,
        align?: 'left' | 'center' | 'right', // 'left' by default
        marginAfter?: 'tiny' (20px) | 'small' (30px) | 'medium' (40px) | 'big' (60px) | 'large' (100px), // 'medium' by default
        maxWidthPx?: number,
        hint?: string, // hint in tooltip with question mark
        size?: 'small' | 'medium' | 'big', // 'small' by default
        horizontalStretch?: boolean; // shoud field fit all free space
        readonly?: boolean,
        required?: boolean, // if it is applied to 'section' type it means necessity at least one filled field
        requiredError?: string, // custom error for non filled required field, especially useful with required 'section' type
        notice?: {
            text: string,
            showOnBlurDisabled?: boolean,
            showOnlyIfValuesFullFilled?: [...], // array of appropriate values of current field
        },
        defaultValue?: any, // this value will be applied by default
        hidden?: boolean, // field will be hidden always, doesn't affect on submmitting, may be useful for temporary hiding from page 
        excludeSaving?: boolean, // applies only on submitting data but doesn't affect on showing
        // array of dependency conditions, necessary at least one object in array to meet conditions to show, change or save 'field_id_1'
        dependency?: [
            {
                fieldsConditions?: {
                    'field_id_2': [...], // array of appropriate values of 'field_id_2'
                     ...
                },
                fieldsExcludeConditions?: {
                    'field_id_3': [...], array of non appropriate values of 'field_id_3'
                    ...
                },
                showOnlyIfConditionsFulFilled?: boolean, // field will be displayed only if conditions met
                availableOnlyIfConditionsFulFilled?: boolean, // field will be available to change only if conditions met
                saveOnlyIfConditionsFulFilled?: boolean, // field will be included for submitting only if conditions met
                replaceValueRefFieldId?: string, //reference field id to replace value of current field with reference field value
                linkRepeatSectionValuesFromRefFieldIds?: string[], //reference field ids to link values without replacing
            },
            {...}
        ],
        sectionParams?: {
            items: {
                'subfield_id_1': {...}, // the same root field structure with type, label, etc.
                ...
            },
            itemsPerRow?: string | number, // number of items per row or string in grid-column-templates format
            verticalCenterAligned?: boolean,
            marginBetweenFields?: 'tiny' (20px) | 'small' (30px) | 'medium' (40px) | 'big' (60px) | 'large' (100px), // 'medium' by default,
            repeat?: {
                amount?: number,
                amountRefFieldId?: string,
                prefixLabel?: string,
            }
        }
        radioParams?: {
            items: [
                {
                    id: string | number,
                    content: string,
                    hint?: string,
                },
                ...
            ],
            additionalFields?: {
                'radio_subfield_1: {...}, // the same root structure with type, label, etc., for 'radio' type only
                ...
            },
            itemsPerRow?: number | string, // for the same width of items; number of items per row or string in grid-column-templates format
        },
        incrementInputParams?: {
            step?: number,
            minValue?: number,
            maxValue?: number,
            restValue?: {
                single: string,
                many: string,
            },
            customNames?: {
                'some_value_1': string, // applies only for showing, but not for submitting; overrides restValue
                ...
            },
        },
        optionBubblesParams?: {
            items?: [
                {
                    id: string,
                    text?: string | number,
                },
                ...
            ],
            searchItemsData?: {
                label?: string,
                addBtnText: string,
                searchPlaceholder?: string,
                items: [
                    {
                        id: string,
                        text?: string | number,
                        showByDefault?: boolean,
                    },
                    ...
                ],
                allowDuplicates?: boolean,
                optionDataShowByDefaultRefFieldId?: string,
            }
        },
        optionsDataParams?: {
            allowZero?: boolean,
            columns: {
                'column_id_1': {
                    type: 'percentages' | 'miles' | 'number',
                    label?: string,
                    placeholder?: string,
                },
                'column_id_2': {...},
                ...
            },
            rows: {
                optionBubblesRefFieldId?: string,
                items?: [
                    {
                        id: string,
                        text?: string | number,
                    },
                    ...
                ],
                searchItemsData?: {
                    label?: string,
                    addBtnText: string,
                    searchPlaceholder?: string,
                    items: [
                        {
                            id: string,
                            text?: string | number,
                            showByDefault?: boolean,
                        },
                        ...
                    ],
                    allowDuplicates?: boolean,
                    optionDataShowByDefaultRefFieldId?: string,
                },
            },
            totals?: {
                calculateColumnId: string,
                targetGoal?: number,
            }
        },
        repetitiveBriefParams?: {
            refFieldSection?: {
                id: string,
                columns: [...], // array of column ids
            },
            data?: [
                {
                    label: string,
                    values: [...], // array of values
                },
                {...}
            ]
        },
        fileUploadParams?: {
            appropriateExtensions?: [...], // array of extensions
            parsing?: {
                fields: {
                    [parsingKey: string]: {
                        type: string, // one of the field type from root structure
                        outputKey: string,
                        required?: boolean,
                    },
                },
                amountRefField?: {
                    id: string,
                    additionalRepeatSectionIdsToInclude?: string[], // add repeat sections value count for calculating mismatch
                    mismatchRowsText?: string,
                    amount?: number,
                }
            }
        }
    }
    'field_id_2': {...},
    ...
}