Integrating Jspreadsheet Javascript component

Support
#1

Hello, I am having trouble integrating the Jspreadsheet community edition Javascript component into Jmix. I used to be able to do this in CUBA 7.2 using AbstractJavaScriptComponent, JavaScriptComponentState and a Javascript connector. But I can’t get it to work with new approach (https://demo.jmix.io/ui-samples/sample/custom-component-js-library). Probably because I am not very good with Javascript. I would greatly appreciate it if someone can point me in the right direction; maybe more documentation or another example…

I am attaching a sample project. I think my @NpmPackage, @CssImport, and JS import statements are correct. But I can’t get the spreadsheet to show on the Sandbox view.

tryspreadsheet.zip (106.6 KB)

I feel this component would be a great addition to the marketplace.

I am using Jmix 2.2.3 and Studio 2.2.3-24.

#2
  1. Spreadsheet.java has Tag annotation with value demo-spreadsheet, but spreadsheet.js is() returns demo-jspreadsheet. they should be same.
    I changed it to "demo-spreadsheet"

After that in console i can see error Uncaught ReferenceError: $ is not defined (at least our ui works with the component now)
image

  1. spreadsheet.js uses jquery $, but do not import it. I add
@NpmPackage(value = "jquery", version = "1.9.1")
@NpmPackage(value = "jquery-ui", version = "1.13.2")

in Spreadsheet.java and

import 'jquery/jquery.js'
import 'jquery-ui/dist/jquery-ui.js'

in spreadsheet.js

Result:
image

#3

Thank you so much but I’m still unable to get the spreadsheet to show. Console shows error:
TypeError: this._spreadsheet.jspreadsheet is not a function. (In 'this._spreadsheet.jspreadsheet({allow...
Is it possible you also made a change in the spreadsheet.js ready() method?

#4

No. I did not. Maybe you removed jspreadsheet imports? I only add imports for jquery.
And changed static get is() return
image
image

Try to clear cache and hard reload in browser. Maybe spreadsheet.js saved in browser cache.

I tested in Chrome and Firefox.

#5

Do not know if it is relevant. But before first start of application i had this problem in idea ui.

image

After i run application and c.v.f.s.frontend.TaskRunDevBundleBuild : Development frontend bundle built was complited this problem disappeared

fb3e23a376882f2bc2cdba02d2ff2a65fe73034f

Maybe try to delete node_modules directory, for it to be recreated at start of application
Check that NpmPackage imports were added in package.json (it should have been added automatically)
image

#6

Yes, it was a caching issue. Thank you very much for your help.