Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
 Steps,
 }from"antd";
 importstyledfrom"styled-components";
 importtype{JsonSchema}from"@jsonforms/core";
 importtype{JSONSchema7}from"json-schema";
 import{debounce}from"lodash";
 importdayjsfrom"dayjs";
 import{trans}from"i18n";
 importtype{
 JsonFormsUiSchema,
 FieldUiSchema,
 Layout,
 Categorization,
 Category,
 Control
 }from"./types";
 importtype{SwitchChangeEventHandler}from"antd/es/switch";
 import{useContainerWidth}from"./jsonSchemaFormComp";

 const{ TextArea}=Input;

 constContainer=styled.div`
 constContainer=styled.div
 `
  gap: 16px;
  width: 100%;
  .ant-form-item {
    margin-bottom: 16px;
  }
  }
 `;

 interfaceHorizontalLayout{
 type:"HorizontalLayout";
 elements:Control[];
 }

 constJsonFormsRenderer:React.FC<JsonFormsRendererProps>=({
  schema,
  data,
 validationState:externalValidationState,
  onValidationChange,
 })=>{
 constcontainerWidth=useContainerWidth();
 // Local state to handle immediate updates
 const[localData,setLocalData]=useState(data);
 // Track focused field
 if(!uiSchema)returnundefined;

 // For JSONForms UI schema, we need to find the Control element that matches the path
 if(uiSchema.type==="HorizontalLayout"&&Array.isArray(uiSchema.elements)){
 if(Array.isArray(uiSchema.elements)){
 constcontrol=uiSchema.elements.find((element:any)=>{
 if(element.type==="Control"){
 // Convert the scope path to match our field path

 // Fallback to default rendering if not a categorization
 return(
 <Containerstyle={style}>
 <Formlayout="vertical">
 {Object.entries(schema.properties||{}).map(
 ([key,fieldSchema]:[string,any])=>
 renderField(key,fieldSchema,localData?.[key])
 )}
 <Form.Item>
 <Button
 type="primary"
 onClick={handleSubmit}
 style={{float:"right"}}
 >
 {trans("event.submit")}
 </Button>
 </Form.Item>
 </Form>
 </Container>
 <Container>
 <Formlayout="vertical">
 <Rowgutter={16}>
 {Object.entries(schema.properties||{}).map(([key,fieldSchema])=>{
 constfieldUiSchema=uiSchema?.[key]||{};
 constcolSpan=calculateColSpan(fieldUiSchema,containerWidth);

 return(
 <Colkey={key}{...colSpan}>
 {renderField(key,fieldSchema,localData?.[key])}
 </Col>
 );
 })}
 </Row>
 <Form.Item>
 <Button
 type="primary"
 onClick={handleSubmit}
 style={{float:"right"}}
 >
 {trans("event.submit")}
 </Button>
 </Form.Item>
 </Form>
 </Container>
 );
 };

 exportdefaultReact.memo(JsonFormsRenderer);
 constcalculateColSpan=(uiSchema:any,containerWidth:number)=>{
 constcolSpan=uiSchema?.["ui:colSpan"]||{xs:24,sm:24,md:12,lg:12,xl:8};
 if(containerWidth>1200&&colSpan.xl)return{span:colSpan.xl};
 if(containerWidth>992&&colSpan.lg)return{span:colSpan.lg};
 if(containerWidth>768&&colSpan.md)return{span:colSpan.md};
 if(containerWidth>576&&colSpan.sm)return{span:colSpan.sm};
 return{span:24};
 };

 exportdefaultReact.memo(JsonFormsRenderer);
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
 tooltip:"Define custom error messages for form fields. Use __errors array for field-specific errors.",
 })
 )
 // : (
 //   children.validationState.propertyView({
 //     key: "validationState",
 //     label: trans("jsonSchemaForm.validationState"),
 //     tooltip: "Current validation state of the form fields. Shows errors and touched state for each field.",
 //   })
 // )
 }
 </Section>
 )}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,13 +15,11 @@ import {
		Steps,
		}from"antd";
		importstyledfrom"styled-components";
		importtype{JsonSchema}from"@jsonforms/core";
		importtype{JSONSchema7}from"json-schema";
		import{debounce}from"lodash";
		importdayjsfrom"dayjs";
		import{trans}from"i18n";
		importtype{
		JsonFormsUiSchema,
		FieldUiSchema,
		Layout,
		Categorization,
Expand All		@@ -30,10 +28,14 @@ import type {
		Category,
		Control
		}from"./types";
		importtype{SwitchChangeEventHandler}from"antd/es/switch";
		import{useContainerWidth}from"./jsonSchemaFormComp";

		const{ TextArea}=Input;

		constContainer=styled.div`
		constContainer=styled.div
		`
		gap: 16px;
		width: 100%;
		.ant-form-item {
		margin-bottom: 16px;
		}
Expand DownExpand Up		@@ -62,11 +64,6 @@ const Container = styled.div`
		}
		`;

		interfaceHorizontalLayout{
		type:"HorizontalLayout";
		elements:Control[];
		}

		constJsonFormsRenderer:React.FC<JsonFormsRendererProps>=({
		schema,
		data,
Expand All		@@ -78,6 +75,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
		validationState:externalValidationState,
		onValidationChange,
		})=>{
		constcontainerWidth=useContainerWidth();
		// Local state to handle immediate updates
		const[localData,setLocalData]=useState(data);
		// Track focused field
Expand DownExpand Up		@@ -116,7 +114,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
		if(!uiSchema)returnundefined;

		// For JSONForms UI schema, we need to find the Control element that matches the path
		if(uiSchema.type==="HorizontalLayout"&&Array.isArray(uiSchema.elements)){
		if(Array.isArray(uiSchema.elements)){
		constcontrol=uiSchema.elements.find((element:any)=>{
		if(element.type==="Control"){
		// Convert the scope path to match our field path
Expand DownExpand Up		@@ -666,24 +664,41 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({

		// Fallback to default rendering if not a categorization
		return(
		<Containerstyle={style}>
		<Formlayout="vertical">
		{Object.entries(schema.properties\|\|{}).map(
		([key,fieldSchema]:[string,any])=>
		renderField(key,fieldSchema,localData?.[key])
		)}
		<Form.Item>
		<Button
		type="primary"
		onClick={handleSubmit}
		style={{float:"right"}}
		>
		{trans("event.submit")}
		</Button>
		</Form.Item>
		</Form>
		</Container>
		<Container>
		<Formlayout="vertical">
		<Rowgutter={16}>
		{Object.entries(schema.properties\|\|{}).map(([key,fieldSchema])=>{
		constfieldUiSchema=uiSchema?.[key]\|\|{};
		constcolSpan=calculateColSpan(fieldUiSchema,containerWidth);

		return(
		<Colkey={key}{...colSpan}>
		{renderField(key,fieldSchema,localData?.[key])}
		</Col>
		);
		})}
		</Row>
		<Form.Item>
		<Button
		type="primary"
		onClick={handleSubmit}
		style={{float:"right"}}
		>
		{trans("event.submit")}
		</Button>
		</Form.Item>
		</Form>
		</Container>
		);
		};

		exportdefaultReact.memo(JsonFormsRenderer);
		constcalculateColSpan=(uiSchema:any,containerWidth:number)=>{
		constcolSpan=uiSchema?.["ui:colSpan"]\|\|{xs:24,sm:24,md:12,lg:12,xl:8};
		if(containerWidth>1200&&colSpan.xl)return{span:colSpan.xl};
		if(containerWidth>992&&colSpan.lg)return{span:colSpan.lg};
		if(containerWidth>768&&colSpan.md)return{span:colSpan.md};
		if(containerWidth>576&&colSpan.sm)return{span:colSpan.sm};
		return{span:24};
		};

		exportdefaultReact.memo(JsonFormsRenderer);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -483,13 +483,6 @@ let FormBasicComp = (function () {
		tooltip:"Define custom error messages for form fields. Use __errors array for field-specific errors.",
		})
		)
		// : (
		// children.validationState.propertyView({
		// key: "validationState",
		// label: trans("jsonSchemaForm.validationState"),
		// tooltip: "Current validation state of the form fields. Shows errors and touched state for each field.",
		// })
		// )
		}
		</Section>
		)}
Expand Down