Best way to store user's choice/configuration

Hi @Jens Thiemann,

Great question! One suggestion would be to leverage our Web SDK’s app-level metadata. You could store something like this in the app metadata and access it each time the app loads, for instance. You can find more details on this capability here:
https://developers.miro.com/docs/board_board#setappdata

Maybe this will help!
Will

Will, thanks for your answer.

Okay, the AppData might be a scenario.

It is also an option to use cookies to store/read the data, or is this an unusual approach in the context of Miro? Cookies would have the benefit to be available on every board (so the user does not need to change the setting for every board again).

-Jens-

@Jens Thiemann,

Good question! The cookies are also an option to you — depending on the sensitivity of the user details, you may prefer one of these options over the other. But I do believe either could work for your use case. 😀

I am trying to use cookies, but failed to get this up and running. 
(I am using cookies on my other web pages, but this is not working with my Miro apps).

Can someone provide a sample code / running example on who to use cookies with Miro?
 

Hi Jens,

I’ve just worked through a little code snippet to illustrate how to do this via the setAppData method as well as the getAppData method since I think this might be a good way solution to your problem. I know this is not using cookies, but this is still straightforward enough that I think it may solve your issue.

You should be able to run this code in the editor within the SDK docs by click on the `try it` button near the code examples. Please make sure there is already a card on the board first.

// Get all items with type: 'card'
const cardData = await miro.board.get({
  type: ['card'],
});

//we are just grabbing the first card's data here
const cardWidth = cardData[0].width;
const cardHeight = cardData[0].height;

//you can set the app data as you want
await miro.board.setAppData('usersCardSize', [cardWidth, cardHeight]);

//then you can get the app data for usersCardSize which we set earlier
const usersCardSize = await miro.board.getAppData('usersCardSize');

console.log(usersCardSize)

Please let me know if this helps you with your problem.

Hi, thanks for your response.
I am looking for a solution using cookies NOT the set/getAppData, because I want something which is not related to a board, but for the user.

Any sample code / running example on who to use cookies with Miro?

Hi Jens.

Usage of cookies fully depends on how app is working on your side. You can try to follow these instructions: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie.

The cookie will be set for this user, that currently is using the app and for the domain where your app is deployed.

But IMO in your case will be better to use localStorage. It also will store some data on the level of the app, not the board (again, because it is attached to the domain). If your app will store smth in the localStorage on one board, then the same data will be available on another board (but only in the same app). It should cover your case with storing of configuration. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
 

You can do it in next way:

// For example you have some form where you are configuring smth.
// And on click on "save config" button you will execute this handler.
const onConfigurationChanged = (config) => {
    localStorage.setItem("configuration", JSON.stringify(config));
}


// Then to retrieve configuration on, for example, app init, you have to do next:
const onAppInit = () => {
    const configurationJson = localStorage.getItem("configuration");
    const configuration = JSON.parse(configurationJson || '{}'); // if configuration was not found - use empty object

    doSmthWithConfiguration(configuration)
}