Getting Started with Fluidtable Guide

Get started with Fluidtable, a modern spreadsheet application which makes easy and pleasant working with data.

clacla

April 25, 2019

Fluidtable is a modern spreadsheet application which makes easy and pleasant working with data.

It makes easy to import data from a database, APIs, Excel documents; it makes fast cleaning the imported data and format it; it makes simple to manipulate the data using Javascript.

It is so powerful that apps can be built inside Fluidtable spreadsheets. But at the same time, it aims to be simple and intuitive.

Document overview

In Fluidtable you can create as many documents as you want. Inside a document, you can have multiple tables. Tables can refer to data in each other.

When you open a document, you will find that there are really 3 main things to learn. Let’s see them.

Add Code button

Inside a document’s table, if you select a single cell, the **Add code** button gets enabled. If you click it, it will open the Code Editor. The code can be added just to one cell at the time.

Code Editor

This is a tool that will allow you to write Javascript code inside a cell. It is comparable to Excel’s formulas and VBA. The goal is to give you a very good programming experience while trying to simplify it.

Return a value to display it

The most basic concept is that wherever you put after the return keyword, it gets displayed.

For example return 0.123 * 1000 will display 123.
Instead, return 'Ciao ' + 'Johnny Machete' will display Ciao Johnny Machete.

You can return pretty much anything. You can return objects, arrays and Promises. Promises’ states will be automatically managed.

Write code

In the Code Editor, you can write wherever you want, as long as it conforms to the Javascript specification (ES6 is supported).

Try to write:

const name = 'Mr. Machete';
return 'Hello '+ name;

Run code

After you wrote some code, you want to test it, without saving it. Tap the button **Run code** in the toolbar. A box below the editor will appear with the result or the eventual error.

Select cells

In other spreadsheet applications to get the value of another cell, you would write something like B3. It would refer to the cell in the second column and third row. In Fluidtable columns and rows, both use numbers so you would write Table.value(3,2).

To make it simpler, you can just click the **Select cells** button in the Code Editor toolbar.

Once you start to select cells, the Code Editor is hidden. You just select the cell, a range of cells, a row or a column.
Then select **Complete selection** in the table’s toolbar.

The code editor has not been filled with the right code to get the value of the selected cell or cells.

To learn more about the different functions to get values from tables, continue to read the Reference guide.

Save

Save button just save the code in the spreadsheet, overriding the previous value.

Object View

When in the Code Editor you write code that returns an object or an array, the data is too complex to be visualised as is. An icon similar to **{ }** will appear in the cell. Tapping it will open the Object View.

Write the following code in the Code Editor and then Save it:

return [
{ name: 'Angela', age: 22 },
{ name: 'Johnny', age: 20 },
];

Now opening the Object View will display all the fields that compose the returned object. Moving the mouse over the different properties, different buttons will appear.

You can Spread the content of the object over the nearby cells. You can Show a single property of the object in the current cell. You can copy a single property of the object, then paste it in another cell.

Column name

You can rename a column by right-clicking on a column header, then clicking **Rename column**.

When spreading an object from the Object View, from the first row, the table’s columns will automatically get the name of the properties they represent.

Tugulab Blog.