Use MUI breakpoints to achieve responsiveness

General
1

I want to achieve something like this with MUI
company name md 5 location md 7
seo friendly url md 5 (full row and center)
generate button md 6 left align
reset button md 6 right align

I asked chatGPT to generate a ui schema for me.

const uischema = {
        type: 'VerticalLayout',
        elements: [
            {
                type: 'HorizontalLayout',
                elements: [
                    {
                        type: 'Control',
                        scope: '#/properties/companyName',
                        options: {
                            label: 'Company Name',
                            layout: { md: 5 }
                        }
                    },
                    {
                        type: 'Control',
                        scope: '#/properties/location',
                        options: {
                            label: 'Location',
                            layout: { md: 7 }
                        }
                    }
                ]
            },
            {
                type: 'HorizontalLayout',
                elements: [
                    {
                        type: 'Control',
                        scope: '#/properties/seoFriendlyUrl',
                        options: {
                            label: 'SEO Friendly URL',
                            layout: { md: 5 },
                            horizontalAlignment: 'center'
                        }
                    }
                ]
            },
            {
                type: 'HorizontalLayout',
                elements: [
                    {
                        type: 'Control',
                        scope: '#/properties/',
                        options: {
                            label: 'Generate Button',
                            layout: { md: 6 },
                            horizontalAlignment: 'left'
                        }
                    },
                    {
                        type: 'Control',
                        scope: '#/properties/',
                        options: {
                            label: 'Reset Button',
                            layout: { md: 6 },
                            horizontalAlignment: 'right'
                        }
                    }
                ]
            }
        ]
    };

This seems a perfect solutions for the problem I have. But seems like this is not working. Is JSON forms really have this layout property in options object? Or else what are the other ways to implement this easily?

2

Hi @pathum-kalhan,

This UI Schema is only partially valid, e.g. all scope must properly resolve to a sub-schema.

Regarding your question: The off-the-shelf React Material renderers do not support the options.layout out of the box., nor the horizontalAlignment option. However that can be easily achieved with a custom layout renderer. The layout renderer could look into the layout and horizontalAlignment options of the UI elements and create the layout accordingly.

3

can you elaborate it more.
I saw this in the official docs where the entire form is wrapped in a Accordion component. Custom Layouts - JSON Forms
I can’t do that instead what I want is render individual controller in the GRID system.

Can you give me an example code?
I am more than happy to add that into the documentation as tutorial.

4

Hi @pathum-kalhan,

You can take a look at our code base as all off-the-shelf renderers use the very same mechanism as custom renderers. Here you can find the utils for layout rendering. You can copy the code and instead of building a uniform grid, you adjust it according to your UI Schema.