This page ⧉Copy as Markdown M↓View Markdown ✦Open in ChatGPT ✧Open in Claude Hide panelsShow panels ⌘Ctrl \

Fields inside fields

UI Maker is deprecated

UI Maker is kept for the projects which use it and will be removed in API Maker v4. New admin screens are better built with any frontend framework on top of the generated APIs.

👉 We can use fields inside fields using below syntax.

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [ // 👈 Array of rows
            [ // 👈 Row
                { // 👈 Column 1
                    label: 'Address',
                    control: T.EDBMasterFormControl.textarea,
                    path: 'current_address',
                    cssClassDiv: 'mt-4 col-sm-3',
                    textAreaSettings: {
                        rows: 15
                    }
                },
                { // 👈 Column 2
                    cssClassDiv: 'mt-4 col-sm-3',
                    fields: [ // 👈 Array of rows
                        [ // 👈 Row
                            { // 👈 Column 1
                                label: 'Ratings',
                                control: T.EDBMasterFormControl.rating,
                                path: 'rating_field_1',
                                cssClassDiv: 'col-sm-3 mt-4',
                            },
                        ],
                        [
                            { // 👈 Column 2
                                label: 'Ratings',
                                control: T.EDBMasterFormControl.rating,
                                path: 'rating_field_2',
                                cssClassDiv: 'col-sm-3 mt-4',
                            },
                        ]
                    ],
                },
                { // 👈 Column 3
                    cssClassDiv: 'mt-4 col-sm-6',
                    fields: [
                        [
                            {
                                label: 'Knob',
                                control: T.EDBMasterFormControl.knob,
                                path: 'knob_settings_field',
                                cssClassDiv: 'col-sm-3 mt-4',

                                knobSettings: {
                                    size: 200,
                                }
                            },
                        ]
                    ],
                },
            ]
        ],
    },
};