Custom HorizontalLayer on complex json

General
1

Hello folk’s
I have had problems developing a particular jsonform that has a very peculiar layout with nested elements. Specifically, I need these 3 fields that are inside a vertical layout to be aligned horizontally, but the current definition does not allow me to do it directly.
A custom rendered will be a valid solution ?? it’s posible to do something simpler ?

Captura de Pantalla 2024-08-20 a la(s) 20.26.58
Captura de Pantalla 2024-08-20 a la(s) 20.26.581092×602 40.9 KB

These are the definitions of the ui and schema

ui.json 
{
    "type": "VerticalLayout",
    "elements": [
        {
            "type": "Control",
            "label": "Fecha Última Consulta",
            "scope": "#/properties/TIMESTAMP_TM"
        },
        {
            "type": "Control",
            "label": "Cantidad de Interfaces",
            "scope": "#/properties/INTERFACES_NUM"
        },
        {
            "type": "Control",
            "scope": "#/properties/WIFI_FREQ_DES"
        }
    ]
}
schema.json 
{
    "type": "object",
    "properties": {
        "TIMESTAMP_TM": {
            "type": "string"
        },
        "INTERFACES_NUM": {
            "type": "integer"
        },
        "WIFI_FREQ_DES": {
            "anyOf": [
                {
                    "$ref": "#/definitions/2G",
                    "title": "2G"
                },
                {
                    "$ref": "#/definitions/5G",
                    "title": "5G"
                }
            ]
        }
    },
    "definitions": {
        "2G": {
            "type": "object",
            "properties": {
                "2G.MANUFACT_DES": {
                    "type": "string",
                    "title": "Fabricante"
                },
                "2G.DRIVER_VR_DES": {
                    "type": "string",
                    "title": "Version de Driver"
                },
                "2G.INTF_TYPE_DES": {
                    "type": "string",
                    "title": "Tipo"
                },
                "2G.INTF_BAND_IND": {
                    "type": "string",
                    "title": "Banda"
                },
                "2G.WIFI_MODE_DES": {
                    "type": "string",
                    "title": "Modo"
                },
                "2G.MAX_BWIDTH_DES": {
                    "type": "string",
                    "title": "Ancho de banda Maximo"
                },
                "2G.BANDWIDTH_DES": {
                    "type": "string",
                    "title": "Ancho de banda actual"
                },
                "2G.CURRENT_CHN_NUM": {
                    "type": "integer",
                    "title": "Canal principal actual"
                },
                "2G.MAX_STA_PHY_NUM": {
                    "type": "integer",
                    "title": "Máximo de Estaciones PHY"
                },
                "2G.POWER_QT": {
                    "type": "string",
                    "title": "Valor de Potencia tx (dB)"
                },
                "2G.G_INTL_DES": {
                    "type": "string",
                    "title": "Intervalo de Guardia"
                },
                "2G.AUTO_CHN_E_IND": {
                    "type": "boolean",
                    "title": "Canal Automático Habilitado"
                },
                "2G.BEAMF_STA_IND": {
                    "type": "boolean",
                    "title": "Beamforming"
                },
                "2G.WIFI_PHY_S_IND": {
                    "type": "boolean",
                    "title": "WiFi PHY Status Activo"
                },
                "2G.ROAMING_STA_IND": {
                    "type": "boolean",
                    "title": "Roaming Status"
                },
                "2G.BSSID_MAP": {
                    "type": "array",
                    "title": "Interfaces",
                    "items": {
                        "type": "object",
                        "properties": {
                            "INT_NICK_NAME": {
                                "type": "string",
                                "title": "Interfaz"
                            },
                            "INTERFACE_NAME": {
                                "type": "string",
                                "title": "Indicador de Interfaz"
                            },
                            "INTF_STA_IND": {
                                "type": "boolean",
                                "title": "Estado"
                            },
                            "SSID_DES": {
                                "type": "string",
                                "title": "SSID"
                            },
                            "BSSID": {
                                "type": "string",
                                "title": "BSSID"
                            },
                            "ENCRYPTION_IND": {
                                "type": "string",
                                "title": "Encriptación"
                            },
                            "M_STA_INTF_NUM": {
                                "type": "integer",
                                "title": "Máximo de Estaciones de Interfaz"
                            },
                            "SSID_HIDE_IND": {
                                "type": "boolean",
                                "title": "SSID Oculto"
                            },
                            "SECURITY_IND": {
                                "type": "string",
                                "title": "Modo de Seguridad"
                            }
                        }
                    }
                }
            }
        },
        "5G": {
            "type": "object",
            "properties": {
                "5G.MANUFACT_DES": {
                    "type": "string",
                    "title": "Fabricante"
                },
                "5G.DRIVER_VR_DES": {
                    "type": "string",
                    "title": "Version de Driver"
                },
                "5G.INTF_TYPE_DES": {
                    "type": "string",
                    "title": "Tipo"
                },
                "5G.INTF_BAND_IND": {
                    "type": "string",
                    "title": "Banda"
                },
                "5G.WIFI_MODE_DES": {
                    "type": "string",
                    "title": "Modo"
                },
                "5G.MAX_BWIDTH_DES": {
                    "type": "string",
                    "title": "Ancho de banda Maximo"
                },
                "5G.BANDWIDTH_DES": {
                    "type": "string",
                    "title": "Ancho de banda actual"
                },
                "5G.CURRENT_CHN_NUM": {
                    "type": "integer",
                    "title": "Canal principal actual"
                },
                "5G.MAX_STA_PHY_NUM": {
                    "type": "integer",
                    "title": "Máximo de Estaciones PHY"
                },
                "5G.POWER_QT": {
                    "type": "string",
                    "title": "Valor de Potencia tx (dB)"
                },
                "5G.G_INTL_DES": {
                    "type": "string",
                    "title": "Intervalo de Guardia"
                },
                "5G.AUTO_CHN_E_IND": {
                    "type": "boolean",
                    "title": "Canal Automático Habilitado"
                },
                "5G.BEAMF_STA_IND": {
                    "type": "boolean",
                    "title": "Beamforming"
                },
                "5G.WIFI_PHY_S_IND": {
                    "type": "boolean",
                    "title": "WiFi PHY Status Activo"
                },
                "5G.ROAMING_STA_IND": {
                    "type": "boolean",
                    "title": "Roaming Status"
                },
                "5G.BSSID_MAP": {
                    "type": "array",
                    "title": "Interfaces",
                    "items": {
                        "type": "object",
                        "properties": {
                            "INT_NICK_NAME": {
                                "type": "string",
                                "title": "Interfaz"
                            },
                            "INTERFACE_NAME": {
                                "type": "string",
                                "title": "Indicador de Interfaz"
                            },
                            "INTF_STA_IND": {
                                "type": "boolean",
                                "title": "Estado"
                            },
                            "SSID_DES": {
                                "type": "string",
                                "title": "SSID"
                            },
                            "BSSID": {
                                "type": "string",
                                "title": "BSSID"
                            },
                            "ENCRYPTION_IND": {
                                "type": "string",
                                "title": "Encriptación"
                            },
                            "M_STA_INTF_NUM": {
                                "type": "integer",
                                "title": "Máximo de Estaciones de Interfaz"
                            },
                            "SSID_HIDE_IND": {
                                "type": "boolean",
                                "title": "SSID Oculto"
                            },
                            "SECURITY_IND": {
                                "type": "string",
                                "title": "Modo de Seguridad"
                            }
                        }
                    }
                }
            }
        }
    }
}
data.json 
{
    "TIMESTAMP_TM": "20-08-24 14:19:25",
    "REP_INT_NUM": 900000,
    "UNIQ_SSID_IND": true,
    "SAM_INT_NUM": 900000,
    "INTERFACES_NUM": 6,
    "WIFI_FREQ_DES": {
        "2G": {
            "MANUFACT_DES": "Mediatek",
            "DRIVER_VR_DES": "7.4.0.0",
            "INTF_TYPE_DES": "AP",
            "INTF_BAND_IND": "2.4GHz",
            "WIFI_MODE_DES": "ax",
            "BANDWIDTH_DES": "20MHz",
            "BEACON_INTL_NUM": 100,
            "DTIM_PERIOD_NUM": 3,
            "BEACON_RATE_CD": "1, 2, 5.5, 6, 9, 11, 12, 18, 24, 36, 48, 54Mbps",
            "P_MGMT_RATE_CD": "1, 2, 5.5, 6, 9, 11, 12, 18, 24, 36, 48, 54Mbps",
            "ALLWD_CHANS_DES": "1,2,3,4,5,6,7,8,9,10,11,12,13",
            "CURRENT_CHN_NUM": 11,
            "AUTOBWIDTH_IND": true,
            "SECOND_CHN_ID": "0",
            "AUTO_CHN_E_IND": true,
            "MAX_STA_PHY_NUM": 64,
            "MAX_BWIDTH_DES": "40MHz",
            "DYN_FRQ_SEL_IND": true,
            "SCS_ENABLED_IND": true,
            "G_INTL_DES": "800ns",
            "BEAMF_STA_IND": true,
            "WIFI_FAIR_S_IND": false,
            "WIFI_RTS_TH_NUM": 2347,
            "WIFI_MIMO_S_IND": true,
            "WIFI_PHY_S_IND": true,
            "ROAMING_STA_IND": true,
            "COC_MNDFS_S_IND": true,
            "FW_NO_MU_S_IND": true,
            "ROAMING_ROLE_IND": "Agent",
            "WIFI_PFM_S_DES": "False",
            "BSSID_MAP": [
                {
                    "BSSID": "0000000000",
                    "INTERFACE_NAME": "ra0",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": true,
                    "SSID_DES": "FJHFGJF",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "0000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": false,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi"
                },
                {
                    "BSSID": "000000000",
                    "INTERFACE_NAME": "ra1",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": true,
                    "SSID_DES": "HJGFHJFJFHGJ",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "0000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": true,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi1"
                },
                {
                    "BSSID": "00000000000",
                    "INTERFACE_NAME": "ra2",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": false,
                    "SSID_DES": "GFDHFGHDFGH",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "00000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": true,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi2"
                }
            ]
        },
        "5G": {
            "MANUFACT_DES": "Mediatek",
            "DRIVER_VR_DES": "7.4.0.0",
            "INTF_TYPE_DES": "AP",
            "INTF_BAND_IND": "5GHz",
            "WIFI_MODE_DES": "ax",
            "BANDWIDTH_DES": "80MHz",
            "BEACON_INTL_NUM": 100,
            "DTIM_PERIOD_NUM": 3,
            "BEACON_RATE_CD": "1, 2, 5.5, 6, 9, 11, 12, 18, 24, 36, 48, 54Mbps",
            "P_MGMT_RATE_CD": "1, 2, 5.5, 6, 9, 11, 12, 18, 24, 36, 48, 54Mbps",
            "ALLWD_CHANS_DES": "36,40,44,48,52,56,60,64,100,104,108,112,149,153,157,161",
            "CURRENT_CHN_NUM": 100,
            "AUTOBWIDTH_IND": false,
            "SECOND_CHN_ID": "0",
            "AUTO_CHN_E_IND": true,
            "MAX_STA_PHY_NUM": 64,
            "MAX_BWIDTH_DES": "80MHz",
            "DYN_FRQ_SEL_IND": true,
            "SCS_ENABLED_IND": true,
            "G_INTL_DES": "800ns",
            "BEAMF_STA_IND": true,
            "WIFI_FAIR_S_IND": true,
            "WIFI_RTS_TH_NUM": 2347,
            "WIFI_MIMO_S_IND": true,
            "WIFI_PHY_S_IND": true,
            "ROAMING_STA_IND": true,
            "COC_MNDFS_S_IND": true,
            "FW_NO_MU_S_IND": true,
            "ROAMING_ROLE_IND": "Agent",
            "WIFI_PFM_S_DES": "False",
            "BSSID_MAP": [
                {
                    "BSSID": "000000000000",
                    "INTERFACE_NAME": "rai0",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": true,
                    "SSID_DES": "Curita 5G",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "0000000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": false,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi_plus"
                },
                {
                    "BSSID": "000000000",
                    "INTERFACE_NAME": "rai1",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": false,
                    "SSID_DES": "DSFSDFSDFHGSHFG",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "00000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": false,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi_plus1"
                },
                {
                    "BSSID": "0000000000",
                    "INTERFACE_NAME": "rai2",
                    "COUNTRY_ID": "CL",
                    "INTF_STA_IND": false,
                    "SSID_DES": "GHJDJHJHDHHJ",
                    "SECURITY_IND": "wpa2-psk",
                    "ENCRYPTION_IND": "aes",
                    "PASSWORD_DES": "00000000000",
                    "M_STA_INTF_NUM": 64,
                    "WLESS_M_EXT_IND": true,
                    "SSID_HIDE_IND": false,
                    "WPS_STATUS_IND": true,
                    "WPS_MODE_DES": "PBC",
                    "INTF_ISOL_S_IND": true,
                    "WHITEL_S_IND": false,
                    "INT_NICK_NAME": "wifi_plus2"
                }
            ]
        }
    }
}

Thank’s for your help

2

Hi @yiyux,

Are you already using customized renderers, styles or themes? By default our checkboxes are left-aligned like this:

image
image991×729 30.9 KB

3

Hi @sdirix , thank you for your quick response.
i’m not using a custom renderer, but i’m testing the schema and ui in a small React app because it’s easier to load files vs. the application I am developing. I fix this and the CSS is OK now

Mi idea is to align these 4 boolean items horizontally, like this

Captura de Pantalla 2024-08-21 a la(s) 10.50.18
Captura de Pantalla 2024-08-21 a la(s) 10.50.181160×451 14.9 KB

4

To align the booleans horizontally your options are:

  • directly provide a UI Schema for the 2G and 5G objects in which all properties are organized in a VerticalLayout except for the HorizontalLayout used for the booleans. However the HorizontalLayout will grab all of the width, so the booleans will be spread out a bit more than in your mockup. To fix this you would need to provide a custom renderer for the HorizontalLayout. Alternatively you could also directly use a new element type like BooleanGroup and provide a custom renderer for that.
  • implement a custom renderer for the 2G and 5G objects. You can basically reuse/copy our existing one just with a small modification in which you modify the generated UI Schema for them. The modified UI schema can again contain a HorizontalLayout or BooleanGroup etc. The rest is the same as in the first option.
1 Like
5

Thank you @sdirix , i wil ltry the first option. :grinning:

6

it’s working now as desired

Captura de Pantalla 2024-08-23 a la(s) 18.47.14
Captura de Pantalla 2024-08-23 a la(s) 18.47.141168×560 30.1 KB

1 Like