VanillaRenderer shows strange Layout

General
1

I am implementing a JSONForm within a GLSP Moderler Client. I am using version 3.0.0-beta.2.

When I use the most simple implementation with the vanillaRenderers and no extra UISchema the layout looks like expected:

		ReactDOM.render(
			<JsonForms
				data={bpmnPropertiesData}
				cells={vanillaCells}
				renderers={vanillaRenderers}
				onChange={({ errors, data }) => this.setState({ data })}
			/>,
			this.bodyDiv
		);

(I can not show the image as I am a new user (interesting restriction)

But as soon as I try to use a UISchema - e.g with a horizontal layout - the result becomes very strange:

		ReactDOM.render(
			<JsonForms
				data={bpmnPropertiesData}
				schema={bpmnPropertiesSchema}
				uischema={bpmnPropertiesUISchema}
				cells={vanillaCells}
				renderers={vanillaRenderers}
				onChange={({ errors, data }) => this.setState({ data })}
			/>,
			this.bodyDiv
		);

the schema:

{
	"type": "HorizontalLayout",
	"elements": [
		{
			"type": "Control",
			"scope": "#/properties/name"
		},
		{
			"type": "Control",
			"scope": "#/properties/category"
		},
		{
			"type": "Control",
			"scope": "#/properties/documentation"
		}
	]
}

the result:

image
image1017Ă—173 4.74 KB

Can someone give me a hint what I am doing wrong? It looks to me like the corresponding CSS is missing for some reason?

===
Ralph

2

It seems that if I add a css like the one from the vanilla/example/example.css the things become better.

I wonder why the vanilla renderer did not provide a kind of more optimized default CSS?
From where can I get information which css classes are used from the renderer and how they should behave?

3

Hi @rsoika,

The React Vanilla renderer set does not include any CSS by default. It just applies CSS classes to the elements. You can take a look here for an example stylesheet.

We also have a JSON Forms based property view for Theia. There we use this stylesheet. However it’s much more specalized and for example hard codes table elements as we always want to render in a table-like format there.

4

Hi,
thanks for your response.
Yes I need a stylesheet for Theia integration. But the one you mentioned does not include horizontal or categorized layout :frowning:
I am not the HTML-Designer and so I invest a lot of time to create bad CSS styles. Should not JSONForms project provide such a stylesheet at all?

===
Ralph

5

Hi @rsoika,

the first stylesheet I linked is a generic one and should work in any environment, including Theia. It also includes support for layouts.

6

In general we’re definitely looking to improve the JSON Forms in Theia integration story. This could range from a special stylesheet for Theia (for example to integrate Theia colors) for React Vanilla to a special Theia Material UI ThemeProvider for React Material (to also integrate colors and maybe align the styling a bit more to “traditional” Theia UX).

At the moment we support many more use cases with the React Material renderer set than the React Vanilla renderer set. So you might want to integrate that one instead. Of course this depends on your (UX) requirements.

Let me know if you run into any problems with the React Vanilla stylesheets.

7

I have now created a JsonForms Vanilla Stylesheet which integrates better into Thea. Especially the categorization tabs.

2022-05-31_23-20
2022-05-31_23-201467Ă—864 68.8 KB

You can checkout the source file here: jsonforms-thea.css

1 Like
8

Nice! I like it :+1: