Rule on type "Control" not working

General
1

my schema and uischema is :

const schema = {
        type: 'object',
        properties: {
            is_external_person: {
                type: 'string'
            },
            committee_emp: {
                type: 'string',
                title: 'ชื่อกรรมการ'
            },
            committee_name: {
                type: 'string',
                title: 'ชื่อกรรมการ'
            },
            committee_position: {
                type: 'string',
                title: 'ตำแหน่ง'
            }
        },
        required: ['committee_emp', 'committee_name', 'committee_position']
    }

    const uischema = {
        type: 'VerticalLayout',
        elements: [
            {
                type: 'Control',
                scope: '#/properties/is_external_person',
                options: {
                    label: 'ประเภทบุคลากร',
                    size: { xs: 12, md: 8 },
                    fieldType: 'radio',
                    enum: [
                        { value: '0', label: 'บุคลากรภายใน' },
                        { value: '1', label: 'บุคลากรภายนอก' }
                    ]
                }
            },
            {
                type: 'Control',
                scope: '#',
                options: { divider: true }
            },
            {
                type: 'Group',
                label: 'ข้อมูลทั่วไป',
                marginTop: '0px',
                marginBottom: '10',
                elements: [
                    {
                        type: 'Control',
                        scope: '#/properties/committee_emp',
                        options: {
                            size: { xs: 12, md: 6 },
                            fieldType: 'autocomplete',
                            doctype: 'Employee',
                            fieldValue: 'first_name',
                            fieldLabel: 'first_name',
                            placeholder: 'ค้นหาคณะกรรมการ',
                            searchIcon: true
                        }
                    },
                    {
                        type: 'Control',
                        scope: '#/properties/committee_name',
                        options: {
                            size: { xs: 12, md: 6 },
                            fieldType: 'text',
                            placeholder: 'ระบุชื่อกรรมการ'
                        },
                        rule: {
                            effect: 'SHOW',
                            condition: {
                                scope: '#/properties/is_external_person',
                                schema: { const: '1' }
                            }
                        }
                    },
                    {
                        type: 'Control',
                        scope: '#/properties/committee_position',
                        options: {
                            size: { xs: 12, md: 6 },
                            fieldType: 'text',
                            placeholder: 'ระบุตำแหน่ง'
                        }
                    }
                ]
            }
        ]
    }

so when i switch the is_external_person the rule is not working how to fix it ?
my dependencies :
“@jsonforms/core”: “^3.5.1”,
“@jsonforms/examples”: “^3.5.1”,
“@jsonforms/material-renderers”: “^3.5.1”,
“@jsonforms/react”: “^3.5.1”,

2

Hi @Sevasit,

The rule works for me using the off-the-shelf @jsonforms/material-renderers:

ShowRule

Your UI Schema contains a lot of properties not used by our renderers. Are you using custom renderers? If yes, if they are implemented incorrectly then the rule might not be applied. For example every renderer which receives visible: false as a property should not render anything.

3

yes i use the custom custom renderers and base with @jsonforms/material-renderers

import { materialRenderers } from '@jsonforms/material-renderers'
import ...myCustom
export const customRenderers = [
  ...materialRenderers,
....myCustom
]

import React, { useState } from 'react'
import { JsonForms } from '@jsonforms/react'
import { materialRenderers, materialCells } from '@jsonforms/material-renderers'
import { JsonFormProps } from '@vise/kit'
import { customRenderers } from '@vise/kit/json-form-render/components'

const JsonForm: React.FC<JsonFormProps> = ({ schema, uischema, formData = {}, onChange }) => {
  return (
    <>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={formData}
        renderers={customRenderers}
        cells={materialCells}
        onChange={({ data }) => {
          if (onChange) onChange(data)
        }}
      />
    </>
  )
}

export default JsonForm

so how to use visible ?

4

In your custom renderer you need to return null if props.visible === false

1 Like
5

Thank you so much for your help. :clap:

1 Like