Unable to get Product Context in Custom UI App

Forge
, , ,
1

I’m building a confluence space page app using forge and custom-ui. I’m trying to get product context, so that I can fetch accountId, spaceKey, and installContext id to identify the user and where the app is installed to customize the app logic.

I’ve tried steps from: https://developer.atlassian.com/platform/forge/app-context-security/

Here’s what my static/hello-world/src/App.js looks like:

import React, { Fragment } from 'react';
import { view } from '@forge/bridge';
import {useProductContext, Text} from '@forge/ui';

async function getMyAppContext() {
  return await view.getContext();
}

function App() {
  // trying both methods of getting context
  const context = useProductContext();
  const context2 = getMyAppContext();

  return (
    <Fragment>
      <Text>All info about me: {JSON.stringify(context)}</Text>
      <Text>All info about me 2: {JSON.stringify(context2)}</Text>
    </Fragment>
  );
}

export default App;

Following is the output:
All info about me: {}All info about me 2: {}

For some reason, the context is coming up empty. Here’s what the console logs look like:

image

I’ve been stuck on it for days. Any help would be much appreciated.

Thanks!

2

Hi @karunakarg ,

I think you’re getting mixed up between Custom UI and UI Kit. The code you’ve shared, including the useProductContext() call looks like UI Kit code which is designed to run with a Forge function (backend) rather than in the browser where Custom UI runs.

Regards,
Dugald

3

Ok. So, now I’ve moved the useProductContext() call to server side, which is still not working. Here’s the code in src/index.js file:

import Resolver from '@forge/resolver';
import { useProductContext } from '@forge/ui';

const resolver = new Resolver();

resolver.define('getCtxt', () => {
  const context = useProductContext();
  return (JSON.stringify(context));
});

export const handler = resolver.getDefinitions();

I’m calling getCtxt() method via bridge invoker on custom UI side. I’m still getting empty braces as output, which is same as before.
I did notice that I’m getting CORB error once the page loads. Here’s the message from console illustrating that error:
image
Not sure if it has anything to do with the whole thing not working.

Thanks!

4

It finally worked!
After putting the code on server side, there was a minor issue on UI while rendering the JSON context output. Simply using JSON.stringify(context) worked for me.
In addition to that, I found this post helpful in understanding how context gets passed around from frontend to backend : Rendering UI kit from a Custom UI resolver function
@dmorrow thanks for helping me out!