nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Storage In UI Kit Components

Jan Ulrich Robens

Hello together,

I wanted to create a first test for an App Idea I had recently.

I was able to implement everything, however I struggle with accessing the storage to read data in an UI Kit Component.

I am able to store the data in the storage, but can not retrieve this data for visualization.

I added the storage:app scope to the permission section in manifest.

I mount my UI Kit Component Repository settings menu page.

Is this currently expected behavior or is this likely a bug.

Despite that, thank you very much for making it possible to create forge bitbucket apps.

Best

Jan

Comments

Wendy G

Hi Jan,

What code snippet are you using to store and retrieve the data? And what error are you getting?

Thanks

Wendy

Caterina Curti

Hello @Jan Ulrich Robens

In addition to what Wendy said, you can also have a look at an example app using storage here: https://community.atlassian.com/t5/Confluence-Cloud-articles/Forge-ing-Simple-Solutions-for-Confluence-Global-Variables/ba-p/2474645

The article above describes a Confluence app (we don't have an article using storage for Forge yet) but hopefully the article is a good starting point to understand how to use it.

It might be just a matter of retrieving the data using an async/await function.

That's covered in these 2 parts of the logic from the example app:

// We are setting the default value to the data from storage
const [variables, setVariables] = useState(
  async () => await storage.query()
    .where('key', startsWith('globalVariableName-'))
    .getMany()
);

// Retrieve the variable value from storage
  const [globalVariable] = useState(async () => (config) ? 
    await storage.get(`globalVariableName-${config.globalVarName}`) : 
    undefined);

To test the app, you can set up a Confluence test site for free by following the instructions here: https://developer.atlassian.com/platform/forge/getting-started/#jira-and-confluence--set-up-a-cloud-developer-site

Hope this helps,
Caterina

Jan Ulrich Robens

Hey,

thanks for your responses.

I used something like that:

useEffect(() => {
    storage.get(repoUUID)
        .then(it  => console.log(it),it  => console.error(it))
        .catch(console.error)
}, []);

The weird part is that i do not receive any errors like rejected Promises or something else. the code just never completes the Promise in either way.

With your example of using the storage directly in the useState it works exactly like I want. (I was not aware I can pass an async function)

Thank you very much for your help.

Best

Jan

Edmund Munday

Hi @Jan Ulrich Robens - apologies about this.

It should be something along the lines of:

const App = () => {

  const repoUUID = < some repo ID >;

  // get the string stored in Forge Storage.
  const storedString = await storage.get(repoUUID);

  return ( <Text > {storedString} </Text> );
}

The `useEffect` hook you had in your example is used when you want the UI to automatically re-render based on changes to the component state, but it sounds like all you're trying to do is get some data from storage and show it in the UI, in which case you probably don't need the `useEffect`.

For context, I'm the Product Manager for the team who is implementing Forge. If you're still having any trouble with this I'd be really keen to chat for 30 mins. We can debug your issue and I'd love to get some feedback from you.

If you're interested, please grab some time that works for you in my calendar here: https://calendar.app.google/oJN4TGaT7MY5Vm8e6

Welcome!

It looks like you're new here. Sign in or register to get started.