uischema.json not taken into account

[slah-kamel]

Hi Krasimir,

I am trying to use the JSON Forms Vuetify Tooling vscode extension in my project to help me edit some of my JSON files. The extension is installed successfully in my VS Code environment.

To understand how the extension works, I created a folder called "basic-example" in my project and added all the files from the "Basic" example from here: https://github.com/kchobantonov/jsonforms-vuetify-webcomponent/tree/master/packages/jsonforms-vuetify-webcomponent/src/examples/basic

Then I right-clicked on the "schema.json" file and used the "JSONForm Vuetify: Show Preview" menu to start editing some data.

The form displayed does not pickup any of the settings configured in the same folder: the "uischema.json" is not applied; the "preset.json" does not have any effect (i.e. if I change the theme dark to true, it does not reflect on the form), etc.

Can you please let me know what I did wrong?

A screenshot of the results is attached. Thanks a lot! -Salah

[kchobantonov]

hi @slah-kamel , make sure that you have version 0.0.6 of the tool and for me I just uninstall and then install that again just to make sure that the example in the basic folder is still working and it does for me. The steps that you describe that you try to open the tool with right click on the schema.json file is exactly the same. Keep in mind that the tool will render any data that is in the data.json file but it will not save any changes that you do in the form after that - the tool is just for preview how the jsonform will look like and eventually populate some initial data from the data.json file but there is no at the moment option when you change the data via the form to save that in the data.json file. The tool only reads the files and will never alter them.

Here is how it looks like when I open the schema.json file via the tooling

and here is when I change the preset to use the dark mode

Note that the tooling view will refresh automatically upon any saved changes in the files.

[slah-kamel]

Thanks for the quick turnaround, Krasimir.

Unfortunately, uninstalling and reinstalling (with vscode reload) didn't solve the issue. I'm indeed using 0.0.6 and the extension still does not recognize any of the files sitting besides the schema.json (preset.json, data.json, uischema.json, etc.)

Is there a log that can help me troubleshoot the issue on my side without bothering you?

Thanks! -Salah

On Mon, Jan 15, 2024 at 2:39 AM Krasimir Chobantonov < @.***> wrote:

hi @slah-kamel https://github.com/slah-kamel , make sure that you have version 0.0.6 of the tool and for me I just uninstall and then install that again just to make sure that the example in the basic folder is still working and it does for me. The steps that you describe that you try to open the tool with right click on the schema.json file is exactly the same. Keep in mind that the tool will render any data that is in the data.json file but it will not save any changes that you do in the form after that - the tool is just for preview how the jsonform will look like and eventually populate some initial data from the data.json file but there is no at the moment option when you change the data via the form to save that in the data.json file. The tool only reads the files and will never alter them.

— Reply to this email directly, view it on GitHub https://github.com/kchobantonov/jsonforms-vuetify-webcomponent/issues/2#issuecomment-1891171459, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5UDIWDG2QG7XZWEM7WDP2TYOSCFLAVCNFSM6AAAAABB2JLPH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJRGE3TCNBVHE . You are receiving this because you were mentioned.Message ID: @.*** com>

[kchobantonov]

From vscode open "Developer: Open Webview Developer Tools" that is in "Command Palette..." while the jsonforms viewer is opened. Then in the new window locate the HTML element "vuetify-json-forms" that have an id attribute with the same name. Then make sure that you can see the schema, uischema and all other attributes that are matching the content of the corresponding files like schema.json, uischema.json and etc. If for some reason the attribute in the vuetify-json-forms element is not there then the issue is that the component itself does not have that information which means that the files somehow it is either was not there or there might be similar location issues - I have tested that under windows as well as under WSL 2 with ubuntu and in both the plugin was working fine. The same goes with the Mac OS but I'm not sure about your exact environment.

Also under the console you can check for any javascript errors if any

[slah-kamel]

Thanks so much for the follow-up here.

1. Looking at the html element with Web Developer Tools, I can confirm that the vuetify-json-forms has a schema attribute but no uischema attribute... Here is how it looks in my environment: <vuetify-json-forms id="vuetify-json-forms" schema="{... the schema.json file here..} config=" {"restrict":true,"trim":false,"showUnfocusedDescription":false,"hideRequiredAsterisk":true}" default-preset="{"theme":{"dark":false}}"

   As you can see, it looks like the files are actually not picked up.

2. More importantly, a bunch of errors are thrown in the console indicating that most of the javascript map files of the extensions failed to load. See screenshot below. [image: image.png]

And here is what I have in the folder that URLs are indirectly pointing to (after the https://file+.vscode-resource.vscode-cdn.net) [image: image.png]

I certainly did something wrong, but I really don't know what... I am using vscode on Windows. Extensions are installed by default in my user profile: C:\Users\.vscode\extensions.

I'm attaching an export of a super simple project with a simple schema.json and a preset.json file that simply turns the theme into dark. For whatever weird reason, it looks like the extension is not picking up the bootstrapping context files at the root or it gets confused with the location of files, or vscode is playing tricks on us... I also attached my global setting.json file in case it helps... Note that I tried to relaunch vscode as an Admin in case it was related to any potential file patch security but it didn't solve the problem.

Thanks again for your great help on this ! -Salah

On Tue, Jan 16, 2024 at 5:12 AM Krasimir Chobantonov < @.***> wrote:

From vscode open "Developer: Open Webview Developer Tools" that is in "Command Palette..." while the jsonforms viewer is opened. Then in the new window locate the HTML element "vuetify-json-forms" that have an id attribute with the same name. Then make sure that you can see the schema, uischema and all other attributes that are matching the content of the corresponding files like schema.json, uischema.json and etc. If for some reason the attribute in the vuetify-json-forms element is not there then the issue is that the component itself does not have that information which means that the files somehow it is either was not there or there might be similar location issues - I have tested that under windows as well as under WSL 2 with ubuntu and in both the plugin was working fine. The same goes with the Mac OS but I'm not sure about your exact environment.

— Reply to this email directly, view it on GitHub https://github.com/kchobantonov/jsonforms-vuetify-webcomponent/issues/2#issuecomment-1893043313, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5UDIWEAIJ4YG7BQBKQCRSDYOX44DAVCNFSM6AAAAABB2JLPH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJTGA2DGMZRGM . You are receiving this because you were mentioned.Message ID: @.*** com>