Is there any example for ajv validations for jsonforms on Theia Properties

[amiths89]

I have my glsp code setup for Theia Properties using jsonforms. Currently am trying to put validations into it using ajv. But am not exactly sure how to make that connection between Ajv and the Theia properties schema files in the data service class.
In the jsonforms documentation i did come across JsonForms Middleware where we can customize the logic but again its not clear how I can make that update when using the current JsonFormsPropertyViewWidget in theia which picks the JsonForms which picks the default Middleware logic. If not this would there be a better way to implement custom validations into jsonforms

[ndoschek]

Hi @amiths89,

Thanks for reaching out!

We have a simple example you can look at, where we use the @eclipse-emfcloud/jsonforms-property-view within a Theia-based GLSP example.
You can find it here: GLSP Property View Example. Please note that it’s not updated to the latest GLSP version, but it showcases different scenarios, but it should still run as expected.

To easily integrate AJV validation (https://jsonforms.io/docs/validation), you can override the base JsonForms property widget and add the validation directly to the JsonForms instance. I added a new commit on top of the mentioned branch to briefly showcase this.
To quickly highlight the main change, here’s an example of how you can do it in a custom property view widget:

export class CustomPropertyViewWidget extends JsonFormsPropertyViewWidget {
   ...
    protected override renderForms(
        properties: object | undefined,
        typeSchema: JsonSchema | undefined,
        uiSchema: UISchemaElement | undefined
    ): void {
        this.hostRoot.render(
            <JsonFormsStyleContext.Provider value={this.getStyleContext()}>
                <JsonForms
                    data={properties}
                    schema={typeSchema}
                    uischema={uiSchema}
                    cells={vanillaCells}
                    renderers={vanillaRenderers}
                    onChange={this.jsonFormsOnChange}
                    ajv={...}
                />
            </JsonFormsStyleContext.Provider>
        );
    }
}

I hope this helps you get started with additional validation when using JsonForms for your property view. If you have any additional questions, please don't hesitate to reach out!

Best regards,
Nina

[amiths89]

Thanks @ndoschek for providing the example. I tried debugging into the example but it looks like, even in the example the new Custom renderForms are not getting control, it still seems to be calling the renderForms inside JsonFormsPropertyViewWidget.

Sorry should have mentioned this earlier i was trying a similar thing with a custom widget and was having the same issue where my new renderForms werent getting triggered.

[ndoschek]

Hi again @amiths89,
Oh, sorry about that! I didn’t pay close enough attention to the correct binding. I’ve force-pushed the branch, and it should work now.

Best regards,
Nina

[amiths89]

This is perfect. Thanks a lot @ndoschek