jira云端插件开发03-在 Confluence 中构建自定义 UI 应用程序

Posted 2021-08-31 火腿肠烧烤大赛冠军

创建应用：

forge create

Custom UI

 confluence-content-byline

更改manifest.yml实现自定义UI（title为下划线文字内容）

modules:
  confluence:contentBylineItem:
    - key: hello-world-content-byline
      resource: main
      resolver:
        function: resolver
      title: Hello World from Emma Richards
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
app:
  id: '<your app id>'
  name: hello-world-custom-ui

由于项目中使用React构建所以需要打包后发布：

npm install

npm run build

forge deploy

forge install

修改APP.js文件来实现自定义：

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

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

  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);

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

export default App;

修改返回值：

import Resolver from '@forge/resolver';

const resolver = new Resolver();

resolver.define('getText', (req) => {
  console.log(req);

  return 'Hello, world!';
});

export const handler = resolver.getDefinitions();