Jira Cloud user interface - How should the Tab-Panel target be built?

Jira Development Jira Cloud
, , ,
1

Hello everyone,

I extended the user interface with the help of the guide below but I don’t see what the Tab Panel target page should look like. I made a standard html page with a input field and included the all.js but in Jira it just loads until a error notification pops out which tells me to reload the page.

https://developer.atlassian.com/cloud/jira/platform/extending-the-user-interface-with-connect/
https://developer.atlassian.com/cloud/jira/platform/modules/project-admin-tab-panel/

image

"jiraProjectAdminTabPanels": [
            {
              "location": "projectgroup2",
              "url": "/project-config-contacts",
              "weight": 100,
              "name": {
                "value": "Ansprechpartner"
              },
              "key": "project-config-contacts"
            }
        ]
2

When delivering html in an iframe, in Connect, you need to make sure to add the all.js call. If you don’t then the api bridge isn’t created and you get the above error.

See About the JavaScript API for the script tag to include.

2 Likes
3

Hello @danielwester ,

thanks I solved the problem and my page gets loaded without a problem but I don’t have the stylings like on the project settings page for it’s form elements. How do I get that?

4

You’ll need to implement something like atlaskit (react based - https://atlaskit.atlassian.com) or AUI ( straight html - https://aui.atlassian.com ) or build your own using the guidelines at https://design.atlassian.com