✏️ Editable Tables with Formulas / Online Spreadsheet

jrmayhew67 · 2021-10-02T16:01:46.681Z

OK great tx… also had an idea with your context menu… if you added the format option there you could select a cell and assign it… then have another field that matches the col row of the data column to hold the classes for each cell and then apply them… as well as another field for javascript functions (like I am using to round number to two decimal places) That way you can easily assign classes and functions to individual cells… I am also doing this with css to assign specific cells to be non editable using the class you already have for that… as well as the example of assigning $ and % signs…

tx
JR

rein · 2021-10-19T16:55:21.591Z

Thanks for the reply! The solution actually worked for dynamically defining dropdown choices, but I’m getting an error when trying to convert list to a string in data source.

image935×212 13.1 KB

BubbleSam · 2021-10-20T10:19:45.936Z

rein:

Thanks for the reply! The solution actually worked for dynamically defining dropdown choices, but I’m getting an error when trying to convert list to a string in data source.

As far I understood from your previous messages, some of your columns can contain a list of objects which you want to convert into a single string.

If my understanding is correct, then you should only convert these column values, not the whole table row.

I’d probably try the Toolbox plugin:

Bubble

Toolbox Plugin for Bubble, by Misha V

Toolbox Plugin page on Bubble, by Misha V. Add Toolbox in one click to your app. Bubble lets you build web apps without any code.

d.s.bugaev · 2021-10-26T00:36:57.996Z

@BubbleSam
Hello.
Why dropdown don’t working?

16352084857181009×521 55.6 KB

16352085066801001×552 46.4 KB

1635208538912692×803 83.8 KB

BubbleSam · 2021-10-26T18:36:21.616Z

As we have no access to your data, it’s hard to say what’s wrong with your config.

However, here is a demo page where we are using dynamic dropdowns: Demo | Editor

I hope it will be helpful!

tomnovo · 2021-12-04T17:14:02.520Z

Hello Sam,

I just posted my question on the forum and then came across your post:

Excel-like calculator Question

Hello, I have a problem and am not making much progress, so I would be very grateful for any helpful tips: I would like to implement in Bubble a yield calculator for properties that are for rent. I have already created this calculator in Excel. Now I would like to apply it to Bubble. It is especially important to me that the calculations are carried out immediately, just like in Excel. The calculator calculates the yields over a period of 50 years (corresponding to the maximum tax depreciatio…

Is your plugin suitable for my purpose?

Can I use your plugin to replicate my MS Excel template in Bubble, so to speak, so that users can perform the complex calculations online via my Bubble website? (the users enter some parameters themselves in advance, the plugin then calculates all the rest)?
Are all common Excel formulas supported? (I also use longer nested formulas in my MS Excel)
In my original MS Excel, most of the approximately 5,000 cells are read-only, but certain cells can be edited. Is that also possible with the plugin, to define which cells are readable and which are editable?

Many thanks in advance and greetings
Tom

BubbleSam · 2021-12-10T10:36:10.442Z

Hi @sizzling_turtle ,

Apologies for the late reply.
Does the error persist?
The easiest way to understand the reason is to print on the screen the text values you are passing to the plugin.
Generally this error appears when the source data isn’t formatted correctly.
You can also try to display less items in the table (1 or 2 rows for example).

BubbleSam · 2021-12-10T10:39:09.756Z

Hi Tom,

Unfortunately, this plugin can not completely replace your MS Excel. It supports some basic formulas: addition, subtraction, multiplication, division, and some special formulas.

BubbleSam · 2021-12-15T10:55:56.283Z

sizzling_turtle:

Also, is there an example of enabling Editing and having the user’s edits saved back to the database?

We have a demo that stores user data to the DB:

Demo 2 (Spreadsheet like Google Sheets / Excel): Demo | Editor

Have you checked it?

maw · 2021-12-29T22:27:12.122Z

I’m working on the export to CSV, is there documentation on the options here? The UI is showing over 3,000 rows but when I export it only downloads 1423 … I’m also wondering if there is a way to have it download based on search criteria or other filters?

peeyush · 2021-12-31T06:05:21.608Z

Is there an option of wrapping text in a row? How can we achieve that?

BubbleSam · 2022-01-04T11:15:13.643Z

Hi @peeyush ,

Could you please elaborate? If your text contains html tags with line breaks, the plugin can handle it automatically

sizzling_turtle · 2022-01-04T16:39:02.406Z

@BubbleSam not sure if you saw my question a few weeks back, can you help? I am trying to add new editable rows but edits to new rows aren’t being saved to the database: ✏️ Editable Tables with Formulas / Online Spreadsheet - #75 by sizzling_turtle

BubbleSam · 2022-01-06T09:36:43.237Z

Hi @sizzling_turtle ,
Plugin fires a Cell edited event and provides a number of related states:

edited_value
edited_col_id
edited_col_title
edited_row_index
edited_record_id
edited_col_index

This is how it works in our demo. Could you please print out all these states? If some values are empty, do you have any errors in the browser console?

BubbleSam · 2022-01-09T14:50:37.711Z

maw:

The UI is showing over 3,000 rows but when I export it only downloads 1423

That’s probably because your data row around the 1423th contains a character that breaks the CSV format. This shouldn’t happen however because the plugin automatically encodes this kind of characters.

To let us understand better the issue, could you please output the data rows around the 1423th (± 5 rows)? Probably you’ll even find the problem yourself

maw:

I’m also wondering if there is a way to have it download based on search criteria or other filters?

Nope, unfortunately that’s not possible yet, but it’s a good idea which we should consider in the next release!

maw · 2022-01-09T18:01:24.291Z

Thanks for taking the time to respond … that is a bummer about the not being able to download based on search/filtering, I’m wondering if I can use another plugin to tap into your table? Can’t use this without that ability as users need to be able to download only certain data.

BubbleSam · 2022-01-11T11:41:43.532Z

I totally agree with you. We haven’t planned a new release for this plugin yet but we will consider adding filtered CSV export! That’s a great idea

sizzling_turtle · 2022-01-18T19:46:19.009Z

I’ve printed out all the related states. There are no errors in browser console. I am able to add new rows and edit the cells of the new rows, but the edits are not persisted in the database. Here is my app, and the primary table to look at is BuildOrderStepsTable:

Bubble

Bubble Editor - Aoe4builds

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Initial state with 2 rows. I edited the cell Gold-2 with the value “24” and I see everything printed out correctly:

Screen Shot 2022-01-18 at 2.56.43 PM1580×884 90 KB
Now I add a 3rd row and edit a cell. You can see edited_col_id and edited_record_id are both empty. There are no errors in browser console.

Screen Shot 2022-01-18 at 2.58.24 PM2160×1576 272 KB
I check my App Data. I search for the table’s rows, and I see the edited value has not been persisted to the database. Food=0 is the default value when a new row is created, so the edited value Food=1 has not been persisted:

Screen Shot 2022-01-18 at 2.59.10 PM1388×358 48.7 KB
And here is my workflow to persist cell updates to the database:

Screen Shot 2022-01-18 at 2.50.18 PM2044×1324 214 KB
I’m wondering if it could be an issue with my “Add New Row” workflow? I create a new row empty row, then create a new Build Order Steps. Like how do I make sure the new row is associated with the new Build Order Steps record in the database? Ideally I want to keep my existing table structure and not concatenate all the data into a single column like in your demo because that messes up other things, like being able to easily filter the data in other views and having distinct column names:

Screen Shot 2022-01-18 at 3.25.31 PM1370×1024 72.9 KB

Screen Shot 2022-01-18 at 3.26.11 PM1346×1350 86.7 KB

mike31 · 2022-01-26T20:50:12.302Z

Great plugin! The only issue I have is that I can’t seem to find out how to get (and then set) column widths?

I have a pretty simple use case that is working otherwise but my users want to set the widths of columns and have them remembers between sessions for the data they are working on.

msgiblin · 2022-01-31T18:56:49.221Z

Hi @BubbleSam, thanks for this plugin! For me the biggest benefit was having a table of data drawn from the database, that could be interacted with and edited by any user/visitor without logging in, and without writing that data back to the database - the changes are on their browser only.

What I am looking to do is have a dropdown of products a visitor can select, and then add that row from the database onto the table. I have it rigged to add a blank line, but I cannot find a combo of Workflow Element Actions that could do this.

I have a help topic posted here as well but didn’t know if what was looking to do was more Plugin specific: Using button to add row from database via dropdown onto temp table

Here is my ‘skeleton’ site: https://know-thy-drink.bubbleapps.io/

Thanks!