Rate this page:
The custom UI resolver enables you to define backend functions for your custom UI apps.
Your backend functions must be defined in the src
directory of your Forge app, not in your
resource directory. You must then refer to your resolver in the manifest.
Invoke your resolver functions in your frontend assets using the invoke custom UI bridge method. Install the custom UI resolver using the @forge/resolver npm package.
Consider the following example manifest.yml
file:
1 2modules: jira:issuePanel: - key: hello-world-panel resource: example-resource resolver: function: issue-panel-resolver title: Hello world! icon: https://developer.atlassian.com/platform/forge/images/issue-panel-icon.svg function: - key: issue-panel-resolver handler: index.handler resources: - key: example-resource path: static/hello-world/build
This is the manifest declaration for a basic Jira issue panel using custom UI and the custom UI resolver. In this example:
resource
is a reference to a defined key in the resources
object.resolver
contains a function property, which references the function
module that contains
the handler for the resolver to use in your custom UI app.path
is the relative path to the directory of static assets for the resource. It must contain
the index.html
entry point for the custom UI app; in this case, static/hello-world/build/index.html
.Consider an example src/index.js
file that contains the resolver function definitions:
1 2import Resolver from "@forge/resolver"; const resolver = new Resolver(); resolver.define("exampleFunctionKey", ({ payload, context }) => { return { example: `Hello, ${payload.name}!` }; }); export const handler = resolver.getDefinitions();
In this example:
"exampleFunctionKey"
.
static/hello-world
, by using the invoke custom UI bridge method.Continuing this example, the following code invokes the "exampleFunctionKey"
function defined above:
1 2import { invoke } from "@forge/bridge"; invoke("exampleFunctionKey", { name: "World" }).then((returnedData) => console.log(returnedData.example); );
Including this code in an appropriate location in your frontend assets would result in "Hello, World!"
appearing in your browser console.
The @forge/resolver
package exports a class that contains two methods.
The define
method is used to define individual resolver functions, identified by a functionKey
.
1 2function define( functionKey: string, cb: (request: { payload: { [key in number | string]: any; }, context: { accountId?: string; accountType?: 'licensed' | 'unlicensed' | 'customer' | 'anonymous'; cloudId: string; localId: string; installContext: string; environmentId: string; environmentType: string; extension: { config?: { [key: string]: any } // defined for macro extensions [key: string]: any; } } }) => Promise<{ [key: string]: any } | string | void> | { [key: string]: any } | string | void, ): this
functionKey
used to invoke this
function in your frontend assets.functionKey
.
The return value of this callback will be returned from the invoke function in your frontend assets.
This callback will have the following data passed into its first argument:
payload
parameter of the invoke function.licensed
, unlicensed
, customer
, or anonymous
.
Note, this field is mainly intended to be used in components that permit access by users without corresponding product license.Additional contextual information for your custom UI app. The data available in the extension
property depends on the module in which your custom UI resolver is used. Note that context is similar to Platform Context, although it's not a 1-to-1 mapping.
extensionContext
property in the context
data. This extensionContext
property
is deprecated and will soon be removed. Use the extension
property instead.context
parameter are guaranteed to be secure, unalterable, and valid to be used for authorization. See
App context security for more information.The getDefinitions
method returns the invocation function handler that can be used as the handler
for the function referenced by the resolver
key in eligible modules.
1 2function getDefinitions(): InvocationHandler
Rate this page: