Many of the libraries in package.json are deprecated. Additionally, some code examples are also OBE. For example, rule conditions no longer use type and expectedValue properties and were replaced by schema.

As create-react-app has added support for TS beginning with 2.x.x we also should think about making use of TS within our seed app.

Investigate why horizontal scrollbar appears and potentially fix.

Also, there is no examples and documents how to use schema based conditions, please can you provide how to use it with master branch code of this repo.

Steps to reproduce:

1. clone master (version 2.2.2)
2. install vanilla renderer instead of material and adjust index.ts
3. copy schema/ui-schema/data from https://jsonforms.io/examples/array
4. start
   Result: no delete buttons for array like in the material version

In the Rating example the label "Rating" is hard coded:
https://github.com/eclipsesource/jsonforms-react-seed/blob/3ed669c5e6434919b090c7c9981f3c9a643c125c/src/Rating.tsx#L16C1-L17C1

How would I get the label from the jsonschema?

Would be nice to get the standalone version with the test execution visible

Cypress tests broke with the update to 2.3.0.

current version only user material v4

Let's say I have a input in my uischema and it is rendered using Actions.init(data, schema, uischema),

If i change value inside input box and want to get it's value and set state accordingly, how I can do this?

Running these: https://github.com/eclipsesource/jsonforms?tab=readme-ov-file#getting-started

Produces

# ryanavery at Ryans-MacBook-Pro.local in ~/jsonforms-react-seed on git:master ● [14:13:24]
→ npm run start

> [email protected] start
> vite preview --port 3000

/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js:59
		throw new Error(
		      ^

Error: Cannot find module @rollup/rollup-darwin-arm64. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
    at requireWithFriendlyError (/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js:59:9)
    at Object.<anonymous> (/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js:68:76)
    at Module._compile (node:internal/modules/cjs/loader:1467:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1551:10)
    at Module.load (node:internal/modules/cjs/loader:1282:32)
    at Module._load (node:internal/modules/cjs/loader:1098:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
    at cjsLoader (node:internal/modules/esm/translators:318:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:258:7) {
  [cause]: Error: Cannot find module '@rollup/rollup-darwin-arm64'
  Require stack:
  - /Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
      at Module._load (node:internal/modules/cjs/loader:1045:27)
      at TracingChannel.traceSync (node:diagnostics_channel:315:14)
      at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
      at Module.require (node:internal/modules/cjs/loader:1304:12)
      at require (node:internal/modules/helpers:123:16)
      at requireWithFriendlyError (/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js:41:10)
      at Object.<anonymous> (/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js:68:76)
      at Module._compile (node:internal/modules/cjs/loader:1467:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1551:10) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/Users/ryanavery/jsonforms-react-seed/node_modules/rollup/dist/native.js'
    ]
  }
}

Node.js v22.4.1

when json schema contains:
"properties": {
"labels": {
"type": "array",
"items": [{ "type": "string" }]
},
where, for example, matching data could be:
{
"labels" : ["257","340"],
},
Then, for this array, default renderer displays:
"No applicable renderer found."

hi, how can I use it to display image with custom height/width and border or change the location of the form or entire object or am I asking too much ?

Hi,
First of all, thanks for building and publishing this great frame work.
I got a newbie question.
I have this json in shcema.json and ui.json.

How do I make a field inside array "Required" so App will to in-line validation if that field is not entered.
Thanks
Sabbir
shcema.json

{
	"type": "object",
	"properties": {
		"schedules": {
			"type": "array",
			"minItems": 1,
			"maxItems": 4,
			"items": {
				"type": "object",
				"properties": {
					"ODKey": {
						"type": "string",
						"enum": ["OD1",
						"OD2",
						"OD3",
						"OD4"]
					},
					"DepAirportCode": {
						"type": "string",
						"maxLength": 3,
						"minLength": 3
					},
					"ArvAirportCode": {
						"type": "string",
						"maxLength": 3,
						"minLength": 3
					},
					"FlightDate": {
						"type": "string",
						"format": "date"
					}
				}
			}			
		}
	}
}

ui.json

{
	"type": "VerticalLayout",
	"elements": [{
		"type": "Control",
		"label": "Origin, Destination Port and Flight Date (Maximum 4)",
		"scope": "#/properties/schedules"
	}]
}

step to reproduce:

1. clone seed repo
2. npm ci
3. npm start

node: 16.18
OS: windows 11
Chrome 114.0.5735.199

I wish

to support yaml syntax for uischema.yaml and schema.yaml

Note

I'll try to make a PR.

jsonforms.io is down at the moment. Cam some one look that up.

I'm trying to use your forms and they're great.
But I Have a Question: Could I use more complex json forman like:

{
  "data": {
    "getTaskForm": {
      "task": "UserTask",
      "name": "clientUser",
      "formKey": "testId",
      "fields": [
        {
          "id": "firstName",
          "label": "Fiirst Name",
          "type": "string",
          "default": "",
          "enum": null,
          "constraints": null,
          "properties": [
            {
              "property": "materialType",
              "value": "TextField"
            }
          ]
        }
      ]
    }
  }
}

Thanks a lot for answer.

It mostly describes the redux setup. It should first describe the standalone setup and usage, then redux.

If you try to launch seed app on code sandbox it compiles with errors.
https://codesandbox.io/embed/github/eclipsesource/jsonforms-react-seed/tree/master/
https://codesandbox.io/s/github/eclipsesource/jsonforms-react-seed/tree/master/

Will need to fix issues in master so that it compiles correctly out of the box.

Moved from eclipsesource/jsonforms#914.

After cloning the repository, I got a blank page. It appear that since src/index.tsx is missing, the page does not load.
Also, it renders the index.html from the root folder instead of the one in public/index.html.

What to do now?

Issue:- When we are creating custom renderers, jsonforms internally binds custom renderer with uischema.json (scope) and data.json (field name)

Expectation:- Instead of binding both data.json and uischema.json can we only bind our renderer to uischema.json

The current seed contains the following downstream dependencies:

• @babel/runtime
• @material-ui/core

They should be removed once they are included by immediate dependencies (e.g. @jsonforms/material-renderers)

When running this command , an error occurred
..\jsonforms\jsonforms-editor>npm run build

build
lerna run build

lerna notice cli v4.0.0
lerna info Executing command in 2 packages: "npm run build"
lerna ERR! npm run build exited 1 in '@jsonforms/editor'
lerna ERR! npm run build stdout:

@jsonforms/[email protected] build ..\jsonforms\jsonforms-editor\jsonforms-editor
rimraf dist && rollup --config rollup.config.ts

lerna ERR! npm run build stderr:
'rollup' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.22621
npm ERR! argv "..\nodejs\node.exe" "..\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v18.14.2
npm ERR! npm v2.15.12
npm ERR! code ELIFECYCLE
npm ERR! @jsonforms/[email protected] build: rimraf dist && rollup --config rollup.config.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @jsonforms/[email protected] build script 'rimraf dist && rollup --config rollup.config.ts'.
npm ERR! This is most likely a problem with the @jsonforms/editor package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rimraf dist && rollup --config rollup.config.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @jsonforms/editor
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls @jsonforms/editor
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! ..\jsonforms\jsonforms-editor\jsonforms-editor\npm-debug.log
lerna ERR! npm run build exited 1 in '@jsonforms/editor'
npm-debug.log

Hi , starting from "seed" https://jsonforms.io/docs/getting-started , change the json schema
"due_date": { "type": "string", "type": ["string", "null"], "format": "date" },
adding "null" to the types array.
As result, the icon used to display calendar popup, disappear.
Thanks in advance
MM

Sorry, it's me again.

I am trying to add a form with the following schema:

const schema = {
  type: 'object',
  properties: {
    ...otherFields,
    docNo: {
      type: 'integer', // or 'number'
      title: 'Document Number',
    },
  },
}

When I enter invalid values (as in: letters) for docNo the following happens

• first invalid value: onChange is triggered with errors == [] and docNo == undefined
• subsequent invalid values: onChange is not triggered again

If I enter something valid in other fields, onChange is triggered again with errors == [] and docNo == undefined

As soon as I delete the invalid values and enter something valid, e.g. '123', the onChange passes the correct value for docNo.

Other validations work correctly.

Here's a minimal example from my repo:

import { materialCells, materialRenderers } from '@jsonforms/material-renderers'

import AppFrame from '../../layouts/AppFrame'
import ContentAreaLayout from '../../layouts/ContentAreaLayout'
import { JsonForms } from '@jsonforms/react'
import { useState } from 'react'

const schema = {
  type: 'object',
  properties: {
    issuedBy: {
      type: 'string',
      title: 'Issuer',
    },
    issueDate: {
      type: 'string',
      format: 'date',
      title: 'Issue Date',
    },
    expiryDate: {
      type: 'string',
      format: 'date',
      title: 'Expiry Date',
    },
    docNo: {
      type: 'integer', // same with 'number'
      title: 'Document Number',
    },
  },
}

const defaultData = {
  issuedBy: 'Ministry of Foreign Affairs',
  issueDate: '2015-01-01',
  expiryDate: '2015-12-31',
  docNo: 123,
}

export default function Page() {
  const [currentData, setCurrentData] = useState(defaultData)
  return (
    <AppFrame pageTitle="JsonFormTestPage">
      <ContentAreaLayout>
        <div>
          <JsonForms
            renderers={materialRenderers}
            cells={materialCells}
            data={currentData}
            schema={schema}
            onChange={({ data, errors }) => {
              console.log({ data, errors })
              setCurrentData(data)
            }}
          />
        </div>
      </ContentAreaLayout>
    </AppFrame>
  )
}

Screenshot of the console when entering the first invalid value:

I am using:

"@jsonforms/core": "^3.1.0",
"@jsonforms/material-renderers": "^3.1.0",
"@jsonforms/react": "^3.1.0",
"@mui/icons-material": "^5.11.16",

Am I missing something? My expectation is that the errors object in onChange contains an error as soon as I start typing letters into a numbers field and the data object contains the invalid values for docNo.

2.3.0 is going to be a breaking change. We need to update seed repo to accommodate such change.

There are several TODOs in the description (missing links).
Further it would be nice to know how to access the seed application in a browser after launching it

Hi, I installed this package to fail to launch the app.
It says the following error.

./node_modules/@material-ui/lab/Slider/Slider.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/classCallCheck' in '/path/to/jsonforms-react-seed/node_modules/@material-ui/lab/Slider'

MacOS X 10.12.6
Node.js v8.9.0
npm 5.5.1

Hello,

Trying to get this to work with one of our json-schemas. Its a valid schema and works fine in vscode with autocomplete, validation etc.

Here is the codesandbox example based on this repo.

https://codesandbox.io/s/optimistic-turing-hjo1w?file=/src/App.tsx