Pass form Object to MuiForms and it should load values in the form.

[ahmedsakri]

Is your feature request related to a problem? Please describe.
I want to pass some values coming from API to the MuiForm tag. I am not able to do so currently. In current scenario. I have to pass it in the value key inside meta object.

Note: this is different from default Values.

Describe the solution you'd like

Something like below will be great.

<MuiForms
    schema={formSchema}
    onSubmit={(formData) => {
        console.log(formData, "Form Submitted Data");
    }}
    onChange={(formData) => {
        // console.log(formData, "Form Data");
    }}
    form={
        type: 'sampleActivity'
        properties: {
            name: "default_name",
            retry_config: {
                retry: 0,
                delay: 0,
                backoff: 1,

            }
        }
    }
/>

Describe alternatives you've considered
I tried searching for alternatives but could not find one.

Additional context
Add any other context or screenshots about the feature request here.

[ahmedsakri]

@manojadams any thoughts on above?

[manojadams]

@ahmedsakri Thank you for your suggestion.

Can you check the following questions:

• Would like to know any problem you are facing with the current approach for passing input data?
• Does the schema seems complex to understand?

[ahmedsakri]

@manojadams Thanks for the quick reply, below are my observations:

1. Would like to know any problem you are facing with the current approach for passing input data?
   Answer: So, what i am currently doing is i am saving the form Object that i recieve directly in the API. So, in the future, if user wants to open that particular entry of the form what i have is the schema and the form object. With current approach, i will need to write a parser on the fly for the same which will inject the values in the value key inside the meta object.

2. Does the schema seems complex to understand?
   Answer: The schema is quite easy to understand, it's just of the above scenario. I wanted it to be handled. The other library does this functionalities too:

• https://rjsf-team.github.io/react-jsonschema-form/
• https://jsonforms.io/examples/basic/

If you have any alternate approach, I am open to hear and implement this. Thanks a ton!

[ahmedsakri]

Also, @manojadams If you can look into this ticket. It will be very much helpful for me, as i need it badly at this moment.

[manojadams]

Ok. Instead of passing a form object, we can pass a similar object (key, value pair) that we are getting on submit event.
Will this solve your problem?

[ahmedsakri]

Ok. Instead of passing a form object, we can pass a similar object (key, value pair) that we are getting on submit event. Will this solve your problem?

Yes, this is exactly what i need!

[ahmedsakri]

@manojadams I would like to follow-up with respect to this.

[manojadams]

@ahmedsakri It is WIP. You can expect a fix by eod.

[ahmedsakri]

@manojadams Any luck of releasing this?

[manojadams]

@ahmedsakri It will take some more time unfortunately.
By when do you need this?

[ahmedsakri]

@manojadams actually it would be nice if it is targeted by tomorrow. Currently #54 is what i can look forward to and complete the development.

[manojadams]

I have pushed the changes to following branch but testing is pending.
https://github.com/manojadams/metaforms-core/tree/feature-54

You can expect by eod once I am back from office.

[ahmedsakri]

I have pushed the changes to following branch but testing is pending. https://github.com/manojadams/metaforms-core/tree/feature-54

You can expect by eod once I am back from office.

Thanks @manojadams Looking forward to it!

[manojadams]

@ahmedsakri This feature has now been added with following version:
@manojadams/[email protected]

Example usage:

https://codesandbox.io/p/sandbox/mui-forms-load-initial-form-data-mnplzh?file=%2Fpackage.json%3A13%2C5

[manojadams]

Sample form data

import MuiForms from "mui-forms";
import React from "react";
import schema from "./schema.json";

function InitialForm() {
  return (
    <MuiForms
      data={{
        basic_details: {
          first_name: "Bulma",
        },
        more_details: {
          personal_details: {
            last_name: "Bulmamoti",
          },
        },
      }}
      schema={schema}
      onSubmit={(formData) => {
        console.log(formData);
      }}
    />
  );
}

export default InitialForm;

[ahmedsakri]

Sample form data

import MuiForms from "mui-forms";
import React from "react";
import schema from "./schema.json";

function InitialForm() {
  return (
    <MuiForms
      data={{
        basic_details: {
          first_name: "Bulma",
        },
        more_details: {
          personal_details: {
            last_name: "Bulmamoti",
          },
        },
      }}
      schema={schema}
      onSubmit={(formData) => {
        console.log(formData);
      }}
    />
  );
}

export default InitialForm;

Thanks @manojadams!