Code example for "Get cell value"

Getting help Questions
1

Hello,

I have successfully implemented the following example on my Bubble.io site:

https://handsontable.com/docs/formula-calculation/#data-grid-example

I have basic knowledge in programming, but unfortunately I don’t know JS that well and I’m stuck at one point.

Is there a simple way how I can get the value of a certain cell, for example the value of cell A2, and store it in a JS variable or output it via this variable elsewhere in Bubble.io?

Would anyone have a code example for me?

Many thanks in advance for the help!

2

Hi @tomnovo

We do not have any tutorials on how to connect Handsontable to bubble.io. But I can help you get the best methods and hooks in Hadsontable.

Could you show me how the code for Handsontable looks in your app environment?

3

Hi @aleksandra_budnik

Thank you very much for your fast replay and kind offer.

Here are the screenshots from Bubble.io:

I just copied and pasted this code example:

into a JS Expression element in Bubble:

JS%20Expression
JS%20Expression2261×1235 146 KB

and the HTML example code into an HTML element in Bubble:

HTML%20element
HTML%20element2288×1245 100 KB

And this is the output, the Handsontable example is shown successfully:

output
output1406×1189 51.8 KB

It works, but Bubble reports this debug error:

error
error2536×1282 106 KB

Now I want to read the result of cell E1, for example, and output it as a variable in Bubble so that I can save it to the Bubble database or insert it elsewhere.

I hope these screenshots tell you something? Thank you very much for your help!

Kind regards,
Tom

4

I found one connected case - https://github.com/handsontable/handsontable/issues/4588.
But the user was trying to define a data source that is not supported. If you pasted exactly what is given in https://handsontable.com/docs/formula-calculation/#data-grid-example it means that the new version of Handsontable may not work well in Bubble.io.
Are you able to test that table and edit values? (to check if that error stops the scripts or not)

5

Hi @aleksandra_budnik

Yes, the table works. I can edit the cells and the formulas work as well. Everything looks fine so far (unless the debug error).

But now, how can I save a value of a specific cell into a general JS variable so that I can output it elsewhere on the same Bubble website page or save it to the Bubble database? (I hope it is understandable what I mean :slight_smile: )

Could you perhaps help me with an example?

6

I think that I get it. Is that what you were looking for https://jsfiddle.net/d14npbom/3/? (I’m doing the test for cell 0, 0)

7

Hi Aleksandra,

thank you very much for this! That works.

If I see it correctly, I need to change the cell 0,0

a.) change and
b.) click on the button

to save the value of cell 0,0 in the variable myVariable and show it on the page, right?

Is it possible to keep myVariable always in sync with the value of cell 0,0? (without changing and clicking)

I would like to display myVariable elsewhere on the web page or save it as a key value in the database without the user having to click a “Save” button or similar.

Thank you very much for your effort.

8

The save button is only there for us to check if it works

This part of the demo

 afterChange: function(changes, src) {
    if (changes) {
      let row = changes[0][0];
      let col = this.propToCol(changes[0][1]);
      if (row == 0 && col == 0) {
        myVariable = changes[0][3]
      }
    }
  }

keeps the data in the variable in sync. No matter how it is changed (from a call to a server, from an edition, copy-paste or autofill) you always have an actual value of that cell.

9

Thank you very much, Aleksandra.

Is it possible to show the current value in cell 0,0 beneath the table before changing (immediately after table is rendered for first time) and after changing the cell.

Now, the myValue is filled with the value of cell 0,0 only after I make a change, right?
When I click the button before I change the cell, it shows “undefined”.

20211222114215

10

If you would like to show value as it is typed that I suggest the beforeKeyDown event instead of the beforeChange/afterChange as those are triggered after the editor is closed.

Here’s an example https://jsfiddle.net/5dc6o9n0/5/