How to persist header and items in React Studio/Firebase?

Hi all,

If you need to persist header and items in React Studio how do you do this?
E.g. You have a collections with order headers like this:

…and order items like this:

How do you save an order header and then get the order_id back to use to save the order item in the datasheet? This is quite a common scenario but I couldn’t find any examples …

Can anybody explain how this is done please?

Let me explain a bit more to make it clearer …
When I store the order header in the datasheet the order_id should get set by Firebase because this is an auto-ID field (at least I understand it like this but this might be incorrect?).
After that happened I need to get this new order_id and set the item collection’s order_id the same so that the order-item relates to the just saved order-header.

Hope this makes it clearer?
Can anyone please explain how this can be done in React Studio or is there a better way of creating a header/item relationship in React Studio?


The Data interactions depend on Data plugin implementations and in Firebase you probably need to use custom Scripts for achieving the result. Basically you’d need to create some kind of Firestore Cloud function which checks if user has open order and if not then create new order document.

P.S. firebase plugin has setting for saving the latest Document key to Data slot. It may be useful to your use case.

Hi Antti,

Thanks very much for your help.
I can use a data slot to save the stored document_key of the header but after the update I’ll need to store it in e.g. ds_order_header_id and use it to create new order items for the same order.

I tried to do this but I have problems to store the ds_last_saved_document_key in the ds_order_header_id within the Interact of the save header button.

I tried on tap -> Save data in Data slot ds_order_header_id using fixed and a script:

this.props.appActions.updateDataSlot(‘ds_order_header_id’, this.props.appActions.dataSlots[‘ds_last_saved_document_key’]);

return input;

Unfortunately this does not work.
Can you help please?

Many thanks.

Another option would be to generate a UUID before saving the header and items and use this UUID as an order_id.

The advantage of this would be not having to wait (and listen) until the header is saved before the generated document_key is available.

What I don’t know is if this will work with datasheets and Firebase and where to best add a javascript method to do this in React Studio?

I found out how to do this if anybody has a similar problem …

On the order save button on Save Data create a script to generate the UUID and update a dataslot to store it for later when the items are saved:

// generate a UUID for the order_id

var d = new Date().getTime();//Timestamp
var d2 = (performance && && (*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
let orderID = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16;//random number between 0 and 16
    if(d > 0){//Use timestamp until depleted
        r = (d + r)%16 | 0;
        d = Math.floor(d/16);
    } else {//Use microseconds since page-load if supported
        r = (d2 + r)%16 | 0;
        d2 = Math.floor(d2/16);
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

this.props.appActions.updateDataSlot('ds_order_id', orderID);