How to use @forge/api library in forge custom UI app

Forge
, , ,
1

Hai all,
I am in a need to store data using @forge/api. but i can’t use it inside custom UI forge app. So i go with UI kit forge app. But it’s still in beta. If i develop a forge application using UI kit, can i publish it in atlassian marketplace? If any risks are there, kindly tell your suggestions.

Thanks in advance…

1 Like
2

Hey!

Indeed, you can’t directly use @forge/api in a CustomUI application, you have to define a Forge function first with @forge/resolver then invoke this function in your Custom UI app via the @forge/bridge package.

You can also use the requestJira or requestConfluence functions from the same package, but note that will call the product API on the current logged user behalf.

See @forge/resolver documentation and forge/bridge documentation.

If i develop a forge application using UI kit, can i publish it in atlassian marketplace?

Using Custom UI or UI Kit doesn’t impact the publication on the marketplace.

3

Thanks for the quick response @clement_garin. But now i am looking on one problem to create an admin configuration page after installing an application. I just install some applications for reference. Before installing that application it will move into configuration page after clicking get started button. After configuring only, the user can see an application in their instance. How they did that? I also need that same functionality. Is it possible to do it by using forge apps or its only applicable for connect apps?

4

Hey @SuryaA , I think you can do that in Forge too by using the Forge App Storage API to store a flag once your app is configured by the user.

Then, in you app frontend, you can retrieve this value :

  • If the flag doesn’t exist / is false: display the “Getting started” view, which lead to the configuration form, which set the flag to true once completed
  • If the flag is true: display your app main view

Hope it’s help

5

Hai @clement_garin I have a doubt to create a configuration page before installing(post installing page). How to create a post installed page in jira and how to connect it with descriptor file?

6

If you refers to the postInstallPage here, it’s seem to be only available only for Connect App for now.

You can send a feedback to the Forge team and ask for this feature.

7

Hai @clement_garin Shall i need any plugins to create postinstallpage in jira connect app?

8

@clement_garin My requirement is to create a get started button after installing app using postinstallpage and create config page also. I know it can only done by using connect app. But i don’t how to do that. can you send any reference documents to complete my requirements?

9

The only reference I have is the previous link to the “Using the project page module” I posted.

Since you are now working on an Atlassian Connect app, you should ask for help in the Jira Cloud Dev category to have more answers

10

@clement_garin Thanks

11

Hi Clement,

Do I understand correctly that I can use the api.asApp() in a Custom UI app if I define a function in the resolver that is using it?
I really need the asApp functionality for our app.

Thank you

1 Like
12

Hey @SuryaA,

Forge apps with UI kit can be published to Marketplace.

For your use case with Custom UI, asApp is only accessible from the backend resolvers. The following example would achieve what you need:

In your resolver function:

import Resolver from '@forge/resolver';
import api from '@forge/api';

const resolver = new Resolver();

resolver.define('my-method', async (req) => {
  const jiraResponse = await api.asApp().requestJira(...);
  const confluenceResponse = await api.asApp().requestConfluence(...);

  return {
    jiraResponse: await jiraResponse.json(),
    confluenceResponse: await confluenceResponse.json(),
  };
});

export const handler = resolver.getDefinitions();

In your frontend:

import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    invoke('my-method').then(setData);
  }, []);

  return (
    <div>
      {data ? JSON.stringify(data) : 'Loading...'}
    </div>
  );
}

export default App;

Note: using asApp should only be when really necessary. Ensure you implement the correct authorization checks when making these calls.

1 Like
13

Hi Daniel,
Thank you for the code this is exactly what I was looking for in my previous comment.

Could you please elaborate a bit on these correct authorization check? Currently I’m getting a 403 error which I think is related to this but in the documentation I read that the asApp() uses the permissions that the default user group has.

Thank you very much

1 Like
14

@LeventeRti that’s great to hear!

This page should help you understand a bit more: https://developer.atlassian.com/platform/forge/app-context-security/.