Jira Dashboard Gaget Manifest Setup for Custom UI

Hello Comrades :wink:

I am developing an app for Dashboard gadget and would like to graph my data using graph for instance. I thought I could use Chart.js or React-chartjs-2 together with Custom UI to render it properly, however I have problem setting up my manifest file to work with Custom UI. The part of manifest file where I provide reference to my custom-ui-chart throws an error:

modules:
  jira:dashboardGadget:
    - key: dashboard-gadget-ui-kit-2-hello-world-gadget
      title: Hello-world
      description: A hello world dashboard gadget.
      thumbnail: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
      resource: custom-ui-chart  # Points to the Custom UI resource
      render: custom
      # resource: main-resource
      # render: native
      resolver:
        function: resolver
      edit:
        resource: main-resource
        render: native
  function:
    - key: resolver
      handler: index.handler
    - key: custom-ui-chart
       path: static  # Folder where `index.html` is located for the Custom UI

Error: The following resources are declared but are improperly defined in the manifest.yml file: - custom-ui-chart

I have read the documentation Custom UI however it seems to work only with jira:issuePanel module not with dashboard gadget.
All I want to accomplish is to somehow graph my data using Custom UI inside this gadget. If this is not possible, please point me to example how to create basic bar or linear chart, perhaps using Forge UI kit or UI kit 2.

Cheers

Hey @Konrad

Sorry for the slow reply!

It looks like you’ve created an app with UI Kit. UI kit (previously known as UI Kit 2) has it’s own particular chart components that can be used, and these are in EAP right now. See https://developer.atlassian.com/platform/forge/ui-kit/components/ for a list of all components available in UI Kit. The bar chart or line chart might be good places to start.

If those charts don’t suit your needs, and you have decided you want to build your app using Custom UI for the front end, previously you would have needed to build out a completely new app with Custom UI. See Build a Custom UI app in Confluence to learn how to do this.

However, there is now the option to create a frame in your UI Kit application, that allows you to display a Custom UI component within your UI Kit application. The Frame module is available in Confluence Macros now, and would allow you to combine Custom UI and UI kit into one app. This is currently also in Early Access and you would need to sign up for the EAP via the link in the documentation.

Please see the documentation available at https://developer.atlassian.com/platform/forge/ui-kit/components/frame/ for details. There’s also a tutorial at https://developer.atlassian.com/platform/forge/ui-kit/components/frame-tutorial/ and you might also find this video helpful https://www.youtube.com/watch?v=hACvThbbXM8

I hope this helps!
if you have questions about any of these things be sure to let me know, and if this answers your question it’d be great if you could mark it as the solution.

Cheers!
Melissa

1 Like

Hi Melissa,

Thank you for in-depth answer to my question. I do have to say that bar chart and other UI Kit components are very useful and intuitive to use. I believe the EAP components can only be used in development mode (not in production), so it would be good to know when they become available and lose their EAP status?

Cheers,
Konrad

1 Like

Thanks Konrad, the best place to watch for updates on when these components have been moved to General Availability is the changelog at https://developer.atlassian.com/platform/forge/changelog/