@radekmie ,
I have a form with a schema of type JSONSCHEMAand I have at the root of the schema a field of type array that contains itself a list of fields (let's name a field of those SnapId). I want to replace SnapId which is a string type by a <SelectField/> but when I omit that SnapId and replace it by a <SelectField name="snapId" options ={opts}/> the console js throws an error ..(snapId not known in the schema because I think it's because this field is not at the root of the schema so he can't recognize a subfield of an array type .. I don't know how to point to SnapId as a field of an array type that itself is at the root of the schema KNOWING <SelecField /> require the prop name.. I don't know if you get my point ..
Thank you
@radekmie,
here is the schema :
const schema = {
CreateImage: {
properties: {
Architecture: {
description: 'the architecture',
type: 'string',
},
BlockMappings: {
description: 'One or more block mappings.',
items: {
description: 'One or more parameters .',
properties: {
Tpu: {
description: 'Information about the Tpu',
properties: {
deleteTpu: {
description: 'Set to `true` by default',
type: 'boolean',
},
Ips: {
description:
'The number of operations per second',
type: 'integer',
},
SnapId: {
description:
'The ID of the snap ',
type: 'string',
},
VolumeSize: {
description:
'The size of the volume',
type: 'integer',
},
VolumeType: {
description:
'The type of the volume',
type: 'string',
},
},
type: 'object',
},
DeviceName: {
description: 'The name of the device.',
type: 'string',
},
VirtualDeviceName: {
description: 'The name of the virtual device ',
type: 'string',
},
},
type: 'object',
},
type: 'array',
},
SourceImageId: {
description: 'The ID of the image ',
type: 'string',
},
VmId: {
description:
'The ID of vm - the image.',
type: 'string',
},
},
type: 'object',
},
};As you see, CreateImageis the schemaused to display the corresponding form. This schema hasBlockMappingsthat is an array that contains many items. Each item has many fields (Tpu, Ips, snapId etc.) and my goal is to replace all fields ending with Id of type stringby a <SelectedField name="snapId" /> by omiting for example snapId and replacing it by <SelectedField name="snapId" /> . However, as this field snapId is not at the root of the schema (like sourceImageId), this name field is not recognized by JsonSchemaBridge and throw the error : snapId is not found in the schema. I don't know how to point out to snapIdbased on that schema ... is there a way to do something like <SelectField name='BlockMappings.items.properties.Tpu.SnapId' />but I know this one does not work ...
Your try was very close; try BlockMappings.$.Tpu.SnapId. We do use $ to name any array element. However, this won't work as there's no information about the number of them. In this case, you could do BlockMappings.0.Tpu.SnapId to render only the first one (or 1 for the second, etc.). This can be combined with ListField, which will replace $ for each element.
Another way would be to specify the component in the schema, using uniforms: { component: SelectField }, which will be used by default AutoField.
uniforms: { component: SelectField } in the schema, can you pls give me an example of it in my schema above. Also, I don't know how to use ListField combined with BlockMappings.0.Tpu.SnapId ? Sorry, I'm confused with all these options ..
@radekmie, I used the 2nd option then when I click on the button add (+) of BlockMappings array the console throws this error :
Uncaught TypeError: Cannot read property 'map' of undefined
at renderSelect (SelectField.js:16)
at Select (SelectField.js:23)What is happening here ? Thank you.
@radekmie cool it's working Thank you ! however, when I followed
<ListField name="BlockMappings">
<ListItemField name="$">
<Autofield name ="Tpu.Ips" />
<Autofield name ="Tpu.VolumeSize" />
<SelectField name="Tpu.SnapId" />
</ListItemField>
</ListField>The labels of those fields are not anymore displayed, but only the fields. I don't know why ..
@radekmie , if you are talking about this link :
SnapId: { description: 'The ID of the snap ', type: 'string', component: SelectField },as I have my base schema as a json file, When I add SelectField it is not recognized .. So I added quotes to SelectField :
SnapId: { description: 'The ID of the snap ', type: 'string', component: 'SelectField' },to bypass the error. After then, I've got an error something like : <SelectField /> should be in camelCase .. seems like Autofield does not recognize this as a uniforms field
that's why I didn't go further with this solution .. if there is a workaround it'd be better
SelectField to be displayed in the form so it is hidden in the form when I add component property to the schema of SnapId index.js:1 Warning: The tag <SelectField> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.index.js:1 Warning: <SelectField /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in SelectField (created by AutoField)
in AutoField (created by Nest)component: SelectField (with a corresponding import above), not component: 'SelectField'. And by link I meant https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions.
@radekmie; here here the link of reproductions :
https://codesandbox.io/live/2gVP1
or
https://codesandbox.io/s/boring-hellman-17txv
Same behavior of not showing labels on BlockMappings fields ..
ListItemField removes label of its children - usually it is a number (index). Wrap it in NestField: <NestField name="Tpu">
<AutoField name="deleteTpu" />
<AutoField name="Ips" />
<SelectField name="SnapId" options={choices} />
<AutoField name="VolumeSize" />
<AutoField name="VolumeType" />
</NestField>
@danyhiol Which version exactly? Can you reproduce it on https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions?
I finally solved the issue just after posting the question. I forgot to return the model in modelTransform
So my app look like this: Parent(modelTransform defined) > FirstChild(modelTransform passed) > Form(modelTransform used). So the Parent defined the function, and pass it to the first child which then pass it to the Form.
In the parent component, I make use of the React context API which works well inside the parent component. When used inside the modelTransform function defined in the parent, the values are changed inside the modeltransform, but not globally. I tried different mean but realized that any global change made inside the parent modelTransform to a global constant, does not take effect. I may be mising something here, but i just can't understand why this is happening.
function parent() {
const { value, setValue } = useContext(SomeContext);
...
const modelTransform = (mode, model) => {
if (mode === 'form') {
...
setValue(model.somefield); <- this does not work.
}
}
...
return ( <FirstChild handleModelTransform={modelTransform} ... /> )
}
forwardRef - it depends on your case. https://reactjs.org/docs/refs-and-the-dom.html
Here's the code for the page that works fine under 2.6.5 but breaks under 3.0:
The master branch contains the working code under 2.6.5:
https://github.com/ics-software-engineering/meteor-application-template-react
The uniforms-3.0 branch contains the broken code. The only difference is app/package.json:
https://github.com/ics-software-engineering/meteor-application-template-react/tree/uniforms-3.0
Thanks for any help you can provide to point me in the right direction
@philipmjohnson I'll have to emphase it in the changelog, but it's one of v3.0.0-alpha.3 changes:
Breaking: Removed
createSchemaBridge. This includes removal ofBaseForm.state.bridge,checkon all bridges, and the automatic bridge creation for SimpleSchema. For motivation and more insigths see vazco/uniforms#718.
new SimpleSchema2Bridge(schema) manually.
Unsupported field type: String! for the single field in the schema. Funny thing is that the example works in the uniforms playground.
new GraphQLBridge(buildASTSchema(parse(`
type Log {
title: String!
}
type Query { anything: ID }
`)).getType('Log'), function (model) {}, {})<AutoForm>
graphql@15 but uniforms are not yet updated. I mean, it'll for 99.9% just work, but due to the way how npm resolves modules, your type (got from getType) is not an instance of the same type in uniforms, because uniforms import a separate copy of graphql@14. Please file an issue and we'll take care of it in the following week.