How to access datasheets from javascript functions

I am working on a dashboard product that needs to display data from several different tables. I have already setup the JSON import plugs-in that can read the tables from AWS into the DataSheets. Now I need to collect the information from the tables and display it.
For example, I have a list of objects that need to have their status displayed. That information is spread across DataSheets A, B and C. Is there a way for a script to directly access the DataSheets from JavaScript?
In the sample code for the Transformer function, there is an interesting line for accessing Data Slots:
exampleValue=this.props.appActions.dataSlots['ds_Example'];
Is there are similar function to read a datasheet?
Is there are function to write to a datasheet?
Thank you in advance!
-K

2 Likes

Yes, definitely!

You can write it similar to the Data Slots code:

this.props.appActions.dataSheets[‘Sheet 1’]

Or use the following methods (implemented in exported project’s App.js file):

this.props.appActions.getDataSheet(sheetId)
this.props.appActions.addToDataSheet(sheetId, newRow)
this.props.appActions.updateInDataSheet(sheetId, row)
this.props.appActions.removeFromDataSheet(sheetId, row)

-Juha

2 Likes

There is a scripting option for List/Grid element In the latest React Studio version. Maybe you could use that as well for creating the list based on several Data sheets.

Anyway if possible I’d suggest to have this logic implemented in the API so that you’d only need to load the data to one Data sheet rather than having to create scripts all over the place.

1 Like

Thank you for the response. I did indeed move all the multi-table (“Join”) logic in an AWS lambda call (in Python!). So now I have a single API call that returns all the dashboard data in a single HTTP GET statement.

1 Like

Hi Antti,
Thanks. I tried the Grid but it references a single fixed-size component, making the entire table a collection of cells, all with the exact same size. I have not found a way to allow the referenced-component to vary in size.
Please let me know if I am wrong about that.
As a result, I’m having to build a React-Component plugin.
-K

The width of the List/Grid is always same but the height of the component can vary based on the component state or content. Is it the width that you want to change between columns?

Yes. I would like the width to vary, as in a table that is responsive.

if i do this
this.props.appActions.addToDataSheet(sheetId, newRow)

i see it when i do it but if i reload the page or see iit on my phone vs computer

i dont see 4 anymore added i still see 3 rows

but say if i reload it or jump back from another session i dont see that data in the sheet

Data sheets are “just” local arrays which are not stored between sessions. If you want to have persistent data you need to store the data in Database and load it from there to Data sheets. That’s e.g. how Firebase plugin works. Data sheets are filled from Firebase database and Firebase sdk handles updating data.

I always suggest to check the exported code. There you see that Data sheets contain only the “mockup data” which is filled in the design time in Studio.

ahh thanks maybe should learn Firebase lol

so if i do sync it and do that add row would that work

or would i need a firebase SDK to insert.

thanks for the hints, this was very helpful.
I just wonder how to iterate of the items in the dataSheet:

// this leads to a runtime exception at IDs.forEach
let IDs = this.props.appActions.dataSheets[‘IDs’];
IDs.forEach(item => {
alert(item.data());
});
// also IDs.items.forEach seems not to work for me.

Any hint is appreciated - thank you!

What happens If you test this:

let dsArr =this.props.appActions.getDataSheet(‘DATASHEET NAME’);
var arrayLength = dsArr.items.length;
for (var i = 0; i < arrayLength; i++) {
console.log(Found item: "+dsArr[i]);
}

P.S. If you’re loading data from e.g. Firestore you need to make sure that data is present in Data sheet in the screen lifecycle where the script locates.

let dsMockData =this.props.appActions.getDataSheet(‘dsMockData’); // OK
let dsJsonPluginData =this.props.appActions.getDataSheet(‘dsSomeJsonData’); // undefined

accessing a DataSheet which has mock data works like expected - accessing a sheet that has data from the Generic Json Plugin cannot be resolved, although it has data in the sheet (forced on startup). Could it be related to the Json Plugin? I am not 100% sure if I got your P.S. correctly regarding “…in the screen lifecycle where the script locates” and what to do based on this.

Hi,

It is definitely something to do with Screen lifecycle and when the data is really loaded to Data sheet array. You have to debug the code and see how it goes. My best guess is that you need add the script to “componentDidMount” in Screens / Components code template.