Data Grid export

Server Code Codeless
1

Hi - I am using data grid extensively in my app. I am unable to find a way to export data in csv from data grid. Is there something I am overlooking? Seems a basic requirement.

2

Hi,

Here’s an API service in the Backendless Marketplace that provides the functionality you’re looking for:
CSV to/from Database | Backendless Mobile Backend as a Service

Regards,
Mark

3

Mark – This works for pulling objects from db tables. I can’t figure out how to get this working in the data grid. Whatever is shown in the data grid (filtered), I want to export that.

4

You need to get the data model of your data grid (which will be a collection of objects) and then use the list2csv method of the above-referenced API service.

5

there is no documentation on how to use list2csv. (Excel/CSV to/from Database | Backendless) Can you help how to achieve this in codeless?
When the button is clicked, it should export the contents of the Data Grid.

image
image1441Ă—720 19.9 KB

6

Here is the simplest way to save rows from Data Grid into a CSV file

image
image938Ă—331 26.5 KB

Configuration options you could find in the documentation that Mark provided before.

Regards, Dima.

1 Like
7

csvoptions are optional as per the documentation. This is the setup I have tied to the button but clicking on the button does nothing.

2023-08-09_10-33-46
2023-08-09_10-33-46817Ă—264 28.9 KB

2023-08-09_10-29-39
2023-08-09_10-29-391265Ă—480 124 KB

Note that I am also getting bad request.

2023-08-09_10-41-10
2023-08-09_10-41-10881Ă—436 54.6 KB

Permissions issue
2023-08-09_10-44-07

So the question is what extra permission does a user need just to export the data the user sees on the screen?

8

It depends on the file permissions policy that you set up.

If you didn’t change anything after creating an app, the answer is - extra permissions don’t need.

9

It looks like we need “Write” permission (not sure why) to not to get the file download error. Even then, it doesn’t download and gives this error.

2023-08-10_11-36-49

2023-08-10_11-34-09

Nothing happens after clicking on the button.

10

But in case I reproduced for you - we don’t download anything, we create a csv file with rows from your Data Grid in the file system(upload). You could see it in Backend -> Files

When you say “export” you mean download data as a file into your PC, but not in Backendless Files system, am I right?

If so, you could create Custom Code blocks that look like below

image
image883Ă—204 16 KB

with the following code:

let csvContent = "data:text/csv;charset=utf-8," +  rows.map(e => Object.values(e).join(",")).join("\n")

const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");

link.setAttribute("href", encodedUri)
link.setAttribute("download", `${fileName}.csv`)
document.body.appendChild(link)

link.click()
11

I believe I have everything set up correctly for the export issue. I successfully managed everything using JavaScript within a custom code block. However, I encountered a problem when I transitioned to using the codeless feature. The part that was previously working in the codeless block has stopped functioning in the custom code JavaScript block. My objective is to filter out rows where the Modified_Date is null. I’m using the code provided below, which functions properly outside of Backendless. However, I’m facing challenges in getting any kind of where clause to function within the codeless block in Backendless.

Please note (although I’m uncertain if this detail is relevant) that I’m utilizing the data grid in the Backendless frontend to display the data. Additionally, I’m implementing a loop to retrieve more than 100 objects.

Again, all I want is to filter rows where Modified_Date is NOT NULL.

const loadAllObjects = async (table) => {
  const pageSize = 100;
const whereClause = "Modified_Date IS NOT NULL";
  const result = [];

Through the console output, you can see that even after implementing the code, the page is still fetching null values.

image
image751Ă—645 60.1 KB

Modified_Date is of type string.

12

Hard to say where exactly is something needs to be fixed.

Please, set up a minimal reproducible example and provide appId and page name.

Regards, Dima.

13

Thanks for the help. I got this coded up quickly thanks to your example.

Tim

14

AppID: 71669DB0-B9B5-8C55-FF9E-87E736612D00
Frontend Page - dr1. Download button downloads the files.

15

How could I reproduce the issue? I can’t open Preview or Published app.

Also, table data request contain where clause that you use?

16

The reason in this row

const dataQuery = { offset, pageSize, whereClause };

Here you could find how to compose query correctly - Search with the Where Clause - Backendless SDK for JavaScript API Documentation

17

Hi @Dima,

I’m trying to do something similar but cannot access rowsData. I am getting an error that rowsData is undefined.

I built a test -

image
image1066Ă—322 31.4 KB

This is the result, I don’t see rowsData.

image
image1635Ă—681 16.2 KB

18

Hello @Tim_Jones

To give you an accurate answer, we first need to determine which grid you actually have on the page. UI Builder offers four different components, and each of them handles data in its own way:

  1. Data Grid from the Marketplace (User Interface → UI Components → Data Grid) — a custom component based on ag-Grid that has to be installed separately. Once installed, it appears in the toolbox under the Custom Components section. It has the Rows Data (rowsData) property, along with Column Definition, Theme and Pagination, plus its own Codeless actions: Get Rows Data of Data Grid, Get Selected Rows of Data Grid and Get Columns of Data Grid.
  2. Backendless → Data Table — a built-in component that loads records from a database table on its own. It does not have a rowsData property.
  3. Backendless → View Data Grid — a built-in component that works with data views (Data → BDB). It is read-only and supports sorting and filtering. It has no rowsData property either.
  4. Visualization → Data Grid — not a component in the usual sense, but a visualization created in the Data → Visualizations section and embedded into the page.

Why this matters in your case: the rowsData value is not exposed through the
Get Component By Id block — that is why you see undefined in your test.

Please let me know which of the four options you are using (a screenshot of the grid’s properties panel would be enough), and I will show you a working way to retrieve the rows for the CSV export.

Regards,
Volodymyr

19

Thanks @Volodymyr_Ialovyi

I have moved most of my grids to the market place component, but in this case I’m using the Data Table. I haven’t made any changes to this part of our app in awhile and forgot this does not use the marketplace component.

image
image354Ă—651 16 KB

What, if any, are my options for getting access to the row data?

Thank you for the thoughtful breakdown of the situation.

Tim

20

Thanks. The built-in Data Table does not expose its rows. Get Component By Id returns only its configuration (tableName, whereClause, columns, paging) and the reloadData method, so there is no rowsData here.

You can get the rows through the On Records Request handler in the component’s logic. The table calls it whenever it needs data and passes Table/View Name, Where Clause, Page Offset, Page Size, Search Text and Sort By. Inside it:

  1. Load Table objects — feed the context blocks into table name, where clause, sort by, page size and page offset.
  2. Set property in Page Data, property tableRows, value — the loaded list.

Alternatively, if you prefer not to change how the table loads its data, read tableName and whereClause from the component with Get Component By Id and run the same Load Table objects query in the button’s logic. That also lets you export the full result set rather than the page currently displayed.

Regards,
Volodymyr