menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

Are there any CRUD examples of using JSONForms using RESTful API

January 27, 2021 at 9:14pm

Are there any CRUD examples of using JSONForms using RESTful API

January 27, 2021 at 9:14pm
I'm new to JSONForms, have been though the tutorials using create-react-app, and can follow the single form handling, when the schema, uischema and data are static files in the react project, like all the demos. We have a legacy application that can generate our Swing-based forms dynamically and manage standard CRUD operations and data persistence. I would like to try to feed JSONForms' schema and uischema dynamically, while interfacing per RESTful services to the backend, like a persistence API.
Can the schema and uischema objects be told to get what they need from a RESTful endpoint and control events trigger RESTful API operations? If so, does anyone have examples of doing this? Or a CRUD example in this direction? I learn pretty good by example.
Thank you!

January 28, 2021 at 11:00am
Hi (ralph-lance), JSON Forms itself is primarily intended for rendering the form. CRUD operations are usually handled outside of it, by the application itself. There you can employ your favorite frameworks or for example just use Javascript's fetch.
Example:
const App = () => {
const [appState, setAppState] = useState({ type: 'loading' });
const [data, setData] = useState();
const [schemas, setSchemas] = useState();
useEffect(() => {
fetch('http://example.com/xyz')
.then((response) => response.json())
.then((responseData) => {
setData(responseData.data);
setSchemas(responseData.schemas);
setAppState({ type: 'showForm' });
})
.catch((error) => {
setAppState({ type: 'error', error });
});
}, []);
if (appState.type === 'loading') {
return <div>Loading...</div>;
}
if (appState.type === 'error') {
return <div>Error: {appState.error}</div>;
}
const sendData = () =>
fetch('http://example.com/xyz/data', {
method: 'PUT',
body: JSON.stringify(data),
});
return (
<>
<JsonForms
data={data}
schema={schemas.schema}
uischema={schemas.uiSchema}
onChange={({ data }) => setData(data)}
/>
<button onClick={() => sendData()}>Send Data</button>
</>
);
};
Note that this is only a very rough showcase to demonstrate the underlying principles of how JSON Forms can be combined with CRUD. It misses proper error handling, it can't easily be tested, there is no kind of validation, defensive programming, it has no configuration, authentication etc.
I understand. I'm taking baby steps with all this (for me new stuff) and your gracious example will help with the next step. Danke Stefan!