Are there any CRUD examples of using JSONForms using RESTful API

General
1

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!

[original thread by Ralph Lance]

2

Hi @ralph-lance(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.

3

[Ralph Lance]

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!