Questsions

[fullStackDataSolutions]

Hello,

These are more questions than issues, as there's not a lot of data in the Wiki section.

I have been developing with React for about 6 weeks, but have been doing web development for 8 years. So I'm familiar with many of the paradigms, but I don't have a full concept of how React implements everything. If I ask some trivial questions please bear with me.

I'm making an application which is using some fairly complex forms. I'm already using Redux-Form and Reactstrap, and want to load all form data via json files. But I have quite a bit of conditional logic in my form in addition to a typeAhead filed which is loading over 300 different options.

I'm not seeing an implementation of conditional logic here, am I just missing it? I have several radio buttons which load data under them when selected.

For the typeAhead I'm using react-bootstrap-typeahead, but I could implement this on my own, and may end up doing that as I'm having some minor issues with react-bootstrap-typeahead when used with Redux-Form, that will be annoying to the end user. However, if I'm using react-jsonschema-vis, I'm not sure how easy it would be to create a typeAhead feature, do you have any advice on this? As another point, I'm using the typeAhead to load fields based on what is selected, and given that there are 300 options, I'm sure you can see why I would want to do this with jSon.

Best,

Andrew

[nikordaris]

Hey Andrew,

So this lib is an un-opinionated implementation inspired by react-jsonschema-form due to the pain it would take to integrate it with redux-form. With that said, it doesn't build in all the nice features that comes with being an opinionated library. In order to get conditional logic to work with this lib you basically have to create a component at the Object level and override the implementation of the children.

If you look at CardContainers you will see how it is calling the SchemaVis component again on the schema so the children will get parsed. What you can do instead is iterate through the schema children properties yourself and conditionally run each property through SchemaVis. This gives you control over which schema properties get rendered and how.

If you discover a clever reusable way of doing conditional rendering of forms this way then you can always publish your object Component for others to use as well. I didn't have a use case for this originally so I only built components that I needed at the time.

[fullStackDataSolutions]

@nikordaris

Thank you for the prompt response. I've actually started implementing my own system and frankly am not familiar enough with your set-up to really make it a faster approach.

But I'm setting a property in the JSON file called "dependencies", looks like below:

`
"dependencies": {
"jobSpec": // this is the name of the field that will trigger the dependent field
{"id1": [ // "jobSpec" is a drop down box, selected value of "id1" causes below to appear
{
"type": "url",
"labal": "Content URL",
"placeholder": "http://www.google.com/",
"id" : "content_url",
"name": "content_url",
"grouping": 1,
"is_required" : 1,
"validation_message" : "The provided content URL is invalid. Please enter a valid URL.",
"help_text" : "",

        },

`

I think this is a workable solution as long as I come up with a way to ensure fields appear where they are supposed to appear.

[nikordaris]

This is how react-jsonschema-form does dependencies. It's definitely worth adding to this lib, I just don't have time for it right now. Good luck with your own implementation!

[fullStackDataSolutions]

Thanks.

Yes I've used the react-jsonschema for ideas, and I am doing a similar but simpler implementation. I'm using the name of a field to be able to select the dependent fields based on what the the value is in the field.

{form.dependencies[from.field.name].[from.field.name.value]}

Would give all fields connected to the value of the field.

[fullStackDataSolutions]

I've created this and thought I would share my JSON setup (this is a simple subset of it):

[
{
"id": "browserSurvey",
"title": "Survey",
"numPages": 7,
"cols": 1,
"properties": [
{
"type": "radio",
"label": "Do you use the Browser?",
"placeholder": "",
"id": "BrowserUse",
"name": "BrowserUse",
"col": 1,
"page": 2,
"is_required": 1,
"validation_message": "Do you use this feature?",
"help_text": "",
"validation_pattern": "",
"enable_calculation": null,
"enum": [
{
"id": "BrowserUse1",
"label": "Yes",
"value": "yes"
}, {
"id": "BrowserUse2",
"label": "No",
"value": "no"
}
]
}
]
}
],
"dependencies": {
"BrowserUse": {
"yes": [
{
"type": "radio",
"label": "How often do you use the Browser? ",
"placeholder": "",
"id": "BrowserOften",
"name": "BrowserOften",
"col": 1,
"page": 2,
"is_required": 1,
"validation_message": "Please select at time period",
"help_text": "",
"validation_pattern": "",
"enable_calculation": null,
"enum": [
{
"id": "BrowserLessThanWeek",
"label": "Less than once a week",
"value": "lessThanWeek"
}, {
"id": "BrowserOncePerWeek",
"label": "Once Per Week",
"value": "oncePerWeek"
}, {
"id": "BrowserOncePerDay",
"label": "Once Per Day",
"value": "oncePerWeek"
}, {
"id": "BrowserOncePerHour",
"label": "Once Per Hour",
"value": "oncePerHour"
}, {
"id": "BrowserAllTheTime",
"label": "All the time",
"value": "allTheTime"
}
]
}
}
}
]
`

`