Retrieve a value in local storage and integrated into the webapp


I have asked before about a way to integrate another app into my project. I have achieved it successfully and now I am quite close to my goal but I need a little push to get it done. I know it is something out of React Studio but I believe it must not be difficult to retrieve a value that the other app generates.

The situation is, my project have a menu with a list of documents. Each one of them takes the user to this external app and after using it there is a value called score with a number that goes into local storage of the browser. Going back to the React Studio app the value is still in the local storage as I can see it in the Developer tools. I would need that value to be saved into the database with the associated userID and the document_key of the element that was clicked.

I guess I would need to edit the preloadCard (component) script, but I don’t know how to do it.

Anyone could help me achieve this?

Thank you.

I have made some improvements. I have achieved to have the values in local storage as is shown in the screenshot. Now, if I want to place a button to save data into a dataSheet I can save without any issue the documentKey and the userID, but the ‘score’ value… How do I put in a dataSlot. If I change manually in the console the name of the value to ds_Score, which is the same as a data slot that I create, it goes in there. But I am not able to create a data slot called ‘score’ and changing the name of the value in the source app is not an option right now.

Is there a way to manipulate with React Studio that ‘score’ value in local storage?

Thank you!

Hi, Data slots have always the ds_ prefix and unfortunately one cannot escape that. It’s simply to avoid naming conflicts.

Currenlty your only option is to change the name of Data slot manually after you’ve exported the code.

I didn’t think about that! I went to the code and changed that line in App.js and that worked wonderfully. Thank you!

I will try now to create a component (windows) that appears only when there is some value in that slot. I believe it can be done. I’m going to it.

1 Like

Ok. I am almost there. I have achieved almost the whole thing. I have created a component that shows the value that has retrieved and asks the user a confirmation if he want to save that value or discard it. In both cases, the value from the data slots are deleted, so the user must select another document to fill the slot with a newer value. So far so good.

The only thing that I don’t know how to achieve is to link the visibility of the window with the fact that there is any value in the data slot. That would be the perfect scenario. By default that data slot is empty so no window must appear. To obtain some value in that score the user has to play a song and when coming back the slot automatically receives that score so the window should appear. After accepting or rejecting that value, the slot is emptied and with that the window must go away again.

As I wasn’t able to achieve this I just placed a floating button that toggles the visibility, but that is not what I wanted.

Any idea how can I make it?

What do you mean by window? If you mean component on top of the screen then you can just set the visibility of that based on the data slot value.

That’s exactly what I mean. I don’t see the option to do that. Where can I find it?

I assume that it has to be here. I have created 2 states. State 1 is not visible. State 2 is visible. By default is State 1 and I have selected the option to Override state using data linkage, linking to the data slot ds_score. However it does not work. I believe that it has to be linked to a slot that contains 0 or 1 but I don’t get how to do that. My purpose is that the component is not visible if there is not any value in the slot ds_score, and it is visible if there is any value. Sorry if it is a dumb issue.

Why using states? You could simply set the component’s Visible prop to 'true/‘false’ with script based on the value in the score.

I am sorry about my clumsiness.

Do I associated with a new dataSlot? I tried creating a new dataSlot named “ds_scoreWindow” which is supposed to have the value ‘true’ or ‘false’. When I edit that script, I have to reference the other dataSlot named “ds_score” but it is not working. The script that I did is:

if (ds_score>1){
return ‘true’
return ‘false’

Why is it not working?

You don’t need to reference it to data slot but I’d recommend that. Anything that is saved in state will trigger the script. Note that if the state does not change then the Visibility is not triggered as well. When updating the data slot value elsewhere make sure that you do it via this.props.appActions.updateDataSlot(‘dataslot’, “foo”); or the state is not updated.

Also make sure that you dont create infinite loop by triggering the data slot update inside the same script.

Ok. I believe I made it. I was not accessing the data Slot the way I was supposed to. Now it is working. Thanks!

1 Like